Height of featured image is ignored/missing on live site

  • Unknown's avatar
    nygrend1101 · Member ·

    I would like for the newest post’s featured image to be as tall as the excerpt and read more links that are to the right of it. I have the query loop set up in columns, 50% width. In the Full Site Editor, the image displays how I imagine it would, resizing and cropping to fill the whole left column.
    However, when I go to my live site, it doesn’t do that. The 100% width I have for the featured image is working fine, but the 100% height is no where to be found. I’m using Chrome and using the inspect element I can see that on my live site, the featured image doesn’t show a 100% height attribute. If I add one in, it works how I wanted it to. Using the inspect element on the featured image in question in the Full Site Editor shows that the 100% height attribute is present, and that’s why it looks how it should.
    I don’t know what to do here. Why does the height in a percentage get ignored? It works with other units, but I don’t want other units I want percentages.

    WP.com: Yes
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    musicdoc1 · Member ·

    Hi,

    If you compare the featured image on the latest post on the front page as it appears there to the file image used to create it, you’ll see that it hasn’t been cropped at all, and the ratio of width to height (roughly 1.9:1) is maintained. The fact that a landscape orientation file image, with the width nearly twice the size of the height, is being used in an attempt to create a squarish featured image thumbnail is an obvious factor in producing the result you’re obtaining.

    There may be an easy workaround available, without editing the file image externally or internally, but I’ve no experience with the Site Editor, so I’m going to pass this along for staff attention. Staff will respond here.

  • staff-totoro · Staff ·

    Hi there,

    but the 100% height is no where to be found.

    That is because the height of your image is being set by the crop itself (as @musicdoc has correctly pointed out) so when the image size is scaled, the height is determined automatically by the width of the image. The text, however, has no such limitation; it can easily be rescaled in height and width since you can just move the words to a different line to make it work.

    You can see a good example of this in your browser by changing the size of your window to see how the homepage layout works on other sizes like smartphones, tablets, etc. The design of the theme is adaptive so the layout is always changing a bit based on size of the screen it’s being viewed on, and may not appear as the same width as you are using in the site editor.

    You can see what I mean in the video that is linked here.

    Because images do not have the same flexibility as text (unless you allow the theme to re-crop the image automatically to fit) it is very difficult to get text and image in side-by-side columns to have the same height. It’s not possible to do this via the block settings at this time, so you would likely need to use CSS code to accomplish this, which will require an upgrade.

    I also noticed that you do not have the same excerpt length from post to post, so even if you could lock the image height in for this post (to match the height of the text) it would likely get thrown off again with the next post to appear in that area, unless you were very careful about having the same excerpt link from post to post. I’m not sure there is an easy solution here, owing to the way that images and text behave so differently in adaptive site layouts.

    Hope that helps. Please let us know if you have any more questions.

  • The topic ‘Height of featured image is ignored/missing on live site’ is closed to new replies.