CMS Development

roberttolton_fu
Member

Can an email module/widget know it's width within a row?

Hi,

 

I'm looking at whether it's possible for a module/widget to know the current column width for the row it's used in?

 

Currently I have a choice field within the module for "Full Width" and "Half Width" that I use to set some image max-width/width sizes, but ideally I'd like to be able to know whether the module has been set at whatever 1/12 column grid size to do it automatically.

 

Is this possible?

 

I'd think the syntax might be something like:

{{ widget.parentRow.columnWidth }}
0 Upvotes
1 Reply 1
ChadP
Contributor

Can an email module/widget know it's width within a row?

You can use logic in hubl to set variables based on different things. Here is an example of a custom module I created doing somthing similar.

 

{% if widget.content_formation == 'text_text' %}
    
    {% set area1 = widget.content_field_1 %}
    {% set area2 = widget.content_field_2 %}

{% elif widget.content_formation == 'image_text' %}
    
    {% set area1 = '<img src="{{ widget.content_image.src }}" width="{{ widget.content_image.width }}" alt="{{ widget.content_image.alt }}">' %}
    {% set area2 = widget.content_field_1 %}
    
{% elif widget.content_formation == 'text_image' %}
    
    {% set area1 = widget.content_field_1 %}
    {% set area2 = '<img src="{{ widget.content_image.src }}" width="{{ widget.content_image.width }}" alt="{{ widget.content_image.alt }}">' %}

{% endif %}

{% if widget.columns == '100' %}
    
    {% set column1 = 'span12' %}

{% elif widget.columns == '25_75' %}

    {% set column1 = 'span3' %}
    {% set column2 = 'span9' %}
    
{% elif widget.columns == '75_25' %}

    {% set column1 = 'span9' %}
    {% set column2 = 'span3' %}
    
{% elif widget.columns == '50_50' %}

    {% set column1 = 'span6' %}
    {% set column2 = 'span6' %}
    
{% elif widget.columns == '40_60' %}

    {% set column1 = 'span5' %}
    {% set column2 = 'span7' %}
    
{% elif widget.columns == '60_40' %}

    {% set column1 = 'span7' %}
    {% set column2 = 'span5' %}
    
{% endif %}

{% if area1 %}
    <div class="row-fluid-wrapper {{ widget.width }} standard-content {% if widget.vertically_align_columns %}flex-grid flex-grid__center{% endif %}">
        <div class="row-fluid">
            
            <div class="{{ column1 }} {{ widget.content_formation }}">
                {{ area1 }}
            </div>
            {% if widget.columns == '100' %}
                <!-- Nothing To See Here -->
            {% else %}
            <div class="{{ column2 }} {{ widget.content_formation }}">
                {{ area2 }}
            </div>
            {% endif %}
            
        </div>
    </div>
{% endif %}
0 Upvotes