How do you output an unknown number of images in a custom post type with desired markup?

Question

I'm working on a theme that will have an image gallery within a custom post type.

I'm able to insert them into the post (using Advanced Custom Fields and embedding them in a WYSIWYG box) but I was wondering if there was a cleaner way to do it, such as using the image uploader field of ACF and an option to (e.g.) ADD ANOTHER.

Then I would like the images to appear wrapped in DIVs and with some specific markup to get them to play nicely with the Owl Carousel code I've set up.

I don't know how many images each entry will have.

Any help would be very appreciated and I'd be more than happy to share any further info!

Cheers, M

Answer 1

Since you are using ACF, you should use a repeater field. This will give you a nice admin interface for adding/editing/removing images. Once you have the fields created and added to a page you just loop through the data with PHP, here is where you would create the markup needed for owl carousel.

Here is an example of getting the data from a repeater.

<?php if( have_rows('repeater_field_name') ): ?>
    <ul class="slides">
        <?php while( have_rows('repeater_field_name') ): the_row(); 
            $image = get_sub_field('image');
            $content = get_sub_field('content');
            $link = get_sub_field('link');
            ?>

            <li class="slide">
                <?php if( $link ): ?>
                    <a href="<?php echo $link; ?>">
                <?php endif; ?>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />
                <?php if( $link ): ?>
                    </a>
                <?php endif; ?>
                <?php echo $content; ?>
            </li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>

Read over the page I linked to above, it has more info and examples.

Answer 2

@RiddleMeThis answer is great, but I found a free option that allowed me to add repeater fields whilst simultaneously using Advanced Custom Fields:

WCK - Custom Fields and Custom Post Types Creator

The free version is very handy with the repeater field.