Replace placeholder string in text field with HTML generated by Asset query

Question

I have a Matrix block with a text field and an Assets field. The text field has a Markdown filter applied to it.

I'd like the content owner to be able to enter a placeholder reference to one of the images uploaded to the sibling Assets field.

For example, when the template processes…

This is a **paragraph**.

%%img2%%

This is some more text.

…then %%img2%% (or some such syntax that won't conflict with Markdown) gets replaced with the HTML generated for the second image by the relevant Assets query running in the template.

I've done things like this before with MXjumper and ExpressionEngine but am pretty new to Craft and not sure how to go about it.

I figure I need to:

1. Set a dynamically named variable (because I don't know in advance how many images are in the image field)
2. Use replace on the text field, but the replace statement should incorporate dynamically named search strings and the replacements would be the variables named at step 1 not strings.

Really not sure how to execute either of these 2 steps in Twig.

Would something like the following work for step1?

{% for img in sectionImages %}
    {% set n %}{{ loop.index }}{% endset %}
    {% set img ~ n %}
    <figure>
        <img src="{{ img.url }}" alt="{{ img }}">
        {% if img.caption|length %}
        <figcaption>
            <span{{ img.caption }}</span>
        </figcaption>
        {% endif %}
    </figure>
    {% endset %}
{% endfor %}

And what then for step 2…

{{ block.sectionText|markdown|replace('%%img' ~ n ~ '%%': img ~ n) }}

My step 1 code feels like it's close but I suspect it's not right. And in any case I feel sure my step 2 code is further off from what's needed.

I think maybe I need to be storing img as key|value pairs in an array and working with that somehow.

Any pointers much appreciated.

Answer 1

Well this feels like an awful kludge but at least I have it working with a finite number of image variables in the code below.

There has to be a more elegant and flexible way to do this. And Natetronn, if your proposal does just that, perhaps you could help me see how. Otherwise, other cleverer folks, do let me know.

{% for subsection in entry.subsections %}

    {# Set variables for up to 4 images per subsection #}
    {% set n  = 0 %}
    {% set imageN = '' %}
    {% set image1 = '' %}
    {% set image2 = '' %}
    {% set image3 = '' %}
    {% set image4 = '' %}

    {% set sectionImgs = subsection.sectionImages %}

    {% for img in sectionImgs %}
        {% set n = loop.index %}

        {% set imageN %}
        <figure>
            <img src="{{ img.url }}" alt="{{ img }} {{ n }}">
            {% if img.caption|length %}
            <figcaption>
                <span{{ img.caption }}</span>
            </figcaption>
            {% endif %}
        </figure>
        {% endset %}

        {# assign imageN to a specific variable #}
        {% switch n %}
            {% case 1 %} {% set image1 = imageN %}
            {% case 2 %} {% set image2 = imageN %}
            {% case 3 %} {% set image3 = imageN %}
            {% case 4 %} {% set image4 = imageN %}
        {% endswitch %}
    {% endfor %}

    {{ subsection.sectionText|markdown|replace({
        '%%image1%%': image1, 
        '%%image2%%': image2, 
        '%%image3%%': image3, 
        '%%image4%%': image4
    })|raw }}

{% endfor %}{# /subsection #}

Answer 2

I'd suggest a better approach as detailed here: https://experiencehq.net/blog/craft-with-markdown-and-matrix Once you go down the "structured content" route you'll never look back, I promise you :)

Answer 3

This is partially side stepping your question but, it could be a solid option just the same:

You might consider checking out Selvin's Doxter Markdown plugin. It has support for Entries, Assets, Users, Tags, Globals and Categories.

This all via reference codes which can be copied and pasted into the Markdown as needed.