WP generates a thumbnail, how do I display it?

Are you using a Featured Image (https://codex.www.ads-software.com/Post_Thumbnails), are you adding an image directly to a post, or are you uploading an image to the media library exclusively?

Using the post thumbnail (Featured Image) should be pretty straight forward – you need to modify your template with a call to the thumbnail:

if ( has_post_thumbnail() ) {
	the_post_thumbnail();
}

That will generate the image tag for you and then you can style it using the classes added (or wrap it in another element, such as a div, and style that).

If you’re doing something else, just be a bit more specific and I’ll try to provide with steps.

Cheers.

thanks. I’m using “advanced custom field” to upload the image.
There is a thumbnail of the uploaded file, something with extension

xyz5-thumbnail.jpg

I was wondering how to call this thumbnail?

thanks

The plugin, Advanced Custom Fields?

If that’s the case, you simply need to add the field to your template.

Example:
<img src="<?php the_field('your_image_field_name'); ?>" alt="" />

I believe, if you want to get the thumbnail version, you’ll need to do two things:
1. In your custom field, select “Attachment ID” for the Return Value
2. In your template, do something like…

<?php $image = wp_get_attachment_thumb_url(get_field('your_image_field_name')); ?>
<img src="<?php echo $image[0]; ?>" alt="" />

thanks. however, the code above returns the image id <img src=”image id”> it returns a id number. Therefore, no image will be displayed.
I believe thumbnail name is in this format: “file name” + “-thumbnail”.jpg

If I could break the “xyz.jpg” to “xyz-thumbnail.jgp” would do the trick.

Thanks

The code needs to return the ID in order to do any type of resizing and the file name may change depending on your media settings (uploading to a month/year directory or not).

Given that WordPress’ “Thumbnail” size defaults to 150×150, this code should return your image exactly how it appears in the back-end when uploading through ACF:

<?php $image = wp_get_attachment_image_src(get_field('your_image_field_name'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="" />

(See https://www.advancedcustomfields.com/docs/field-types/image/ for more info.)

got it working. I used “explode” to implode the string and added “-150×150” to the image name and recomposed and end up like this.

“image name” + “-150×150” + “.jpg”

and this will give me the resized version of image and would save a lot of host bandwidth.

thanks for the helps.

I still have problem with cropping. Because no all the image are the same aspect ratio, if I hard code the size 150×150, some of the image wont’ show up because it might be like this

xyz-150×120.jpg

I still need to figure out how to get that sting after the name of the file “xyz” + “-????” + “.jpg”

I’m afraid I don’t have a better answer for you – the aforementioned code

<?php $image = wp_get_attachment_image_src(get_field('your_image_field_name'), 'thumbnail'); ?>
<img src="<?php echo $image[0]; ?>" alt="" />

converts your image to the thumbnail size quickly and ensures you won’t have to worry about the original image.

Also, should you ever want to change the size, you can make ‘thumbnail’ anything you want – WordPress defaults (‘medium,’ ‘full’) or your own custom size/crop using set_post_thumbnail_size (https://codex.www.ads-software.com/Function_Reference/set_post_thumbnail_size).