ACF - Display Multiple Repeater Images - php

Question

My end goal is to create a gallery of Images that when clicked link to an external website. This needs to be done through Advanced Custom Fields, so I made a repeater that has the image and link in the same row:
link1 | cover_image1
link2 | cover_image2
Right now I'm inserting this code into a text editor inside my webpage. I also imported some short-code from here, that allows me to use %ROW% as an iterator.
"attachments" is the parent repeater and "link" and "cover_image" are the children.
[acf_repeater field="attachments"]
external url = [acf field ='attachments_%ROW%_link']
image url = [acf field ='attachments_%ROW%_cover_image']
<a href =[acf field ='attachments_%ROW%_link'] >
<img src = [acf field ='attachments_%ROW%_cover_image'] width="300" height="214" />
</a>
[/acf_repeater]
The webpage renders this:
Where the broken image contains this code:
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214">
I think [acf field ='attachments_%ROW%_cover_image'] in <img> isn't resolving all the way to the url, as external url = and image url = both render the correct urls.
Wordpress also converts my code to this after saving, so its probably a syntax error?
[acf_repeater field="attachments"]
external url = [acf field = attachments_%ROW%_link]
image url = [acf field = attachments_%ROW%_cover_image]
<a href="[acf">
<img src="[acf" width="300" height="214" />
</a>
[/acf_repeater]
I'm not sure how to properly convert [acf field ='attachments_%ROW%_cover_image'] to a url in the <img> and I could use some help on the proper syntax. Thank you so much for you help!
html for the attribute per Arian:
<div class="fl-module fl-module-rich-text fl-node-5d4926759d7aa"
data-node="5d4926759d7aa">
<div class="fl-module-content fl-node-content">
<div class="fl-rich-text">
<p>Agenda: https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&resize=640:*</p>
<p>Video Links: </p>
<p>Thumbnails: </p>
<p></p>
<p>external url = https://www.youtube.com/watch?v=uHKfrz65KSU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_1.png</p>
<p><a href="[acf" field="attachments_0_link" ]=""><br>
<img src="[acf" field="attachments_0_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=X2lIovmNsUY<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_2-1.png</p>
<p><a href="[acf" field="attachments_1_link" ]=""><br>
<img src="[acf" field="attachments_1_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
<p>external url = https://www.youtube.com/watch?v=hDJkFLnmFHU<br>
image url = http://wordpress.local/wp-content/uploads/Thumbnail_3-1.png</p>
<p><a href="[acf" field="attachments_2_link" ]=""><br>
<img src="[acf" field="attachments_2_cover_image" ]="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
</div>
</div>

Answer 1

Not a wordpress guy, but seems like wordpress prevents expanding/executing shortcodes with parameters within html attributes, maybe this could work as workaround if you can put php code there:
<?php
$link = do_shortcode("[acf field ='attachments_%ROW%_link']");
$cover_img = do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
?>
<a href="<?= $link ?>">
<img src="<?= $cover_img ?>" width="300" height="214" />
</a>
Actually i found comment on this:
It appears it's using the same quotes for the HTML attribute and the shortcode's attributes that create problems.
at here
so this may work too:
<a href="[acf field ='attachments_%ROW%_link']">
<img src="[acf field ='attachments_%ROW%_cover_image']" width="300" height="214" />
</a>
or without shortcode quotes:
<a href="[acf field=attachments_%ROW%_link]">
<img src="[acf field=attachments_%ROW%_cover_image]" width="300" height="214" />
</a>
last option i can think of is creating parameter-less shortcodes like this:
function acflink_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_link']");
}
add_shortcode('acflink', 'acflink_shortcode');
function acfimage_shortcode() {
return do_shortcode("[acf field ='attachments_%ROW%_cover_image']");
}
add_shortcode('acfimage', 'acfimage_shortcode');
then using in editor like:
<a href="[acflink]">
<img src="[acfimage]" width="300" height="214" />
</a>