NationBuilder tips - Altering layout based on content length

At mobile size, usually it makes sense to stack an image on top of text, or vice versa, but when you hit a breakpoint where they can shift side by side, it’s useful to know how long the text block is going to be. That way you can decide how the text should align vertically in relation to the image. 

For example, let’s say an image and text block are each 50% of the screen width. In these instances a short block of text it looks best centred vertically in relation to the image.

That’s easy enough using something like flexbox. We just need to apply the following styles to our elements:

.wrapper {
    display:flex;
    align-items:center;
}
img,
.text-block {
    flex-basis:50%;
}

Great in this scenario, but what if we have a much longer block of text? In these instances, the layout is going to look like this:

Messy, ideally for this scenario we’d want to keep the image and the text aligned to the top of the wrapper by removing ‘align-items: center’:

The problem is, in a world of clients and unlimited text areas it’s not possible to know what length of text is going to be entered in any given scenario. For these instances I like to do a character count. That way I can apply a class depending on what length of text we’re dealing with.

Checking the number of characters in our content block

Let’s take the {{page.basic.content}} tag in NationBuilder which outputs the main body of text on a basic page. We can use an IF statement to establish if the content is longer than a certain number of characters and if so, apply a class to the wrapper:

<div class=‘wrapper{% if page.basic.content.size > 500 %} large-content-block{% endif %}’>
    <img src=‘image.jpg’/>
    <div class=‘text-block’>...</div>
</div>

We can then alter the styling accordingly:

.wrapper {
    display:flex;
    align-items:center;
}
img,
.text-block {
    flex-basis:50%;
}
.large-content-block {
    align-items:flex-start;
}

In this scenario if the character count is less than 500 then no class will be applied so the ‘align-items: center’ styling will be applied. If the character count is over 500 then the ‘large-content’block’ class will be applied and the ‘align-items:flex-start’ style will kick in. Both the image and the text block are pushed to the top of the wrapper. 

Removing the text block when there is no content

Finally, I also like to include a further check to see whether there is any content at all. In those scenarios I can remove the text block entirely and potentially change the styling again for these scenarios. 

{% if page.basic.content.size > 0 %}
<div class=‘wrapper{% if page.basic.content.size > 500 %} large-content-block{% endif %}’>
    <img src=‘image.jpg’/>
    <div class=‘text-block’>...</div>
</div>
{% endif %}