Top and bottom of photo getting cut off when posting

• 

  acompassionatefriend · Member · Jun 11, 2014 at 1:40 pm

  • Copy link
  • Add topic to favorites

  Hi. When I upload some photos, they look perfect in the “featured image” box, but when I preview them or publish them, only the central space of the photo is visible on my blog page, not the top or bottom (imagine cutting off the head and feet of a person’s body and you’ve got the picture). The only way I have been able to make the entire photo viewable is to widen the canvas (adding white space to both sides). The result is that the pic appears much smaller on my homepage thumbnails – which looks strange – and is a smaller dimension on the blog page when it’s opened.

  Is there a code I can insert to prevent this image problem?

  You can see an example on my home page by looking at the thumbnail for “Finding My Survival Story” and at the post itself.

  Many thanks.

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

• 

  thesacredpath · Member · Jun 11, 2014 at 5:01 pm

  • Copy link

  Hi there, the featured post on the main page has a landscape proportioned viewport of 205px x 145px, which is a width to height ratio of 1.41 to 1. Featured images that do not have that ratio are cropped from the center to that proportion so they will fit into the area available and so that all the images will look consistent in size.

  On the single post pages, the full width featured image will be 608px x 400px (1.5 to 1).

  When using portrait oriented images, you can crop them yourself to a 1.5 to 1 size before uploading them, but for some images, that is going to mean that some of the image ends up getting cut off. If you do it yourself ahead of time, you can control what is going to show on your site (not cut off heads). I would suggest a size of 608px wide by 400px tall as that is the maximum size for a single post page (after you click and go to the post itself). If you want the images to be clickable so people can see a larger size if they click on the image on a single post page, you can do something like multiply both values by 1.5 or something. As an example, 1.5 times would be 912px x 600px. That crop ratio should work fine on both single post pages and on the feature posts on the main page.