HubSpot Ideas

CH_Engineer

Restrict supported modules available to Flexible Column

Is there a parameter that will whitelist or blacklist certain modules for the Flexible Column? Setting which modules can be used in a column would be excellent.

 

Flexible Columns could be a very useful if that were the case, but having to sort through every available primitive, global module, and custom module every time is not ideal. Am I missing something?

7 Commentaires
stefen
Conseiller clé | Partenaire solutions

@CH_Engineer I agreed, this would be a nice feature to have. Maybe this should be moved to the Ideas board.

ndwilliams3
Conseiller clé

@CH_Engineer, I like that idea as well. Sometimes, you want to give your team more control over the layout, but seeing and potentially adding a custom module designed for another template can have a negative impact on the design. Being able to apply restrictions for a flex column would be great!

Statut mis à jour : Idea Submitted
roisinkirby
Équipe de développement de HubSpot
 
arinker
Contributeur de premier rang | Partenaire solutions

There is definitely a need for restrictions in flexible columns. Especially if you use the flexible column as a wrapper for masonry items, accordion items or panel items, it is a must to restrict the usage of modules to the particular custom modules. Otherwise content editors will mess it up faster then you would expect it. Here is an example:

 

1. Flexible column  (Custom Wrapping HTML)

<div class="grid">
    <div class="grid-sizer"></div>
    {{ html }}
</div>

2. Custom module 

<div 
{% if widget.background_type == 'image' %}
class="grid-item grid-item-image {{ widget.item_height }}" 
style="background: url('{{ widget.background_image.src }}') no-repeat center center;" 
title="{{ widget.background_image.alt }}"
{% endif %}
{% if widget.background_type == 'color' %}
class="grid-item grid-item-color {{ widget.item_height }}" 
style="background: {{ widget.background_color }};"
{% endif %}
>
    <span class="grid-item-content {{ widget.content_horizontal_alignment }} {{ widget.content_vertical_alignment }}">
        {% if widget.icon_show and widget.icon_position == 'before' %}<i class="{{ widget.icon_library }} {{ widget.icon }}" style="font-size: {{ widget.icon_size }}; color: {{ widget.content_color }};"></i>{% endif %}
        <div style="color: {{ widget.content_color }};">
            {{ widget.content }}
        </div>
        {% if widget.icon_show and widget.icon_position == 'after' %}<i class="{{ widget.icon_library }} {{ widget.icon }}" style="font-size: {{ widget.icon_size }}; color: {{ widget.content_color }};"></i>{% endif %}
    </span>
</div>

3. Javascript

<script src="https://cdn2.hubspot.net/hubfs/2702450/Omniflow/assets/js/masonry.pkgd.min.js"></script>
<script>
$(".grid-item").unwrap().unwrap().unwrap(); $(document).ready(function(){ $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true }); setItemHeight(); }); </script>

4. Result

 

Module StructureModule Structure

ResultResult

 

Statut mis à jour : In Planning
kleonard
Équipe de développement de HubSpot
 
arinker
Contributeur de premier rang | Partenaire solutions

Hi!

That's pretty cool. When you touch this, please add the possibility to label instances of custom modules individually.

Otherwise it's really hard to keep it manageable.

 

Without individual labels organizing, editing and sorting custom modules becomes a nightmare as soon as you have more than three custom modules in a flexible column or group.

 

Without individual LabelsWithout individual LabelsWith individual labelsWith individual labels  

Best,

 

Arno

derekcavaliero
Contributeur de premier rang | Partenaire solutions Diamond

@kleonard any update on when we might be able to expect something like this?

 

As everyone else has mentioned, this is very important for COS/CMS design integrity 😄