topic Re: How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody. in CMS Development

How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

ShyamVikaas — Thu, 05 Sep 2024 05:02:52 GMT

Hi All,

My sole intention is to create a layout of image , text inside a section which should be editable in Hubspot Website Pages from CLI Boilplate code. Seeking right approach to style this modules of image, text. if Tailwind is applicable to Style this HUBL Dnd_module. Hope I will be Happy to do so

Thanks in Advance

Regards

Shyam Vikaas D

Re: How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

Anton — Thu, 05 Sep 2024 06:38:59 GMT

Hi @ShyamVikaas,

you can create a section template or a custom module for this.

Section templates look something like this:

{% dnd_section, class="first-cssClass second-cssClass" %} {# your section layout goes here #} {% end_dnd_section %}

a custom module layout with an image,(rich-)text option and a "should the image be on the left or on the right" option could look something like this:

<div class="myModule-wrapper"> {% if module.image_position == "left" %} <div class="leftArea image-wrapper"> {% if module.image.src %} <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image-class"> {% endif %} </div> <div class="rightArea text-wrapper"> {{ module.custom_text }} </div> {% else %} <div class="leftArea image-wrapper"> {{ module.custom_text }} </div> <div class="rightArea text-wrapper"> {% if module.image.src %} <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="image-class"> {% endif %} </div> {% endif %} </div>

Here are some more information about sections and modules:

My personal recommendation would be to go with the custom module approach since it will give you more flexibility but it has some drawbacks since modules are considered the smallest possible element for dnd. Therefore they don't support dnd(you can't place other dnd elements inside of them) and you can use them only in columns, sections and rows but not the other way round - unless you recreate the layout and functionality inside the module.

best,

Anton

Re: How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

ShyamVikaas — Thu, 05 Sep 2024 06:47:15 GMT

How to implement the tailwind css to it and what will be the right approach for styling

Re: How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

Anton — Fri, 06 Sep 2024 12:57:55 GMT

Hi @ShyamVikaas,

create a custom module
write your desired HTML layout with the tailwind classes you like to use
add following fields
1. image field
2. text field
3. (rich-)text fiel
to it
add the fields to the layout
save/publish the module
replace the whole dnd-layout in your template with this one module
done

As for styling you have "unlimited" options.

wrapping the whole module code in a div with a class and add your custom styling to an already existing CSS file which is getting loaded
add static CSS to the module.css
add static CSS to the module.html wrapped inside a {% require_css %} function
add styling fields to the module fields and add them inside a {% scope_css %} function in the module.html
Use booleans to toggle between classes
Use choices to switch between classes
...

best,

Anton

Re: How to Create Layout of image , text section on Adjacent sides using Dnd areas blockbody.

ShyamVikaas — Wed, 18 Sep 2024 11:57:59 GMT

where can i get better understanding of custom module approach. i couldnt get resource, sample code for its implementation with tailwind css. could you please me in implementation of custom module in Hubspot