# Create Drag and Drop on Blog Posts

**URL:** <https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609>\
**Category:** Blog, Website & Page Publishing\
**Created:** [August 24, 2022, 5:04am UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609 "2022-08-24T05:04:09Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LBernardo86](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@LBernardo86](https://community.hubspot.com/u/LBernardo86)\
**Post date:** [August 24, 2022, 5:04am UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609/1 "2022-08-24T05:04:09Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/d/7df48fef01ef8b30a35ad31d0c8c7049518e839b.png)

This is what showed up in the content editor.

 ![LBernardo86_1-1661317313865.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/1/410872b68dbf644d4014e61b2ee7126b21e49122.jpeg)

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!!

---

<div class="post-metadata">

**Author:** ![kvlschaefer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvlschaefer/32/71076_2.png) [@kvlschaefer](https://community.hubspot.com/u/kvlschaefer)\
**Post date:** [August 24, 2022, 6:21pm UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609/2 "2022-08-24T18:21:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [August 24, 2022, 6:24pm UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609/3 "2022-08-24T18:24:35Z")

</div>

Hi @LBernardo86 ,

Blog posts do not currently support drag and drop functionality. You can [see this idea](https://community.hubspot.com/t5/HubSpot-Ideas/Drag-amp-Drop-functionality-for-Blog-Posts/idi-p/408909) which is currently In Planning for more info.

---

<div class="post-metadata">

**Author:** ![LBernardo86](https://avatars.discourse-cdn.com/v4/letter/l/5e9695/32.png) [@LBernardo86](https://community.hubspot.com/u/LBernardo86)\
**Post date:** [August 25, 2022, 7:13am UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609/4 "2022-08-25T07:13:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 25, 2022, 8:14am UTC](https://community.hubspot.com/t/create-drag-and-drop-on-blog-posts/63609/5 "2022-08-25T08:14:52Z")

</div>

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

```lia-code-sample
{% 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