1

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: enter image description here

When creating an entry it looks like this: enter image description here

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/

2

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.)

  • i made a matrix field "entryContent" and get the Twig error "Variable "entry" does not exist". It's a structure entry in section blog called "test" and a template called "test". – MrGlasspoole Aug 3 at 2:20
  • Make sure you are editing the correct template file, as specified by the Template setting in your section’s settings. – Brandon Kelly Aug 3 at 2:22
  • OK that part works. But what if i want to put something around the image (div, link)? I have to write one half into the text block before the image and the other half in the one after it? – MrGlasspoole Aug 3 at 2:44
  • 1
    The template example above already demonstrates this – there’s an <a> tag wrapping the <img>. – Brandon Kelly Aug 3 at 2:46
  • yes but that means i have to make different templates and fields for switching. With my EE example i was able to just output a "img src" and do whatever i want with it. – MrGlasspoole Aug 3 at 2:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.