Smaller thumbnail in the_content

Question

My site is basically a Pinterest style product catalogue with atleast one image per post.

I upload large images, thumbnails of which are automatically generated by wordpress BUT the website has been loading really slow because the_content tag by default uses the largest thumbnail image that I choose from the "media" tab while creating the post.

Is there any way to use the smaller thumbnail but link to the larger thumbnail on click?

edited to add: I use the Pinboard theme.

I appended the following in functions.php:

add_theme_support('post-thumbnails');
set_post_thumbnail_size(280, 800);

and this in loop.php:

if ( has_post_thumbnail() ) {
    the_post_thumbnail(); 
} else {
    echo("-");
}

but it shows the else part on the website, so I assume it isn't finding the image used?

Thanks!

Answer 1

I suspect you may be unclear about the code and features you are referring to and therefore about what you are asking. If you are trying to change the size of the thumbnail for an image you are inserting in the content area then you would change this in the Settings under Media as marikamitsos mentioned.

Insert the image into the content area by clicking 'Add Media', selecting the image, then selecting 'Media File' from the 'Link To' drop down and 'Thumbnail' from the 'Size' dropdown as shown below. This will allow you to display the thumbnail while linking to the full size image. Also this is the thumbnail size that will reflect what you have set in the Settings under Media.

Now if you are trying to insert a 'Featured Image' as your code implies then you need to click 'Set Featured Image' from the Featured Image meta box as shown below.

The size of the featured image that is displayed can then be changed as you have done in you original code above but rather than add what you did to your functions.php I would suggest simply adding the_post_thumbnail('thumbnail'); to your loop.php. This will again use the dimensions you have set in the Media Settings for thumbnails. Please note that the_content does not display the featured image.

I suspect you are seeing the result of your else condition because you may have not actually set the featured image. Please refer to the codex on how to get the post thumbnail linking to the large image size as varun1505 mentioned.

Hope this helps!

Answer 2

I think this will help you. It shows how to link to a larger image and display the thumbnail.

Also, if you want to display a smaller image, you can do this

the_post_thumbnail( array(100,100) );

This will generate a thumbnail of size 100px by 100px.