On WordPress Get the article picture--make the article picture collection

Source: Internet
Author: User

Once received a project, the customer asked: if there are many pictures in an article, you should be able to make these pictures in the current article page as a picture set.

Careful analysis of this requirement, front-end design without suspense, is nothing more than how to get the current article of all the images of the SRC value problem.

Lenovo to almost every site is necessary to get the first picture of the article function: function Catch_that_image () (before the relevant description: Also talk about WordPress get the first picture in the article), in this function, only use the first picture, and there get the $ Matches is a two-dimensional array ah.

Dump the variable first to look at it, insert:

Var_dump ($matches);

The output is as follows (the image URL was previously deleted for the protection of privacy authors):

Array (2) {  [0]=>  Array(3) {    [0]=>    string(171) "/>    [1]=>    "     [2]=>    string(201)" />  }  [1]=>  Array (3) {    [0]=>    "... 2015101200004.jpg "    [1]=>    " ... 2912928349248.jpg "    [2]=>    " ... awief98aw7faw.jpg "  }}

Visible, we need exactly $matches [1], not its first, but all!

Since you already have the function catch_that_image () functions, you don't have to write a new function anymore. To change this function, add a parameter call and return it to the call parameter judgment:

1 functionCatch_that_image ($picnum=0) {2   Global $post,$posts;3   $first _img= ' ';4   Ob_start();5   Ob_end_clean();6   $output=Preg_match_all('//i ',$post->post_content,$matches); 7 8   $first _img= ' ';9   if(Empty($matches[1]))$first _img= "/default.jpg";Ten   Else $first _img=$matches[1] [0]; One   if($picnum>0)return $matches[1]; A   Else return $first _img; -}

The front-end calls are used such as: <?php $all _pic=catch_that_image (2); > You can assign an array containing all the pictures to the array variable $all _pic, if only the first picture needs to be called still the original <?php echo Catch_that_image (); >.

The front-end processing logic is copied as follows (in the appropriate location in single.php):

<?php/*This procedure deals with the picture collection of this article*/    $all _pic=catch_that_image (2);//call function with parameter 2, return value in array    if(Count($all _pic) {>1) {//The number of pictures is greater than 1 to show the picture set        Echo' <div class= ' single_pic ' > '; Echo' <div class= ' Pic_header ' > Highlights of this article </div> '; Echo' <div class= ' Focusbox_single "style=" margin:0 auto > '; Echo' <ul class= ' pic > '; foreach($all _pic  as $pics=$pic) {            Echo' <li>$pic.‘" ></li> '; }        Echo' </ul> '; Echo' <a class= ' prev "href=" javascript:void (0) "></a>"; Echo' <a class= ' next ' href= ' javascript:void (0) "></a>"; Echo' <ul class= ' hd_single ' > ';  for($picnum= 1;$picnum<=Count($all _pic);$picnum++){            Echo' <li></li> '; }        Echo' </ul> '; Echo' </div></div> '; Echo' <script type= ' text/javascript ' > '; /*mouse over, left and right button display*/        Echo' jquery (". Focusbox_single"). Hover (function () {jquery (this). Find (". Prev,.next"). Stop (True,true). FadeTo ("Show", 0.2)},function () {jQuery (this). Find (". Prev,.next"). FadeOut ()}); '; /*superslide Picture Toggle*/        Echo' JQuery ('. Focusbox_single '). Slide ({maincell: ". Pic", Effect: "Fold", Autoplay:false, delaytime:3000, Trigger: "Click" });‘; Echo' </script> '; }?>

On WordPress Get the article picture--make the article picture collection

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.