How to place assets in plain text fields?

Question

In ExpressionEngine i had a matrix field for images (assets) that i used in my entries.

I was using NSM Transplant and in my entries i could use {bild-1}, {bild-2} and so on wherever i wanted a image in my content.

The code is:

{produkte_ma_text_bilder}

  {exp:nsm_transplant:content id="bild-{row_count}"}

    <a href="{produkte_ma_text_bild}" class="{if produkte_ma_text_bild_float=="left"}float-left {if:elseif produkte_ma_text_bild_float=="right"}float-right {if:elseif produkte_ma_text_bild_float=="center"}center {if:else}{/if}proimg-link" data-shadowbox="shadowbox[{entry_id}]" title="{title}">{exp:ce_img:make src="{produkte_ma_text_bild}" max_height="{produkte_ma_text_bild_height}"}<img class="proimg" src="{made}" alt="{title}" title="{title}" width="{width}" height="{height}" />{/exp:ce_img:make}</a>

  {/exp:nsm_transplant:content}

{/produkte_ma_text_bilder}

The matrix field looks like this:

When creating an entry it looks like this:

It seems like in Craft you need Super Table to do this.
But i can't figure out the code.

The solution is:

{% set mainText = entry.mainText %}

{% for row in entry.textImages.all() %}
    {% set findImage = '%%image' ~ loop.index ~ '%%' %}

    {% set replaceImage %}
        <img src="{{ row.textImage.one().getUrl() }}" />
    {% endset %}

    {% set mainText = mainText | replace(findImage, replaceImage) %}

{% endfor %}

{{ mainText | raw }}

Thanks to Andrew Welch from https://nystudio107.com/

Answer 1

Matrix fields in Craft are much more powerful than EE. In EE each Matrix row has a single set of fields available to it (a limitation of using a table-based UI). But in Craft you can set up multiple “block types” for a single Matrix field, each with a different set of fields.

So you can manage your text and assets all with a single Matrix field, with Text and Image block types. When an author wants to “insert” an image in the text, they can just click the button to create a new Image block; then continue writing more text by clicking the button to create a new Text block.

In your templates, you loop through each of the blocks, and output different HTML depending on the block type:

{# Load the blocks, eager-loaded with their image assets #}
{% set blocks = entry.yourMatrixFieldHandle
    .with(['yourAssetsFieldHandle'])
    .all() %}

{# Loop through them all #}
{% for block in blocks %}

    {# Alter the HTML output depending on their block type #}
    {% switch block.type.handle %}

        {% case 'text' %}

            {{ block.yourTextFieldHandle }}

        {% case 'image' %}

            {# Make sure that an asset is actually selected #}
            {% if block.yourAssetsFieldHandle|length %}

                {% set image = block.yourAssetsFieldHandle[0] %}

                {# Set the positioning class #}
                {% switch block.yourFloatFieldHandle %}
                    {% case 'left' %}
                        {% set class = 'float-left' %}
                    {% case 'right' %}
                        {% set class = 'float-right' %}
                    {% case 'center' %}
                        {% set class = 'center' %}
                    {% default %}
                        {% set class = '' %}
                {% endswitch %}

                {# Get the transformed image URL based on the chosen width and height #}
                {% set imgUrl = image.getUrl({
                    width: block.yourWidthFieldHandle,
                    height: block.yourHeightFieldHandle
                }) %}

                <a href="{{ image.url }}" class="{{ class }} proimg-link" data-shadowbox="shadowbox[{{ entry.id }}]" title="{{ entry.title }}">
                    <img src="{{ imgUrl }}" alt="{{ entry.title }}" title="{{ entry.title }}"
                            width="{{ block.yourWidthFieldHandle }}"
                            height="{{ block.yourHeightFieldHandle }}">
                </a>

            {% endif %}

    {% endswitch %}

{% endfor %}

Replace all the your____FieldHandle references with your actual field handles.

You also may wish to store image alt text either on the block or image, rather than just using the entry title. In that case replace the entry.title references with block.yourTitleFieldHandle or image.yourTitleFieldHandle.

(To create a custom field on your images themselves, create a new Text field in Settings → Fields called “Alt Text”, and then go to Settings → Assets → [your volume name], and add the Alt Text field to the volume’s field layout. You will then be able to access the field by double-clicking on your assets, either from the main Assets page or from within your Matrix field after you’ve selected an image.)