Docs

[owenb]

Hello!

Over the years I’ve made a number of tweaks to the theme CSS in the Customizer, and now I can’t work out what I’ve done to my featured images. Here’s an example page:

http://owenbillcliffe.co.uk/london-engagement-party-photography-julie-andrew-elgin/

The theme is 1000px wide, and I upload 1000px images, and I wanted the Featured Image to use that 1000px image and show it at that size. Using CSS I did manage to make the Featured Image show at 1000px wide but I realised it was actually creating a 984px image and stretching it, because the logo should be razor sharp and it clearly wasn’t.

I asked here and learned that X ‘calculates spaces around the featured image and deducts them from the uploaded image and creates a new image at the correct dimensions’ which in my case appears to be 984px wide.

I wasn’t really sure why that was necessary, especially as the smaller version is considerably less crisp than the original I upload, which is less than ideal for a photography blog Featured Image, but it seemed like there was no way around this easily without hacking functions.php significantly.

So now I’m trying to just go ahead and have the blog load the 984px image it’s created for me, and show it at 984px. However, perhaps because of my CSS it’s still stretching to something like 988px.

So two questions:

1) is there really no simple way to have it show the 1000px original image I’m uploading? I don’t get why it needs to calculate spaces and shrink the image – I don’t want spaces really.

2) if I have to use the 984px image, can you have a little look at the above linked page and tell me what CSS I need to remove or change to make it show it at 984px and not 988px as it’s currently doing?

Thank you so much!

[Rad]

Hi there,

Thanks for writing in.

I think it’s WordPress’s new feature https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

And that’s by checking the source code, I can confirm that it’s the case.

<img width="984" height="655" src="http://i1.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?fit=984%2C655" class="attachment-entry-fullwidth size-entry-fullwidth wp-post-image" alt="london event photographer engagement kizemchuk 9" srcset="http://i1.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?w=1000 1000w, http://i0.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=150%2C100 150w, http://i2.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=300%2C200 300w, http://i2.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=125%2C83 125w, http://i1.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=75%2C50 75w, http://i0.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=100%2C67 100w, http://i1.wp.com/owenbillcliffe.co.uk/wpobp6/wp-content/uploads/2015/07/london-event-photographer-engagement-kizemchuk-9.jpg?resize=984%2C655 984w" sizes="(max-width: 984px) 100vw, 984px">

It loads the image with the size depending on its container. Currently, the container has 6px padding and 2px border. Hence, 12px (both side) + 4px (both side) = 16px. And 1000px – 16px is actually 984px.

Please try adding this CSS and try reloading it.

.entry-featured {
    border: 0px !important;
    padding: 0px !important;
}

Thanks!

[Author]

Posts