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

[Rowena_Harris]

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;
$start=$imgBeg+$imgEnd+1;
}
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>
<div class="w-slide">   
<?php getImage('2'); ?>
   </div>
 <div class="w-slide">   
<?php getImage('3'); ?>
   </div>
 <div class="w-slide">   
<?php getImage('4'); ?>
   </div>

etc etc etc

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

[kicken]

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();
    $dom->loadHTML($content);
    $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>
    </div>
<?php endforeach; ?>
</div>

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.

[maxxd]

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.