Improve HotNews pro2.4 thumbnail calling method

HotNews Topic one hundred and fifty-three 20.6K Reading mode
abstract I didn't do anything during the Spring Festival holiday, except eating and sleeping, or watching movies online. I didn't even think about the theme of the online store I promised my friends to make. Today, I woke up naturally, got up and answered some questions from netizens, started to collect materials, and streamlined the theme function of hot news

I didn't do anything during the Spring Festival holiday, except eating and sleeping, or watching movies online. I didn't even think about the theme of the online store I promised my friends to make. Today, I woke up naturally, got up and answered the questions of several netizens, started to collect materials, and streamlined the theme functions of hot news. I was ready to build an online store theme for my friends based on this, which is actually just a picture theme. It suddenly occurred in the sorting that some functions of the theme thumbnail have not yet been developed, so this article was created.

HotNews pro2.4 topic thumbnail function includes three call display modes, adding custom columns to display specific pictures, automatically reading pictures in articles (both local and external images are supported), and random thumbnails. In fact, another function has been added, but the display has not been specifically called. That is, the image call after the local uploaded image is automatically cut. This function is in functions.php:

  1. add_image_size('featured', 140, 100, true);

The function of this sentence is to automatically generate a thumbnail cut to 140 × 100 after uploading pictures locally. This function is not limited by the thumbnail size in Wordpress background media options. You can adjust the size at will.

If the size of the image you upload is large, directly calling to display it as a thumbnail of the article will affect the page loading speed, while calling to display this small image after clipping and compression will have a much smaller impact.

As the default function of automatically generating thumbnails in Wordpress media options, this function can sometimes be viewed as a chicken bone. By default, when you upload an image, WordPress will automatically generate 4 thumbnails of different sizes, which will waste a lot of space. Therefore, it is generally necessary to change the size of thumbnails to 0 in Wordpress media options at the first time, In this way, a large number of useless thumbnails will not be generated.

However, radish and vegetables have their own preferences. Some students may not have enough space, and this function is still useful, which can improve the loading speed of thumbnails. Here's how to call the cropped and compressed thumbnail:

To modify the theme, please use a special text editing tool such as Notepad++. Never use the system's own notepad to edit the theme template.

Open thumbnail.php to find:

  1. <div class = "thumbnail" >
  2. <? php if (has_post_thumbnail()) { the_post_thumbnail('home-thumb' , array (' class ' => 'home-thumb'));  }
  3. else { ?>
  4. <a href= "<?php the_permalink() ?> " rel= "bookmark" title= "<?php the_title();  ?> " ><img class = "home-thumb" src= "<?php echo catch_first_image() ?> " width= "140px" height= "100px" alt= "<?php the_title();  ?> " /></a>
  5. <? php } ?>
  6. <? php endif ;  ?>
  7. </div>

Replace with:

  1. <div class = "thumbnail" >
  2. <a href= "<?php the_permalink() ?> " rel= "bookmark" title= "<?php the_title();  ?> " >
  3. <? php if (has_post_thumbnail()) { the_post_thumbnail('featured'); }
  4. else { ?>
  5. <img class = "home-thumb" src= "<?php echo catch_first_image() ?> " width= "140px" height= "100px" alt= "<?php the_title();  ?> " />
  6. <? php } ?>
  7. </a>
  8. <? php endif ;  ?>
  9. </div>

Call method:

When editing an article to upload a picture, select "As a featured image" next to the "Insert into article" button. After the article is published, the thumbnail after clipping and compression will be automatically displayed on the article list page.

If you also want to display the cropped image in the slide, you can do so in:

  1. add_image_size('featured', 140, 100, true);

Add a sentence below:

  1. add_image_size('show', 400, 248, true);

In this way, another 400 × 248 image will be automatically generated after uploading the image. Then, open slider.php and find:

  1. <? php if (has_post_thumbnail()) { the_post_thumbnail('home-thumb' , array (' class ' => 'home-thumb')); }

Replace with:

  1. <? php if (has_post_thumbnail()) { the_post_thumbnail('show'); }

If the uploaded picture is not manually set as a featured picture, the thumbnail still displays the original large picture. This function does not support the external chain picture.

Note: Theme users who do not plan to use this function, please delete the code that automatically generates thumbnails in functions. php!

Most of the articles on this site are original and used for personal learning records, which may be helpful to you, for reference only!

 weinxin
My Wechat
Copyright Notice
Please indicate the source and link of the original article reprinted on this site. Thank you for your cooperation!
five hundred and ninety-eight million eight hundred and forty-five thousand and six
 
 Robin
five hundred and ninety-eight million eight hundred and forty-five thousand and six
Comments one hundred and fifty-three    Visitors one hundred    Author twenty-eight
    •  www.seo3s.com
      www.seo3s.com zero

      Brother Bird, I want to use your hotnews template to change a clothing enterprise website. But the thumbnail will not be resized. Can you give me some tips? Where the thumbnail needs to be changed: CMS: hot spot, picture scroll, latest article thumbnail, popular category at the bottom, etc. The inner pages also need to be changed. And where is the photo album.
      Thank you.

        •  Robin
          Robin

          @ www.seo3s.com This is the strategy
          http://zmingcx.com/wordpress-theme-modify-tutorial.html

       anonymous

      Comment

      Anonymous netizens
       :?:  :razz:  :sad:  :evil:  :!:  :smile:  :oops:  :grin:  :eek:  :shock:  :???:  :cool:  :lol:  :mad:  :twisted:  :roll:  :wink:  :idea:  :arrow:  :neutral:  :cry:  :mrgreen:

      Drag the slider to complete validation