Featured image spec for Bindery theme
-
We are looking at upgrading to the Bindery theme but having a hard time guessing at what the actual spec dimensions for the featured images should be to work correctly in the theme. We know the images should be 960 pixels wide but we need to know the recommended WxH of total image plus the WxH of the inner box (content of graphic) for the best cropping between the front page tiles and the post level view. Here are some of our best guesses, but it would help to know what the actual recommended dimension specs are:
(1) 960×960 on total image with 700×300 inner box – this avoids any cropping between the front page tile and the post level view but it makes the graphic content appear to ‘float’ as a tiny box in the middle of the graphic, which doesn’t look great
(2) 966×739 on total image with 960×400 inner box – this looks much better on both views but is hit and miss with the cropping when moving to the post level view
The blog I need help with is: (visible only to logged in users)
-
Hi @ibmcal,
We know the images should be 960 pixels wide but we need to know the recommended WxH of total image
Taking a look at the demo page here:
https://binderydemo.wordpress.com/portfolio/birds/
That ratio is 1.5/1 for W/H. So, using the 960px width, you should be alright with 960 x 640px (or similar) for featured images. Can you give that a try?
Images will automatically be cropped to square format on the homepage (roughly 427×427) here:
http://binderydemo.wordpress.com
The WxH of the inner box (content of graphic) for the best cropping between the front page tiles and the post level view.
I’m not exactly sure I understand what you’re looking for here. I used this page as an example:
https://binderydemo.wordpress.com/portfolio/birds/
That page has the following dimensions on a 13″ screen:
That’s 447px width for text and 830px width for the image.
If I’m missing the mark here, could you please provide an example on your site of an image that’s being cropped incorrectly so i can better understand the issue?
-
Yes, here is an example of what I mean. The test image is in the size you mention (960×460) and was added as a featured image to a post as follows as a test. You will see that the image looks fine on the main page view, but the rabbit’s eyes are cropped on the post level view because that image is more horizontal. That’s what I mean by the ‘inner box crop’ spec – we’d like to know if we create the images in 960×480, where should the crop lines fall on the inside to ensure nothing will be cropped out when it goes to the post level view. Here’s how you can view that test image in a Bindery preview of our current blog:
1) Select Bindery theme and ‘preview’
2) Change primary navigation to ‘navigation’ menu
3) Under ‘Content Type’, select ‘Galleries’
4) You’ll see this image in the first post called ‘IBM + Twitter….’
5) It looks fine in this view but if you click on the post, you’ll see the image cropping I’m referring to -
-
Thanks for the example of the problem, that was really helpful!
This is a responsive theme so it’s going to adjust to display the image in the best format it can, based on the size of the screen. That’s great for photos, and less good for the kinds of images you are using that suffer from being cropped in unfortunate places.
That having been said, an image that starts much wider–say 1500-2000px wide with a height of about 1000px will work better. Since the two image displays are so different, you’ll also want to center your content as much as possible. if you have room on the sides that can be cut off in the square view, and room at the top and bottom that can be cut off on the post page, you’ll have more success.
- The topic ‘Featured image spec for Bindery theme’ is closed to new replies.
WordPress.com Forums 