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
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
Share Improve this question asked Sep 9, 2019 at 17:29 MikeMike 233 bronze badges 02 Answers
Reset to default 1Since 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.
@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.