Recent posts thumb on x-theme loading entire image WordPress
- SOLVED
We've got a site using x the theme by theme.co. It has shortcodes for 'recent posts' that we've utilized on the front page and modified to show the post excerpt as well as the featured image.
www.pacificbirds.org
Except that the featured image doesn't seem to load the featured image thumbnail, but the entirety of the image. As a result, you can see one of the images is loading really really slowly. I'd love to find a way to make it A) pull a thumbnail with a max width and B) auto-crop the height after the resize.
If you can spot what we're doing wrong, I'd appreciate it!
Answers (1)
Dbranes answers:
Can you share the relevant code snippet?
How does your <em>add_image_size()</em> look like?
You can try for example:
if ( has_post_thumbnail() ) {
the_post_thumbnail( array( 509, 329) );
}
but make sure you have such an image size defined, else this will just scale the image down.
You might also check out plugins like this: [[LINK href="https://github.com/daltonrooney/WP-OTF-Regenerate-Thumbnails"]]this one[[/LINK]] (no affiliation), to generate the image sizes on the fly when it's needed.
Dbranes comments:
Did you check [[LINK href="https://theme.co/x/member/forums/topic/resize-post-thumbnail-image-from-featured-image/"]]this post[[/LINK]] ?
michaelmiller comments:
Debranes, I did, yep, the problem is that that refers to the featured image thumbnail in function.php, whereas that doesn't seem to be getting pulled at all for the recent posts on the front page. I think that's the problem.
Dbranes comments:
I checked the recent posts shortcode demo here:
http://theme.co/x/demo/integrity/1/shortcodes/recent-posts/
and images seems to be full size images, like this one 1169x663 :
http://theme.co/x/demo/integrity/1/wp-content/uploads/sites/2/2013/05/self-hosted-video-screenshot.jpg
At first sight, the image width must be at least 767px, so you could try to resize the image to that size to test.
Dbranes comments:
I did send you a PM
Dbranes comments:
If your stack is <em>renew</em>, then I suspect you got this:
get_the_post_thumbnail(
get_the_ID(),
'entry-' . x_get_option( 'x_stack', 'renew' ) . '-cropped', NULL
)
in your <em>[recent_posts]</em> shortcode callback:
Note that on your page, the HTML for the recent post image is:
<img width="2880" height="1913"
src="http://www.pacificbirds.org/wp-content/uploads/2014/01/001_7259-5.jpg"
class="attachment-entry--cropped wp-post-image" alt="001_7259-5">
where the image size is:
entry--cropped
This isn't a valid image size, you probably want <em>entry-renew-cropped</em> or <em>entry-cropped</em> instead.
So check your <em>x_stack</em> option and what sizes are being generated for the <em>001_7259-5.jpg</em> image, i.e. find all the files:
/wp-content/uploads/2014/01/001_7259-5-???x???.jpg
and check what <em>add_image_size()</em> calls you got in your theme's setup.
michaelmiller comments:
Dbranes, genius catch. Our modifications in the childs theme functions.php for changing the recent posts omg class was calling '-cropped', instead of just 'cropped' and that was obviously playing with it. Removing the '-' has made it load a significantly smaller size.
I still can't claim to understand why it's not just loading an image of max width 300 as I'd swear we told it to do via the child theme functions.php, but this works well enough.
Dbranes comments:
great.
I can see that your current size is now w: 855px, I think that's expected.
Note that this size has to cover the mobile case with 100% width, which is seems to be width: 667px at most.
This size is also used for featured images on single post, which seems to be need width: 855px.
So if you would use width: 300px instead, you would get a very stretched image for those cases.
michaelmiller comments:
Yep, I realized you were totally correct. So, your solution was spot on. Thank you!