CMS Development

NPeters
Contributor

Setting default section maximum content width for auto generated sections in DnD templates!!

TL;DR

To ensure content editors create consistent layouts in pages. How can I set my theme to use a default maxiumum width/padding for auto generated section when modules are dropped into a DnD template? 

 

The issue

I have setup a new theme which uses DnD page. We now have content editors populating the pages and have expressed that it is very fiddly to try and set the content width for the sections.

 

When they drag a module into the page, the section that is automatically generated reset to 0 for all values.

 

As the developer I have been asked to go back in and make the DnD sections consistent for them. Not sustainable for me as we are onboarding 6 new team members who will also be responsible for managing pages. So I can already see the nicely formatted pages I have set up loosing consistency. So I need a solution.

 

What I have done so far

1. Setting the dnd_section in the template

I have page template which contains:

 

 

<main id="main-content" class="body-container-wrapper">
  {# Ensure pages with DND have a H1 tag #}
	
  {% dnd_area 'dnd_area' class='body-container body-container--home', label='Main section' %}
	{% dnd_section 
	  vertical_alignment='TOP'
	  max_width=1180,
	  padding={
		  'top': '30px',
		  'bottom': '30px',
		  'left': '20px',
		  'right': '20px'
	  },
	%}
		{% dnd_column %}
		<!-- Inside is where the modules will sit -->
		{% end_dnd_column %}
	{% end_dnd_section %}
  {% end_dnd_area %}
</main>

 

 

My understanding is, when a new page is created a DND space will be created where modules can be DnDed.

 

This works:

Screenshot 2021-06-10 at 19.41.54.png

 

Editor drops in module. Perfect width. Happy Days!

 

The issue comes when a Editor drops in a second module from the side. The new section does not retain the default settings I have set in the template file.

 

Screenshot 2021-06-10 at 19.48.09.png

This does not work.

 

2. Setting the maximum spacing in the theme.json file

TBH I was just grasping at straws, I saw in the Theme boilerplate there is a Spacing option:

https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/fields.json#L565

 

There is ZERO mention of this in the documentation on what this setting affects or, how you can take advantage of this!

 

Adding this to my theme settings has no apparent effect nor the desired outcome.

 

3. Creating a "Section" module

In an attempt to try and enforce some layout rules. But alas you cannot nest a module inside of a module!

 

Would be very grateful on what can be done to enforce consistency in my templates within auto generated DnD sections.

 

Thanks

1 Reply 1
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Setting default section maximum content width for auto generated sections in DnD templates!!

Hi @NPeters ,

Please use full_width=true in dnd_section and use padding like padding={
'default': { 'top': 0,'right': 0, 'bottom': 0, 'left': 0 },
'mobile': { 'top': 0,'right': 0, 'bottom': 0, 'left': 0 }
}


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.