[Resolved] Output the Meta Title of a repatable Image in a loop

[Author]

Posts

[joshuaA-3]

Tell us what you are trying to do?
I have a custom post type called "watches" with some custom fields that was made with the "Toolset types". I also made some custom fields ... One custom field I have is a repeatable image field. "wpcf-watch-carousel-images"

I am trying to write a PHP loop on the post's singles page template that outputs the images into a carousel and it is working just as I want it to ... but the next thing I need to do is output the the value stored in the image "meta title" field as seen in the WordPress media library under the image in my carousel

Is there any documentation that you are following? - posted on expert exchange and did some back and forth with a guy who was trying to help - see attached

So far if I hard code an image ID into my code I have the value in the image meta title being output - So what I need to do is store the image ID as a variable and replace my hard coded image ID with a dynamic solution.

I am having trouble storing the repeatable image IDs and outputting them in my loop

This is what I have so far

					<ul class="bxslider">
						
						<!-- check to see if there are Watch photos -->
							
							
							<?php

				$store_imgs = get_post_meta($post->ID, "wpcf-watch-carousel-images", false);
				foreach($store_imgs as $gallery_image):

				$x++;			
	
				if ( $x == 1 ) { ?><li><?}
	
				?>							
						
						<?php $image_title = get_post_field('post_title', $image_id); ?>
						
						<div class="slider-img one-edge-shadow" style="background-image: url(<?= $gallery_image; ?>)">
							<div class="style-numbers"><?php echo get_the_title(1409); ?></div>
						</div>
						
						
				<?php
	
				if ( $x == 3 ) { ?></li><?php $x=0; }
							 
                endforeach;

				if ( $x <> 0 ) { ?></li><?php } ?>
	
                 </ul>	

So where you see (1409) I need to replace it with a variable that will output the image ID ex: ($image_id)

Is there a similar example that we can see?

What is the link to your site?

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

I've performed some tests on my website and the code worked, after a few adjustments:

<ul class="bxslider">
	
	<!-- check to see if there are Watch photos -->
	<?php

	$store_imgs = get_post_meta($post->ID, "wpcf-watch-carousel-images", false);
	$x = 0;
	foreach($store_imgs as $gallery_image):
	$x++;

	if ( $x == 1 ) {
	?>
		<li>
	<?php
	}

		$gallery_image_id = attachment_url_to_postid($gallery_image);
		// this additional check is added to take care of WordPress big image scaling and an open issue associated with it
		// https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/
		// https://core.trac.wordpress.org/ticket/51058
		if($gallery_image_id < 1) {
			$gallery_image_arr = explode('.', $gallery_image);
			$gallery_image_id = attachment_url_to_postid($gallery_image_arr[0].'-scaled.'.$gallery_image_arr[1]);
		}

		$image_title = get_post_field('post_title', $gallery_image_id); ?>

		<div class="slider-img one-edge-shadow" style="background-image: url(<?php echo $gallery_image; ?>)">
			<div class="style-numbers"><?php echo $image_title; ?></div>
		</div>

	<?php
		if ( $x == 3 ) { ?></li><?php $x=0; }
		endforeach;
		if ( $x <> 0 ) { ?></li><?php } ?>
</ul>

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[joshuaA-3]

My issue is resolved now. Thank you!

Thanks I was also able to get it to work this way as well wich is very close to what you had shared with me

               <ul class="bxslider">
                  
                  <!-- check to see if there are Watch photos -->
                     
                     
                     <?php
   
            $store_imgs = get_post_meta($post->ID, "wpcf-watch-carousel-images", false);
            foreach($store_imgs as $gallery_image):
               $x++;         
   
               if ( $x == 1 ) { ?><li><?}
                  $image_id = attachment_url_to_postid( $gallery_image);
                  $image_title = get_the_title($image_id); 
            ?>
                  
                  <div class="slider-img one-edge-shadow" style="background-image: url(<?= $gallery_image; ?>)">
                     <div class="style-numbers"><?= $image_title; ?></div>
                  </div>
                  
            <?
   
               if ( $x == 3 ) { ?></li><? $x=0; }
                      
                   endforeach;


               if ( $x <> 0 ) { ?></li><? } ?>
   
                 </ul>