<p><a href="https://craftcms.com/features/all#matrix" rel="nofollow noreferrer">Matrix fields</a> 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.</p>

<p>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.</p>

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

<pre class="lang-html prettyprint-override"><code>{# 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
                }) %}

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

            {% endif %}

    {% endswitch %}

{% endfor %}
</code></pre>

<p>Replace all the <code>your____FieldHandle</code> references with your actual field handles.</p>

<p>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 <code>entry.title</code> references with <code>block.yourTitleFieldHandle</code> or <code>image.yourTitleFieldHandle</code>.</p>

<p>(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.)</p>

CC BY-SA 4.0
2019-08-03T02:20:57.503Z
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
CC BY-SA 4.0
2019-08-03T02:22:32.183Z
Make sure you are editing the correct template file, as specified by the Template setting in your section’s settings.
Brandon Kelly
CC BY-SA 4.0
2019-08-03T02:44:17.413Z
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
CC BY-SA 4.0
2019-08-03T02:46:08.470Z
The template example above already demonstrates this – there’s an `<a>` tag wrapping the `<img>`.
Brandon Kelly
CC BY-SA 4.0
2019-08-03T02:50:41.153Z
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
CC BY-SA 4.0
2019-08-03T04:15:37.910Z
I fond this and it seems close to what i want to do: https://craftcms.stackexchange.com/questions/12847/replace-placeholder-string-in-text-field-with-html-generated-by-asset-query
MrGlasspoole
CC BY-SA 4.0
2019-08-03T16:54:56.877Z
Yeah I suppose if you really want to take the same approach you’ve used in EE, you could go that route. Not a great authoring experience though.
Brandon Kelly
CC BY-SA 4.0
2019-08-02T16:52:11.163Z
2019-08-02T16:52:11.163Z
Brandon Kelly
<p>In ExpressionEngine i had a matrix field for images (assets) that i used in my entries.</p>

<p>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.</p>

<p>The code is:</p>

<pre><code>{produkte_ma_text_bilder}

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

    &lt;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}"&gt;{exp:ce_img:make src="{produkte_ma_text_bild}" max_height="{produkte_ma_text_bild_height}"}&lt;img class="proimg" src="{made}" alt="{title}" title="{title}" width="{width}" height="{height}" /&gt;{/exp:ce_img:make}&lt;/a&gt;

  {/exp:nsm_transplant:content}

{/produkte_ma_text_bilder}
</code></pre>

<p>The matrix field looks like this:
<a href="https://i.sstatic.net/xf5xk.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/xf5xk.jpg" alt="enter image description here"></a></p>

<p>When creating an entry it looks like this:
<a href="https://i.sstatic.net/8XF53.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8XF53.jpg" alt="enter image description here"></a></p>

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

<p><strong>The solution is:</strong>  </p>

<pre><code>{% set mainText = entry.mainText %}

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

    {% set replaceImage %}
        &lt;img src="{{ row.textImage.one().getUrl() }}" /&gt;
    {% endset %}

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

{% endfor %}

{{ mainText | raw }}
</code></pre>

<p>Thanks to Andrew Welch from <a href="https://nystudio107.com/" rel="nofollow noreferrer">https://nystudio107.com/</a></p>

<assets><plugin-supertable>
How to place assets in plain text fields?
# How to place assets in plain text fields?

(Asked by: username_0 on 2019-07-15)

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}"}

    {exp:ce_img:make src="{produkte_ma_text_bild}" max_height="{produkte_ma_text_bild_height}"}{/exp:ce_img:make}

  {/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 %}
        
    {% endset %}

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

{% endfor %}

{{ mainText | raw }}

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

**Tags:** assets, plugin-supertable


---

## 1 answers

### Answer by username_1 on 2019-08-02. Score: 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
                }) %}

                
                    
                

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

> **Comments:**
> **username_0**: 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".  
> **username_1**: Make sure you are editing the correct template file, as specified by the Template setting in your section’s settings.  
> **username_0**: 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?  
> **username_1**: The template example above already demonstrates this – there’s an `<a>` tag wrapping the `<img>`.  
> **username_0**: 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.  
> **username_0**: I fond this and it seems close to what i want to do: https://craftcms.stackexchange.com/questions/12847/replace-placeholder-string-in-text-field-with-html-generated-by-asset-query  
> **username_1**: Yeah I suppose if you really want to take the same approach you’ve used in EE, you could go that route. Not a great authoring experience though.  

---

