Home › Forums › Add-ons › Repeater Field › Responsive images from repeater field
Hi!
My code:
<?php
// check if the repeater field has rows of data
if( have_rows('zdjecia') ):
// loop through the rows of data
while ( have_rows('zdjecia') ) : the_row();
// display a sub field value ?>
<div class="entry-thumb">
<?php the_sub_field('zdjecie');?>
</div>
<?php endwhile;
else :
// no rows found
endif;?>
This code is returning only IDs or URLs depending on the sub-field ‘zdjecie’ settings.
I’m looking for a sollution to get a html output like this:
<div class="entry-thumb">
<img width="830" height="468" src="https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-830x468.jpg" class="attachment-sydney-large-thumb size-sydney-large-thumb wp-post-image" alt="" srcset="https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-830x468.jpg 830w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-300x169.jpg 300w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-768x433.jpg 768w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-1024x577.jpg 1024w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-230x130.jpg 230w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-350x197.jpg 350w, https://strefa.pro/wp-content/uploads/2017/08/20170731_134145-480x271.jpg 480w" sizes="(max-width: 830px) 100vw, 830px"> </div>
Any advicess will be nice 🙂
You need to have the setting of the field to return image or image IDs. See the image field documtation https://www.advancedcustomfields.com/resources/image/. Either that or your need to get the field unformatted and this will return the ID. get_sub_field('zdjecie', false)
.
And that lead to the second part, you need to get the field using get_sub_field because ACF will not do this kind of formatting for you.
what you do next depends on what your returning.
If you’re returning an array then you need to get the values you want from that array. If your returning the ID then you need to get the values of the different image sizes yourself, honestly, I’d go with the array because there’s too much code to put it all here.
At any rate, you need to build the attributes for src and sizes yourself.
You’re other option is to create an image tag that looks identical to the image tag that WP inserts into the content area of a post and then
$image = 'construct your image tag';
$image = wp_make_content_images_responsive($image);
echo $image;
Many thanks for Your advise 🙂
My working code is
<?php
// check if the repeater field has rows of data
if( have_rows('zdjecia') ):
// loop through the rows of data
while ( have_rows('zdjecia') ) : the_row();
// display a sub field value ?>
<div class="entry-thumb">
<?php
$image = get_sub_field('zdjecie', false);
$size = 'sydney-large-thumb'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );}
?>
</div>
<?php endwhile;
else :
// no rows found
endif;?>
The topic ‘Responsive images from repeater field’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.