Thumbnails squashed into squares

  • Images uploaded into posts are not being displayed in their proper ratio or size. They are being squashed into squares. Particularly a problem for my site where most pictures are book covers and, therefore, rectangular.

    This thumbnail image (“featured image”) is not affected by changing any settings in Settings>> Media.

    Neither is it affected by editing the image. It remains in the same size square no matter what size the original is.

    At the moment, I am using a work around by altering the CSS.

    Line 222, where it begins: “.post img.attachment-thumbnail…” limits the thumbnail to: “width:120px;height:120px;”. I simply removed this code. This images are now the correct size.

    Let me know if you add in any updates which would be a more sensible way of doing this.

Viewing 3 replies - 1 through 3 (of 3 total)

  • I dont think they are becoming squares , look on the demo site https://supernovathemes.com/supernova/post-23/

    Thread Starter LittleBlogger

    (@littleblogger)

    I see that you don’t have squares on your demo site. This appears to be because your pictures are being generated using different code; and I don’t understand why.

    When I inspect the picture element on your demo site, it shows that your picture is bound by the rule:
    .supernova_thumb img
    which relates to line 633 of the CSS which doesn’t turn the picture into a square.

    However, when I put a picture in a post on MY site, it is bound by the rule:
    .post img.attachment-thumbnail, type post img.attachment-thumbnail
    which relates to line 222 of the CSS which employs the code “width:120px;height:120px;”, as I mentioned

    How are you adding a picture to your post and making it the correct size?

    I am doing so by setting a featured image (images added via “add media” don’t show up on the home page).

    I’m working on this site again today (having taken a month’s break) and will be taking out the “width:120px;height:120px;” code to get rid of my square images issue. But you can see see the site here:
    https://www.ellybooks.co.uk

    Thread Starter LittleBlogger

    (@littleblogger)

    PS: Since I have switched to displying all of a post on the home page, I have switched to inserting images via “add media”, as featured images do not show when turning off excerpt

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Thumbnails squashed into squares’ is closed to new replies.