Hello and thank you for taking the time to read this. Here is my situation. If you view the following URL: http://dedespawsandtails.com/dedes-tips/ you will see that the featured image is about 1085 x 367. I don’t understand why. The first picture is only 300 x 212. So it’s being scaled up. The second image is 1080 × 675. I did a search or two and found another user posted here: https://siteorigin.com/thread/not-quite-as-important-as-my-other-request-but-i-bet-it-will-be-a-faster-fix/ In that post it was mentioned that the default size for the featured image is 720 x 380. I attempted to run the plug-in mentioned, Simple Image Size. I ran the plug-in to resize and nothing seemed to change. I also referenced the functions.php file and see that the image size is indeed supposed to be 720 x 380. I have no idea why this is not being respected and hopefully one of you smart folks can help?
Featured Image Size Huge
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Lery
Please try this in your custom CSS
article.post .entry-header .entry-thumbnail a, article.page .entry-header .entry-thumbnail a { display: inline; } article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img { width: auto !important; }Hope this helps
Magus
Hi Lery
@Magus has directed you on how to make the changes.
The custom CSS section can be accessed via Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code provided.
Let us know if this works for you
@Magus much appreciated :)
Thanks to the both of you. It worked for the first image on the page, not the second. If you check now you should see the first image is good, and the second image is not.
Hi Lery
The reason the second image on that page is not resizing is because the original file is 1080px wide so it will always display at the panels full width
Hope this helps
Magus
Hi Lery
Would you mind pointing to the page in question?
On this one, http://dedespawsandtails.com/dedes-tips, if you used the custom css provided it should be good to go. If it does not work out, would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Sure Addo, I could do that. But, what about Magus’s reply? Looks like you guys posted close together so I want to make sure before I go ahead and do that. In regards to Magus’s reply, I understand the image is 1080 pixels wide. However, I was under the assumption that the frame for featured images was 720 pixels wide, so I would assume the image should be compressed down to that.
No?
Hi Lery
The auto setting put on the width on the earlier post changed the frame setting from 100% to match the width of the image.
What you could do is to enter a fixed width for this setting eg: 720px, but that would make the frame non responsive.
You can get around this by using @media statements like this
article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img { width: 720px; } @media (max-width: 720px) { article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img { width: auto !important; } }Hope this helps
Magus
Hi Guys
Please ignore my last post, not enough sleep and over thinking it. Although this would work there is an easier way.
Please use this instead
{ article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img { width: auto !important; max-width: 720px; }Apologies
Magus
Hi Lery, Addo and Magus
This is a good question. Hopefully you guys don’t mind if I throw down a fresh reply, hopefully doesn’t confuse things further :)
functions.php
Let’s take a quick look at functions.php so we can understand what’s happening there:
set_post_thumbnail_size(720, 380, true); add_image_size('vantage-thumbnail-no-sidebar', 1080, 380, true);You’re right, the default thumbnail size is 720, but when no sidebar is present, as is the case on your example page, the featured image size is 1080.
Theme Settings
From Theme Settings > Blog you could de-activate the featured image on single posts pages (setting is called “Featured Image”) OR we could take other steps.
Plugin Options
Simple Image Sizes (use with care) will let you change the 1080 featured image size. However, you still need to regenerate your thumbnails after making that change using the following plugin:
https://wordpress.org/plugins/regenerate-thumbnails/
CSS Options
We can also use CSS to restrict the max width of this image and even center it. For that I usually use:
/* Set a max-width for the single post and archive featured image */ .single .entry-thumbnail img { margin-right: auto; margin-left: auto; max-width: 50%; } article.post .entry-header .entry-thumbnail img { margin-right: auto; margin-left: auto; max-width: 50%; } /* Let's return the size to full on smaller dimensions, no need to edit this part */ @media (max-width: 680px) { .single .entry-thumbnail img, article.post .entry-header .entry-thumbnail img { max-width: 100%; } }The first selector applies to single post pages, the second applies to blog/archive pages. This will center the feature image and scale it down. 50% is just a demo value, you could put 90% to shrink the image just a little.
Further Theme Options
Under Appearance > Theme Settings > Blog, you could also change the blog archive layout to Grid, that’s another option.
Hope this helps :)
Thank you everyone! Let me address the replies in order.
Magus,
The following code:
{ article.post .entry-header .entry-thumbnail img, article.page .entry-header .entry-thumbnail img { width: auto !important; max-width: 720px; }Made the first image very large. The width was bout 1080 px.
Andrew,
From Theme Settings > Blog, the featured image option was unchecked. I tried checking this and noticed no difference in the image.
Then, I noticed the Featured Image Type option. It was set to Large. I changed this to Small Icon, and like magic it looks great! I think that is the best solution for this at this point. However, I’ll definitely use the other suggestions in the future should this not work out.
Thank you all for the responses. Great stuff!
Awesome, glad that works for now.
Let us know if you need a hand further.
All the best :)