Introduction to thumbnail function of WordPress

Time:2020-1-16
1. Add function

Insert code in function.php

add_theme_support('post-thumbnails');

After inserting, a featured image will appear in the lower right corner of the background editing page (some versions may be or thumbnails of the article)


After clicking to set the featured image, you will get the same interface as inserting the image. However, if you look carefully, you will find that after uploading the image locally or opening the file from the media, there will be more options for the featured image

Click it and wait for it to display, then you can close the small window~

2. How to call

Add code where you want to display

<?php the_post_thumbnail(); ?>

It can be called, for example, by inserting it into a large loop on the home page.

3. Follow up improvement

(1) Call other pictures if there is no thumbnail

Copy code

The code is as follows:

<?php
if ( has_post_thumbnail() ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>/images/xx.jpg” />
<?php } ?>

Just change the following one to the address of your own picture~
(2) Control thumbnail size
Add “theme” support (“post thumbnails”) just inserted in function.php, followed by

Copy code

The code is as follows:

set_post_thumbnail_size( 50, 50, true );

The setting order of dimensions is: width, height (in pixels)
(3) A picture with thumbnails of various sizes
Add “theme” support (“post thumbnails”) just inserted in function.php, followed by

Copy code

The code is as follows:

set_post_thumbnail_size( 155, 110, true ); // 305 pixels wide by 380 pixels tall, set last parameter to true for hard crop mode
add_image_size( ‘one’, 155, 110, true ); // Set thumbnail size
add_image_size( ‘two’, 350, 248, true ); // Set thumbnail size
add_image_size( ‘big’, 546, 387, true ); // Set thumbnail size

The first one is the default thumbnail size, and the last three are special sizes, which can be used according to the actual situation. One, big, two in quotation marks can also be changed to the name you want.
Call, take 350px * 248px as an example,

Copy code

The code is as follows:

<?php
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
< PHP echo “$thumbid”;? > with the previous one, the final code is:
<?php
if ( has_post_thumbnail() ) { ?>
<?php
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
<?php echo “$thumbID”; ?><?php } else {?>
<img src=”<?php bloginfo(‘template_url’); ?>”/>
<?php } ?>

That’s about it. I hope that more people who are studying or writing WordPress topics can help~

Recommended Today

[Redis5 source code learning] analysis of the randomkey part of redis command

baiyan Command syntax Command meaning: randomly return a key from the currently selected databaseCommand format: RANDOMKEY Command actual combat: 127.0.0.1:6379> keys * 1) “kkk” 2) “key1” 127.0.0.1:6379> randomkey “key1” 127.0.0.1:6379> randomkey “kkk” Return value: random key; nil if database is empty Source code analysis Main process The processing function corresponding to the keys command is […]