Create Drag and Drop on Blog Posts

Marketing & Content Hub Blog, Website & Page Publishing
1

Hi,

I wanted to know how to properly add the drag and drop module in my Blog Posts. Here is what I did but it doesn’t seem to work.

I have added this to the template.

LBernardo86_0-1661317258942.png
LBernardo86_0-1661317258942.png1044×568 177 KB

This is what showed up in the content editor.

LBernardo86_1-1661317313865.jpg
LBernardo86_1-1661317313865.jpg1566×784 244 KB

After dragging and dropping an image and updating the page. My changes disappear. I might be doing something wrong. I appreciate any help on this.

Thanks!!

2

Hi @LBernardo86,

Thanks for reaching out to the Community!

I would like to invite our subject matter experts to this conversation.

Hi @Jnix284, @Anton, @Teun - Do you have any advice on creating a Drag and Drop Module for @LBernardo86?

Thank you!

Best,

Kristen

3

Hi @LBernardo86 ,

Blog posts do not currently support drag and drop functionality. You can see this idea which is currently In Planning for more info.

4

Is there any workaround where I can add an image to my blog post aside from the featured image? I want a different image for different blogs

5

Hi @LBernardo86,

as @Jnix284 has mentioned - currently not possible. The only way how you can achieve a custom design/functionality is … with a custom module.

An expandable and upgradable custom blog post module could look like this

You would need those functions:

  • Repeater group called “rows”
    • choice field called type
      • an option “text”
      • an option “image”
      • add more options if you want more functions
    • a rich-text called “content”
    • an image function called “image”

the identation of this list is how you should group them

The layout/HTML should look like this

{% require_head %} 
{# if you put the CSS part into your main CSS or the module.css you don't need it here #}
<style>
.responsive-img{
max-width:100%;
height:auto; 
}
</style>
{% end_require_head %}

<article>
{{ content.post_body }} {# the default post function; must be included #}

{% for row in module.rows %}
{% if row.type == "text" %}
{{ row.content }}
{% elif row.type == "image" %}
{% if row.image_field.src %}
<img src="{{ row.image_field.src }}" alt="{{ row.image_field.alt }}" loading="lazy" class="responsive-img">
	{% endif %}
{% endfor %}
</article>

When finished - replace the {{content.post_body }} in your blog_post.html with the copied snippet of your custom module.

To add an image in a default post:

You have an image option in your “Blog Content” module (it’s a default rich-text).

My tipp: Don’t apply fixed height/width to an image since it’s going to break out on mobile if bigger than the mobile screen.

best,

Anton