WordPress Article thumbnails

Source: Internet
Author: User

Link: http://csspod.com/archives/post-thumbnail-images-since-wordpress-2-9

This article is translated from the new in WordPress 2.9: Post thumbnail images written by Mark jaquith, a WordPress developer. It describes how to set and call thumbnails.

The following is the translation
Many WordPress Themes use pictures to represent every article, especially those with magazines. Images may only be displayed on the homepage, which may be independent or placed next to the abstract. So far, there is no standardized method to implement this function. Many themes require users to enter image URLs in custom domains in a tedious way. images must be manually cropped. Starting from WordPress 2.9, the topic Author can easily enable the thumbnail selection interface, and then use a simple
The template tag calls the image.

First, declare in the topic's functions. php that the topic supports the thumbnail function. This will enable the thumbnail setting interface in the WP management background.

add_theme_support( 'post-thumbnails' );

The above code will enable the thumbnail selection interface in both the post and page content models. If you only want to select one, you can add the parameter:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add it for postsadd_theme_support( 'post-thumbnails', array( 'page' ) ); // Add it for pages

Add the required row to functions. php.
Next, specify the thumbnail size. There are two options: proportional scaling and cropping. Proportional scaling is like a 100x50 image with a size of 50x50. The image is scaled to 50x25. The advantage of this method is that the entire image can be displayed. The disadvantage is that the size of the generated image is different, sometimes the width is limited, and sometimes the height is limited. If you want to limit an image to a certain width or height, you can specify the width and a height that is impossible to reach, such as 99999.

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, box resize mode

In the second cropping mode, the image is cropped to the aspect ratio of the matching target, and then scaled to the specified size accurately. The advantage is that the size of the generated image is the same. The disadvantage is that the image will be cropped (from the left and right sides, or from the top and bottom) to fit the aspect ratio of the target size, the cropped part cannot be displayed in the thumbnail.

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, hard crop mode

Now you can use the template function to display these images in the topic. These functions should be placed in the main loop, you can also use these functions to call thumbnails not in the main loop ).

Has_post_thumbnail () returns a Boolean value indicating whether the current article has a manually selected thumbnail:

<?php    if ( has_post_thumbnail() ) {    // the current post has a thumbnail    } else {    the current post lacks a thumbnail    }?>

The_post_thumbnail () Outputs a thumbnail if a thumbnail exists:

<?php the_post_thumbnail(); ?>

These are the most basic usage, and the following are some advanced usage.
Suppose you want to use a 50 × 50 hard-cropped thumbnail on the homepage, and a 400 pixel width (unlimited height) thumbnail on the permanent link page of the article, specify an extra custom size. The Code is as follows:
Functions. php

add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size

The Code of home. php or index. php depends on the topic structure:

<?php the_post_thumbnail(); ?>

Single. PHP code:

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Set_post_thumbnail_size () only calls add_image_size ('post-thumbnail ') -- default Article thumbnail "handle", but as you can see, you can add additional handles to call add_image_size ($ handle, $ width, $ height, {$ hard_crop_switch}); Distinguish the handle when using the_post_thumbnail ($ handle );

To support earlier Wordpress versions, use function_exists () to prevent earlier versions from calling these new functions:

if ( function_exists( 'add_theme_support' ) ) { // Added since 2.9    add_theme_support( 'post-thumbnails' );    set_post_thumbnail_size( 50, 50, true ); // Normal post thumbnails    add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size}

Warning: WordPress 2.9 is only valid for newly uploaded images and cannot resize existing images. I am considering implementing it in future versions: can WordPress 3.0 be adjusted ?). If you have previously uploaded a thumbnail and declared a new size, you cannot hardcut the previously uploaded thumbnails when calling the template function, proportional scaling will also be completed in the browser. As a temporary solution, viper007bond developed a plug-in to backtrack and create the missing thumbnail size: Regenerate thumbnails.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.