Displaying Gallery Images in specific order in different divs with specific classes

For a photography portfolio site, I've created a plugin with custom post types that dashboard user will create gallery. From the custom-post-archive.php page, I'd like user to be able to click into a featured image and this would bring them to a page with the images from the gallery displayed in an order determined earlier by dashboard user and they will be displayed in certain divs with different specific classes. Think a scattered design layout of images/ divs of different sizes.

How do I break out the gallery images / array indexes in a loop that then puts the images in the divs with specific classes? The div classes will determine the "scattered" layout design which is a little more specifically placed than a masonry look. ( I've attached screenshot for a better idea of single post page.

Thanks!

  • Kate Eldridge

    This code almost does the trick, but it only allows me to loop through all the images and output an image with a certain class which means all the classes are the same. Need to figure out how to loop through and wrap a div around it that adds a counter number to the class.

    <?php while ( have_posts() ) : the_post(); ?>
         <?if ( get_post_gallery() ) :
                $gallery = get_post_gallery( get_the_ID(), false );
                /* Loop through all the image and output them one by one */
                foreach( $gallery['src'] AS $src )
                {
                    ?>
                    <img src="<?php echo $src; ?>" class="my-custom-class" alt="Gallery image" />

    <?php
    }
    endif;?>

  • Kate Eldridge

    Resolved this issue by adding a counter variable in my ForEach loop. The counter is set to 0 and when the loop loops through each image in gallery, it will add one to the counter. I then echo the class name and counter variable in my div class and it adds the counter number to the class and I can then use this to manipulate the styling of each div.

    <?php while ( have_posts() ) : the_post(); ?>
         <?if ( get_post_gallery() ) :
                $gallery = get_post_gallery( get_the_ID(), false );
    
                /* Loop through all the image and output them one by one */
                /*counter is set to 0 and when the loop loops through each image in gallery, it will add one to the counter.*/
              $counter= 0;
                foreach( $gallery['src'] AS $src )
                {
                    $counter++;
                    ?>
    
                    <div class= "<?php echo "selected-gallery-image-$counter" ?>">
                        <img src="<?php echo $src; ?>" alt="Gallery image" />
                    </div>
                    <?php
                }
            endif;?>

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.