Jump to content

Get Image by number, but if loop when no image? Help


Recommended Posts

Hi - can anyone help? 


I'm new to PHP land, and failing at this particular part.


I have an image slider - where each image is contained in a div (e.g it is not a slider using ul and il...)

It is will be used in a template for many pages, which will each have a varying number of images.


There for I need to create a loop that say 'when there is no img url found, return to img 1'

I'm stump. Currently this is beyond me



Or do I need to start from scratch? (ARGH!)


Here is my function

 function getImage($num) {
global $more;
$more = 1;
$link = get_permalink();
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$postOutput = preg_replace('/width="([0-9]*)" height="([0-9]*)"/', '',$postOutput);;
$image[$i] = $postOutput;
if(stristr($image[$num],'<img')) { echo '<a href="'.$link.'">'.$image[$num]."</a>"; }
$more = 0;

and here's how I use it in the html:

<div class="project-slider-mask w-slider-mask">
    <div class="w-slide">   
<?php getImage('1'); ?>
<div class="w-slide">   
<?php getImage('2'); ?>
 <div class="w-slide">   
<?php getImage('3'); ?>
 <div class="w-slide">   
<?php getImage('4'); ?>

etc etc etc

Help much much appreciated....been failing at this for so long! 

Link to comment
Share on other sites

Rather than make a function to pull a single image from the post, you should make a function to pull all the images from the post and return them in an array. Within your template then you can use a foreach loop to go over the returned array and output a div for each one.


function extractImages($content){
    $dom = new DOMDocument();
    $imageTags = $dom->getElementsByTagName('img');

    $imageHtml = [];
    foreach($imageTags as $tag){
        $imageHtml[] = $dom->saveHTML($tag);

    return $imageHtml;
This function parses through the given content using DOMDocument to find the images. This is better as it actually parses the HTML properly rather than just doing a naive search. It does require the HTML to be reasonable well formed however to work. Once it has found the images it returns an array of the image html tags.


You'd then re-write your template like so:

<div class="project-slider-mask w-slider-mask">
<?php foreach (extractImages(get_the_content()) as $image): ?>
    <div class="w-slide">
        <a href="<?=get_permalink()?>"><?=$image?></a>
<?php endforeach; ?>
This will use the function to find the individual images an then loop over them using foreach. For ever image found it will output the HTML contained within the loop.
Link to comment
Share on other sites

Admittedly it's early, but I'm not really sure what you're trying to accomplish with this logic. It sounds like you're trying to create a carousel on an image gallery, but doing a whole lot of work to do it. Is it not possible in your situation to create the gallery in the post? WordPress will typically create a div to wrap the gallery images that is assigned a class of "gallery". Use your functions.php file to include Slick Carousel on the appropriate pages, and use your theme's javascript - just target the gallery wrapper div in the Slick initialization options and tweak from there.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.