CMS Development

fazzio349
Contributor

Can I input modules within tabs?

SOLVE

Hello! I have this template I'd like to use for a research index page. http://310creative-4130406.hs-sites.com/agency_tabs

 

What I'm trying to do is basically create 2 web pages but keep them as one. One tab will have background information about our research and the study/survey conducted, and another tab will have graphs and analysis of the actual data. I'm actually curious if at all possible you can insert modules within each tab? I'm assuming it's not possible to drag and drop modules into each tab like you could a flexible column, which is fine, but I'm curious if there's a way to add modules into the template or the module itself (a module inside a module).

 

For example, the overview page is 8 different sections. Side by side text/imagery, 4 column text with icons on top, an accordian menu with links to the full research documents. The analysis tab is composed of several line charts, pie charts, and text analysis. To some extent, I know this can be accomplished with tables, but having the ability to edit modules instead is a lot more convenient and easy for those who may not fully understand html to edit the tables as necessary.

 

Below is a screenshot of a section of code in the module. I feel like maybe there's a way to insert some kind of code under each tab id to have a module show up? I just don't know how that might be done. Any help would be appreciated.

 

Screen Shot 2020-05-17 at 11.15.03 AM.png

 

 

0 Upvotes
1 Accepted solution
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Can I input modules within tabs?

SOLVE

Hey @fazzio349 ,

 

So the 'module' prperty is disabled in module content:

Screeenshot - 2020-05-18 at 6.30.47 PM.png

You'll get this error when pasting modules into modules.

 

But you could do something like:

Screeenshot - 2020-05-18 at 6.51.00 PM.png

 

  • The diagram above shows 3 tabs. (These could be repeatable too)
  • Inside each tab is a repeatable field. This allows you to modify the order of your content.
  • Each repeatable field contains 3 conditional fields. Think of these as you modules inside other modules. Rather than the author selecting any module they want they have to select from a list of available options that you as the developer approve and create.

 

Below I've put together a little pseudo code and the author inouts in the image below:

<tab-one>
	{% for item in module.module_choice %}
	{% if item.use_a_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.use_b_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.use_c_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% inline_text field="a_mod.a_title" value="{{ item.a_mod.a_title }}" %}
	{% inline_rich_text field="a_mod.a_about" value="{{ item.a_mod.a_about }}" %}
	{% if item.b_mod.b_online_now %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.b_mod.b_image.src %}
		{% set sizeAttrs = 'width="{{ item.b_mod.b_image.width }}" height="{{ item.b_mod.b_image.height }}"' %}
		{% if item.b_mod.b_image.size_type == 'auto' %}
			{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
		{% elif item.b_mod.b_image.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.b_mod.b_image.max_width }}px; max-height: {{ item.b_mod.b_image.max_height }}px"' %}
		{% endif %}
		<img src="{{ item.b_mod.b_image.src }}" alt="{{ item.b_mod.b_image.alt }}" {{ sizeAttrs }}>
	{% endif %}
	{{ item.c_mod.c_choice }}
{% endfor %}
</tab-one>

 Screeenshot - 2020-05-18 at 6.58.53 PM.png

 

Let me know if this make sense.

View solution in original post

0 Upvotes
4 Replies 4
Kevin-C
Solution
Recognized Expert | Partner
Recognized Expert | Partner

Can I input modules within tabs?

SOLVE

Hey @fazzio349 ,

 

So the 'module' prperty is disabled in module content:

Screeenshot - 2020-05-18 at 6.30.47 PM.png

You'll get this error when pasting modules into modules.

 

But you could do something like:

Screeenshot - 2020-05-18 at 6.51.00 PM.png

 

  • The diagram above shows 3 tabs. (These could be repeatable too)
  • Inside each tab is a repeatable field. This allows you to modify the order of your content.
  • Each repeatable field contains 3 conditional fields. Think of these as you modules inside other modules. Rather than the author selecting any module they want they have to select from a list of available options that you as the developer approve and create.

 

Below I've put together a little pseudo code and the author inouts in the image below:

<tab-one>
	{% for item in module.module_choice %}
	{% if item.use_a_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.use_b_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.use_c_mod %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% inline_text field="a_mod.a_title" value="{{ item.a_mod.a_title }}" %}
	{% inline_rich_text field="a_mod.a_about" value="{{ item.a_mod.a_about }}" %}
	{% if item.b_mod.b_online_now %}
		<!-- HTML to show when checked -->
	{% endif %}
	{% if item.b_mod.b_image.src %}
		{% set sizeAttrs = 'width="{{ item.b_mod.b_image.width }}" height="{{ item.b_mod.b_image.height }}"' %}
		{% if item.b_mod.b_image.size_type == 'auto' %}
			{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
		{% elif item.b_mod.b_image.size_type == 'auto_custom_max' %}
			{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.b_mod.b_image.max_width }}px; max-height: {{ item.b_mod.b_image.max_height }}px"' %}
		{% endif %}
		<img src="{{ item.b_mod.b_image.src }}" alt="{{ item.b_mod.b_image.alt }}" {{ sizeAttrs }}>
	{% endif %}
	{{ item.c_mod.c_choice }}
{% endfor %}
</tab-one>

 Screeenshot - 2020-05-18 at 6.58.53 PM.png

 

Let me know if this make sense.

0 Upvotes
fazzio349
Contributor

Can I input modules within tabs?

SOLVE

Thanks for your explination! I did get an error when I simply tried to copy and paste the Usage Snippet into the code. Is this something set by the developer or something Hubspot does?

 

Just to confirm (I'm in Marketing - Dev knowledge is a little lacking), it sounds like I would be unable to add an already created module (like an accordian menu) but I could add in options for text boxes, images, etc.? I'm unsure what I should be editing in your snippet (I fear this may be a little beyond my capabilities). The best example of what I'm trying to replicate is this screenshot. The "Research and Analysis" text section below the tab would be a module I already have created that allows me to set the background color, insert the image, update text, button, etc. Below that I might add an accordian menu, with each fly out containing text and links to research documents.Screen Shot 2020-05-19 at 10.43.15 AM.png

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Can I input modules within tabs?

SOLVE

Hey @fazzio349 

 

The pseudo code I provided won't work without a solid amount of a developers time. Its basically a framework of the hubl markup and logic that could potentially be used to handle your case.

 

Your are correct in everything you'vementioned minu the "a module I already have created ".

With this solution you'd be building in "sub-modules" or sections of the parent module that show or hide depending on the selections made by the author.

 

If you need more assistance we can get on a call and talk about your options. If thats something you would like to do feel free to DM me!

0 Upvotes
fazzio349
Contributor

Can I input modules within tabs?

SOLVE

Thanks for clarifying. I think I may have been a little too ambitious with this one haha. It would have been nice to have, but if it's not something I can figure out myself and would require the assistance of many hours with a developer, it may not be a reasonable option for us.

0 Upvotes