Insert content upgrade module in middle of blog post

Developer Support CMS Development
1

I’m hoping to develop a content upgrade module (see the example in the image below) that my marketing team would then be able to add to any post where they see fit.

I would have thought that there’d be a way to Insert > Module via the WYSIWIG, but I don’t see any way to do this.

Am I going about this the wrong way? I don’t want the module to go after the post, I want the writers to be able to inject it anywhere they’d like.

38757iD01EB6F5E70BEB0E.jpg
38757iD01EB6F5E70BEB0E.jpg999×837 153 KB

2

Hi @BRhea,

unfortunately it’s currently not possible to “drag&drop” modules into the blog template.

You can either code a complete custom body-post module with some repeaters or create what seems to be a “CTA-section” module and place it in a specific place. Most likely below the

{{ content.post_body }}

part.

Also I recommend a toggle(boolean) to show/hide the whole module. Doing so gives your marketing team the ability to show/hide the whole module per post.

it could look like this:

{% if module.show_cta_section %}
...
put the whole module code here
...
{% endif %}

For the repeater part:

Since high-demand I’m developing a complete custom blog-post module for some clients.

It’s looking something like this:

{{ content.post_body }} {# has to be included #}

{% for item in module.section %}
{% if item.section_type == 'image' %}
{% if item.image_field.src %}
<div class="custom-blog-image">
		{% set sizeAttrs = 'width="{{ item.image_field.width }}" height="{{ item.image_field.height }}"' %}
		{% if item.image_field.size_type == 'auto' %}
		{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
		{% elif item.image_field.size_type == 'auto_custom_max' %}

		{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.image_field.max_width }}px; max-height: {{ item.image_field.max_height }}px"' %}
		{% endif %}
		{% set loadingAttr = item.image_field.loading != 'disabled' ? 'loading="{{ item.image_field.loading }}"' : '' %}
		<img src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
</div>

{% elif item.section_type == 'text' %}
<div class="custom-blog-text">
		{{ item.text }}
</div>
{% endif %}
{% endif %}
{% endfor %}

Just set some needed fields in a select-option and go with (el)if. Tipp: Group the settings properly and take your time with “display options” so that the marketing team won’t be overloaded with a ton of unneeded options at a time. Like If they want to insert an image they don’t need the CTA-section settings…

hope this helps,

best,

Anton