(Pages) Original and thumbs

[Sonya*]

I have defined a multiple Upload field in a Pages database for images only. I would like to display the images in carousel and need thumbs and original locations. I have tried this:

{{$images = $record->customFieldDisplayByKey('images', 'raw') and $thumbs = $record->customFieldDisplayByKey('images', 'thumbs');}}

But this does not work as the order of thumbs and images does not match. This is the order of the images in cms_custom_database_3 in field_10

monthly_2021_10/lake-6641880.jpg.eb13d74004f9c2719eecf920c705eaea.jpg,
monthly_2021_10/redwood-national-park-6667452.jpg.f024a0c23e256de59503715f6a5809db.jpg,
monthly_2021_10/forest-6631518.jpg.18a05d8e1196c485d6f6730cff014802.jpg,
monthly_2021_10/port-6587129.jpg.3a1f9ae14ccc546b986c650dbfc1e2c9.jpg,
monthly_2021_10/mountain-6596074.jpg.4d769ca0cd65e76e39deebd96d2c582c.jpg,
monthly_2021_10/road-6654573.jpg.f365a8856c7345336369744fdf75c769.jpg,
monthly_2021_10/mountain-6596074.jpg.1b314572d0782d331d805402d5f98359.jpg

And this is the order of corresponding thumbnails in cms_database_fields_thumbnails

monthly_2021_10/forest-6631518.thumb.jpg.d896d119037c222abaa3e01b954f53d6.jpg
monthly_2021_10/lake-6641880.thumb.jpg.e663cec5935dd46dd17c8eea53e2abc8.jpg
monthly_2021_10/mountain-6596074.thumb.jpg.b67d42b61e18ef89cc6b20d7f46cf920.jpg
monthly_2021_10/mountain-6596074.thumb.jpg.7631cc0f9891e80111b11ed9f6f3aad1.jpg
monthly_2021_10/port-6587129.thumb.jpg.06a581614fed46b8d476b02292ebc366.jpg
monthly_2021_10/redwood-national-park-6667452.thumb.jpg.a04f7c6d2ef63140f0133a5a92ff0f80.jpg
monthly_2021_10/road-6654573.thumb.jpg.3bc0c3502d08fae23770e768bfdf289b.jpg

You see that order is not the same. So the both arrays $images and $thumbs cannot be used just by their index.

That's why, I cannot map the images and thumbs in foreach loop as suggested below:

{{foreach $images as $index => $src}}
	<li class='ipsCarousel_item ipsAreaBackground_reset ipsPad_half' data-ipsLazyLoad><a href='{$src}' data-ipsLightbox><img src='{$thumbs[$index]}'/></a></li>
{{endforeach}}

Question: how do I get thumbs and original image locations in the right order to use in the database template for carousel?

Thank you!

Edited October 18, 2021 by Sonya*

[opentype]

I’ve reported this several times through various channels. @Matt promised to look at it. I really needs to be fixed in the software. 

[IPCommerceFan]

Have you tried something like:

{{sort($images); sort($thumbs);}}

Before plugging them into the foreach loop?

sort() sorts by value, so if the value is the filename, it should align them.

[Sonya*]

6 hours ago, IPCommerceFan said:

Have you tried something like:

{{sort($images); sort($thumbs);}}

Before plugging them into the foreach loop?

sort() sorts by value, so if the value is the filename, it should align them.

Unfortunately, there is no original filename saved in $thumbs. This:

$thumbs = $record->customFieldDisplayByKey('images', 'thumbs');

returns the thumbs' filenames only.

[opentype]

And the files shouldn’t get a new order anyway, which would be inevitable when applying sorting. If I upload pictures representing instructions (for example), it needs to respect the order in which those files were uploaded.