Dyad Theme – Featured Image Cropping
-
Hi all!
I was wondering if someone might be able to offer a bit of advice on my blog: http://flicksandpieces.com
I recently changed over to the Dyad theme, which is looking good, except that I’m having a little bit of a problem with the featured images. In the theme description (https://wordpress.com/themes/dyad/) it gives an ideal featured image size of 1800px wide by 1280px high, with the image being cropped dependant on your screen size.
When I switched themes I noticed that quite a few of the featured images I’d been using previously (on the Twenty Fourteen theme) didn’t fit, and were being cropped so that heads were being chopped off. I change all of the culprits, thinking my work was done, then took a look at my site on my phone and noticed that yet more heads and limbs were being cropped off in odd places, seemingly with no rhyme or reason. When you click onto a post itself on the phone however it displays the image in full with no cropping.
I’d never had this problem on Twenty Fourteen, so I’m a bit confused. I understand that the theme changes “dynamically”, but on the phone it only displays as a list of posts, so I can’t quite figure out why it’s cropping the images.
So my question is, is there any CSS code (or any other solution) which I could use to make the featured images display fixed at their full size (or scaled versions of the full images), rather than them cropping?
Your help would be really fantastic, thanks in advance and thanks for taking a look! :)
Luke
The blog I need help with is: (visible only to logged in users)
-
Luke, the featured images are positioned center center (horizontal vertical), so as the image viewport gets smaller equal amounts are taken off all sides. Depending on where the heads are within the images, they can indeed get cut off. We can change the image position to center (horizontal) and perhaps 25% (vertical) and in most cases that may take care of the issue. On images where faces take up more of the vertical space (the affair: season two…) it will mean more of the top of the head shows, but it may make the bottom of the image on the main page look bad at some screen sizes. Add this to your custom CSS and you can play around with the 25% number.
.blog .posts .entry-media { background-position: center 25%; } -
Hi,
Many thanks for taking a look at this for me – much appreciated :)
This works really well!
Mostly it seems to only be a problem on mobile/tablets, where of course the images are more tightly cropped. When you click into a post itself though, the featured image is scaled and displayed in full, rather than cropped as it is on the main menu. Is it possible to make the featured images act this way on the main menu as well as in the posts themselves?
Thanks again for your help!
-
Glad that’s working better for you.
The theme software actually creates the crop of the images for the grid display to the size needed. To change that would require editing of the theme php script files, and we cannot do that at WordPress.com.
-
-
- The topic ‘Dyad Theme – Featured Image Cropping’ is closed to new replies.
WordPress.com Forums 