Support

Account

Home Forums Add-ons Repeater Field Responsive images from repeater field

Solved

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;?>
Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Responsive images from repeater field’ is closed to new replies.