Interspersed images and text

Question

I have a matrix in my channel fields. and a Wygwam for text. I want in the end for the content creators to be able to load images to be interspersed with the text and then as they write the text specify where said images will go.

I figure the best way to do this is to have them add a little snippet of code where they want the image to appear. But I don't really even know where to begin to build this.

Thanks

Answer 1

Blocks is perfectly suited for this.

You can intersperse the content and the images right in the content field.

<div class="content">
{page_content}

    {simple_content}
        {content}
    {/simple_content}

    {captioned_image}
    <figure>
        <img src="{image}">
        <figcaption>{caption}</figcaption>
    </figure>
    {/captioned_image}

{/page_content}
</div>

Could output HTML like

<div class="content">
   <p>Here's some content. It comes from Wygwam or another content field.</p>
   <p>This is from the same one.</p>
   <figure>
     <img src="/image.png">
     <figcaption>This is an interspersed image.</figcaption>
   </figure>
   <p>More content.</p>
   <figure>
     <img src="/image2.png">
     <figcaption>Another interspersed image.</figcaption>
   </figure>
   <p>More content.</p>
</div>

Unfortunately, if all of your Matrix fields are already populated, there isn't an easy way to migrate.