ACF - display multiple repeater images

Question

My ultimate goal is to create an image gallery that links to an external website on a click. This needs to be done via advanced custom fields, so I made a repeater with the image and link on the same line:

link1 | cover_image1 
link2 | cover_image2

Now I am inserting this code into a text editor within the web page. I also imported some shortcodes from here which allow me to use %ROW% as an iterator.

"attachments" is the parent forwarder, "link" and "cover_image" are child forwarders.

[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 is presented as follows:

The corrupted image contains the following code:

<img src="[acf" field="attachments_0_cover_image" &#093;="" width="300" height="214">

I think the [acf field ='attachments_%ROW%_cover_image'] in <img> is not fully parsed to the url, since both external url = and image url = render the correct url.

Wordpress also converts my code to this after saving, so maybe it's 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 correctly convert [acf field ='attachments_%ROW%_cover_image'] to a url in <img>, I could use some help on the correct syntax. Thank you for your help!

html for each Arian attribute:

<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: <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*">https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*</a></p>
<p>Video Links: <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/cute-cat-photos-1593441022.jpg?crop=0.669xw:1.00xh;0.166xw,0&amp;resize=640:*"></a></p>
<p>Thumbnails: <a href=""></a></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" &#093;=""><br>
<img src="[acf" field="attachments_0_cover_image" &#093;="" 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" &#093;=""><br>
<img src="[acf" field="attachments_1_cover_image" &#093;="" 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" &#093;=""><br>
<img src="[acf" field="attachments_2_cover_image" &#093;="" width="300" height="214"><br>
</a></p>
<p><br></p>
</div>
    </div>
</div>

Answer 1

Not a WordPress guy, but it seems WordPress prevents shortcodes from being expanded/executed using parameters in html attributes, if you can put the php code in there, maybe this could be a workaround:

Actually I found a comment about this:

athere

So this might also work:

Or without shortcode quotes:

The last option I can think of is to create a parameterless shortcode 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 use it in the editor, for example: