Featured Images Scale Issue on Skylark Theme

  • Author
    Posts
  • #1928700

    lodosmedia
    Member

    Hi,

    This problem came out after i changed height value of featured images. By default they appear more in landscape orientation. I added simply a new value (h=220px) to make them portrait.

    There is also a notice in CSS editor says:

    “Make sure images with WordPress-added height and width attributes are scaled correctly”.

    How can i overcome this scaling issue? Any help would be appreciated.

    Best,

    The blog I need help with is lodosmedia.com.

    #1928982

    I checked the home page at http://lodosmedia.com/ and I see a row of featured images under a heading that says “Cast.” Here is a direct link to one of those images: http://lodosmedia.files.wordpress.com/2012/10/lodosfeatured3.jpg?w=213&h=136&crop=1

    You may not undo those size and cropping settings since they are hard coded into the theme. You may, however, stretch that image with CSS. But in order to do that, you would need to expand the width in a way that preserves the images aspect ratio. In your case, if you wanted to expand the featured images on the Skylark theme from 213 x 136 px to 220px height, you would have to also make the image width about 344px. Note that the down side to stretching a set sized image, such as a featured image, to make it larger is that the image will take a hit in quality. How good or bad a stretched image looks can depend on a few factors like how much you stretch it, the original image quality, the opacity, and the icon overlay — all factors in this theme.

    “Make sure images with WordPress-added height and width attributes are scaled correctly”.

    This is trying to say what I explained above—that you cannot adjust the height without also adjusting the width or you will run into the scaling issue you referred to.

    Here is an example that stretches the featured images on the Skylark home page so they are 220px in height with a proper matching width increase:

    .category-section img {
    	height: 220px;
    	width: 344px;
    	max-width: none;
    }

    Now, that makes the images overlap. To prevent that, you can hide the overflow on the parent HTML container, like this:

    .feature-thumbnail {
    	overflow: hidden;
    }

    Those two CSS pieces together might get you the closest best result to what you were looking to do.

    #1929039

    lodosmedia
    Member

    I tried your CSS suggestions, as you say there was a quality problem with images. therefore i switched back to it’s default size.

    Is there anyway to change how the opacity effect looks. I mean it’s greyed out to white now. How can i add a fade out to black effect without changing the background color?

    Thanks for your help.

    #1929177

    Is there anyway to change how the opacity effect looks. I mean it’s greyed out to white now.

    In the theme, the opacity for featured images on the home page is set to 50% by default, but you can undo that and change it to start at 100% (this effectively removes the hover effect for the images) by adding this to your Appearance > Customize > CSS editor:

    .feature-thumbnail {
    	opacity: 1;
    }

    How can i add a fade out to black effect without changing the background color?

    To do this, it’s a little tricky. You have to undo the opacity on a parent element ( the .feature-thumbnail element in this case), set the background for that container element to black, then change the opacity for that element to 50% by default instead of it’s parent. Here’s what I came up with as an example that I think accomplishes the fade out to black effect you’re thinking of:

    .feature-thumbnail {
    	opacity: inherit;
    	background: black;
    }
    .feature-thumbnail img {
    	opacity: 0.5;
    }
    #1929178

    Great looking stuff so far btw! I’m glad you’re here at WordPress.com. :)

    #1929192

    lodosmedia
    Member

    Great looking stuff so far btw! I’m glad you’re here at WordPress.com. :)

    Thank you so much. I just started to building it and very nice to hear that.

    To do this, it’s a little tricky. You have to undo the opacity on a parent element ( the .feature-thumbnail element in this case), set the background for that container element to black, then change the opacity for that element to 50% by default instead of it’s parent. Here’s what I came up with as an example that I think accomplishes the fade out to black effect you’re thinking of:

    I added the properties and its now very close to my target. Setting a black background for the .feature-thumbnail element caused a black line at the bottom of featured images. Is it possible to hide this?

    I also tried to make post format icons fully visible (opacity: 1) but i was unable to change it. I guess that must be a simple touch but as a newbie to CSS can not realize it. :)

    #1929199

    Setting a black background for the .feature-thumbnail element caused a black line at the bottom of featured images. Is it possible to hide this?

    Hmm. Try moving this line:

    background: #000;

    From the .feature-thumbnail block to the one for .feature-thumbnail img

    I swear I tested that before and it didn’t work, which is why I had the black background on .feature-thumbnail before. Perhaps you switched something else around in the HTML that’s allowing it to work now though (or I wasn’t it doing it right before when I tested). :)

    I also tried to make post format icons fully visible (opacity: 1) but i was unable to change it.

    I see that you have this in your custom CSS right now:

    .feature-thumbnail:hover {
    	opacity: 1;
    }

    Try updating it to this:

    .feature-thumbnail:hover .post-format-icon,
    .feature-thumbnail:hover {
    	opacity: 1;
    }

    Does that get the end result you were after?

    #1929232

    lodosmedia
    Member

    Hi again,

    Thanks for your help.

    I see that you have this in your custom CSS right now:

    .feature-thumbnail:hover {
    opacity: 1;
    }

    Try updating it to this:

    .feature-thumbnail:hover .post-format-icon,
    .feature-thumbnail:hover {
    opacity: 1;
    }

    Does that get the end result you were after?

    This action gives me a full opacity when i go with mouse on it. Sorry, i didnt explain the issue very well. I want to add full opacity by default, and disappear by mouse over. Very similar to actual properties.

    Hmm. Try moving this line:

    background: #000;

    From the .feature-thumbnail block to the one for .feature-thumbnail img

    Unfortunately, nothing has changed. I see it as a frame effect for now :)

    #1929233

    eurello
    Staff

    Hi there,

    It looks like you figured this out! I see the icons are now opaque by default, but disappear when hovered. Wonderful! Are you all set with this?

    #1929234

    lodosmedia
    Member

    Hi,
    Nope, it is still transparent by default. It is related with featured images opacity. I would like to have these as full white icons by default.

    #1929235

    eurello
    Staff

    Hi there,

    You can add:

    .feature-thumbnail img {
    opacity: 1;
    }

    But that removes the black transparent fadeout that Sheri helped you create. I’m not able to figure out how to keep the transparency of the image without the icons inheriting it. :(

    #1929236

    lodosmedia
    Member

    Ok, i think i can live with this.

    Thanks for your support.

The topic ‘Featured Images Scale Issue on Skylark Theme’ is closed to new replies.