Magic Tags should output multiple images with img for all

[andrepetrini]

Hi guys,
I'm trying to output a image gallery using the image field and magic tags, but I'm not being able to.
My desired output would be:

<div>
<img src="src/img1.jpg" />
<img src="src/img2.jpg" />
<img src="src/img3.jpg" />
</div>

With just {@images} I'm getting the URL from all images on the field (4 images right now), but as a single output, so I can't add them to the <img> tags individually:

So I've tried other ways and got no luck, as this:
1-

[each images]
{@images}
[/each]</div>

outputs image thumbs (150x150) side by side, with the full html img tag. I couldn’t find a way to change the images size. This is the HTML generated for each image:
<img width="150" height="150" src="https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=150%2C150&amp;ssl=1" class="attachment-thumbnail size-thumbnail" alt="" srcset="https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=150%2C150&amp;ssl=1 150w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?zoom=2&amp;resize=150%2C150&amp;ssl=1 300w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?zoom=3&amp;resize=150%2C150&amp;ssl=1 450w" sizes="(max-width: 150px) 100vw, 150px">

then this:
2-

[each images]
{@images._src}
[/each]

Outputs the URL from the first image 4 times (I have 4 images on this field). The same happens if I try to add .large after the _src.

3-

[each images]
{@images._img}
[/each]

Outputs the first image in full size, 4 times.
This is the HTML generated:
<img width="2036" height="1440" src="https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?fit=2036%2C1440&amp;ssl=1" class="attachment-full size-full" alt="" srcset="https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?w=2036&amp;ssl=1 2036w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=300%2C212&amp;ssl=1 300w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=1024%2C724&amp;ssl=1 1024w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=768%2C543&amp;ssl=1 768w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=1536%2C1086&amp;ssl=1 1536w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=1568%2C1109&amp;ssl=1 1568w, https://i2.wp.com/unblock.digital/wp-content/uploads/2020/06/touch-deodorant.jpg?resize=50%2C35&amp;ssl=1 50w" sizes="(max-width: 1000px) 100vw, 1000px">

4- Reading your documentation and some posts here on Github I believed the solution would be adding ._src at the end.
But {@images._src} and {@images._img} (without the each tag) outputs nothing.

Is this a bug?
Or do you have any ideas on how could I get the desired output?
Thank you

[sc0ttkclark]

Just an idea -- try out this:

{@images._img} (without the [each images])

or

[each images]
{@_img}
[/each]

It might not work at all, but just thinking it was worth checking.

If none of those work, your best bet is to throw it to a callback function using {@images.ID,my_pods_image_output} and the function you set via PHP like below:

function my_pods_image_output( $attachment_ids ) {
	// The size of the image to output.
	$size = 'thumbnail';

	// Ensure we have an array of non-empty IDs.
	$attachment_ids = (array) $attachment_ids;
	$attachment_ids = array_filter( $attachment_ids );
	
	$images = [];

	// Get all of the img tags for the attachments.
	foreach ( $attachment_ids as $attachment_id ) {
		// Get the img tag output for the attachment ID and size specified.
		$images[] = pods_image( $attachment_id, $size, 0, [], true );
	}

	// Remove any empty output for attachments that were invalid or did not have an img tag returned.
	$images = array_filter( $images );

	// Split the images by a space.
	return implode( ' ', $images );
}

[sc0ttkclark]

As for including something in Pods for this, I'd love to figure out how best to handle that if the first two options I gave you don't work.

[andrepetrini]

Hi @sc0ttkclark , thank you!
The first two solutions didn't work. {@images._img} gives me nothing, and

[each images]
{@_img}
[/each]

outputs the same as [each]{@images}[/each] (image thumbs side by side).

But {@images.ID,my_pods_image_output} with the function you sent, worked like a charm.
Thank you very much.

[JoryHogeveen]

Hi @andrepetrini
I don't understand why the magic tags aren't working:

[each images]
{@_img}
[/each]

This works perfectly when I test it locally.
You can even add an image size:

[each images]
{@_img.medium}
[/each]

[andrepetrini]

Hi, @JoryHogeveen. I have no idea either.
Maybe it's related to some of the settings?
Here are mine:

[JoryHogeveen]

Nope, same settings I use.
Honestly, my first guess would be a plugin conflict: https://docs.pods.io/faqs/plugin-theme-conflicts/