Blog custom modules - Add fields inside fields

[ezraassj]

Hello,
I’m currently developing an Hubspot blog for one of our client (on their own hubspot account that we created for them and that we are managing as well). However since I don’t have much experience yet on HUBL I wonder if you could help me with the following question.

For the Blog post template, I’m trying to create a custom module that should let the user the choice of blocks styles he wants to use (full text, image left text right, image right text left, quote, etc.)

For that I added a Choice field in my module where the user can select the style of his choice to add on the post. However after making his choice I would like to display additional fields like a rich text editor or an image field but I don’t find any way to do that directly in the choice window.

So basically I would need to add fields in a field. You can see in my screenshots what I mean.

Is it something feasible ?

[Kevin-C]

Hey @ezraassj

You’ll need to do a few things:

1) You’ll need to group your inputs and make them conditional based on the block style choice. This is setup per field when building the module. See image below:

2) In you Hubl / HTML you’ll need an if statement that uses the “choice” to insert the correct markup.

{% if module.choice_field == 'full-text' %}
 <h1>
		Add your html for 'full-text' selection
 </h1>
{% elif module.choice_field == 'img-left' %}
 <h1>
		Add your html for 'img-left' selection
 </h1>
{% endif %}

Grouping the fields will keep them in the same display for the author. This way they’re not jumping around when making changes.

Setting conditionals will allow you to show only the needed fields when authoring.

Hope this helps. If you need anything else just reach out.

[ezraassj]

Hello @Kevin-C

Many thanks for your answer.

In my case I already created extra fields that are conditional like you explained and created those if statements.

However since the user is allowed to add multiple text style blocks (we created 5 different style of blocks/paragraph that are supposed to be used as much as they want in a blog post) like you can see on my first screenshot I wanted to add those extra fields like mentioned in the second screenshot

So when the user picks for example the style “full_text”, I woud like the rich text editor appearing under the “text block style” drodpdown choice (my second screenshot) and not in the previous windows (my first screenshot)

Here is what I have right now

 {% if module.text_block_style == "full_text" %} 
 <div class="articleblock_fulltext">
 <h2 class="title">H2 Lorem ipsum dolor</h2>
 <p class="text">{{ module.full_text }}</p>
 </div>

 {% elif module.text_block_style == "quote" %}
 <div class="block_quote">
 <p class="quote">"{{ module.quote_text }}"</p>
 </div>

 {% elif module.text_block_style == "full_image" %}
 <div class="articleblock_fullimage" style="background-image:url('{{ module.image_full }}');"></div>

 {% elif module.text_block_style == "image_text_left" %}
 <div class="articleblock_image-text">
 <div class="articleblock_image" style="background-image:url('{{ baseURL }}images/picture_articlelist_1179x573.jpg');"></div>
 <div class="articleblock_text">
 <p class="text">P2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
 </div>
 </div>

 {% endif %}

[Kevin-C]

Hey @ezraassj

Ok so you html and HUBL look correct. Then you must have the field group setup like this. See image below:

[ezraassj]

Hey @Kevin-C

Got it thanks
Seems that the main thing to reach what I wanted to have was to create a repeatable field group as you mentionned.

Thanks !

[ezraassj]

Hey @Kevin-C ,

By the way after creating the group field and put it as repeatable I noticed that I can’t copy anymore the fields value from the fields inside the group field which is kind of blocking me to write my Hubl code.

For example my repeatble group field is called paragraph_style and it contains all the other fields like quote_text for example which is a rich text editor field. If I can’t copy the field value it means the rich editor content won’t show up in the HTML right ? What could be a solution ?

[Kevin-C]

Hey @ezraassj

when in a repeatable field they do get locked, but you can still copy the code from the parent group:

{% for item in module.field_group %}
	{% if item.boolean_field %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% inline_text field="text_field" value="{{ item.text_field }}" %}
{% endfor %}