Removing multiple code sections using a variable
Today we are gonna look at a special scenario.
If the user does not upload an image, we want to remove the red and blue squares on both sides.
The code looks somewhat like this
1
<table width="100%" cellspacing="0" cellpadding="0" border="0">
2
<tr>
3
<!-- LEFT SIDE WITH IMAGE -->
4
<td style="width:50%;>
5
<img alt="" src="{{ design.global_settings.header_image.url }}" style="style="width:310px; display: block; border: 0; height: 316px;" />
6
</td>
7
<!-- LEFT SIDE WITH IMAGE -->
8
9
<!-- HEADER -->
10
<td align="center" style="vertical-align:top;">
11
<table class="w-90p alpaco-bg" cellspacing="0" cellpadding="0" border="0" style="width:350px;">
12
<tr>
13
<td align="center">
14
How do you like the editor?
15
</td>
16
</tr>
17
</table>
18
</td>
19
<!-- HEADER -->
20
21
<!-- RIGHT SIDE -->
22
<td class="hide" style="width:50%;">
23
<img alt="" src="https://alpaco-uploads.s3.eu-central-1.amazonaws.com/1/605d7a47-10e6-4211-819d-f207954ea675/74727563-f803-4bce-bfa1-41b2cc0a816f.png" height="316" style="width:310px; display: block; border: 0; height: 316px;" />
24
</td>
25
<!-- RIGHT SIDE -->
26
</tr>
27
</table>
Copied!
Instead of creating a boolean switch, we can make a variable that detects, if there was uploaded an image. Here we assign our variable showTD that is equal to our image, image.url and looks if the image.url is empty.
1
{% assign showTDs = design.global_settings.header_image and design.global_settings.header_image.url and design.global_settings.header_image.url != '' %}
Copied!
Afterwards we can wrap our td's inside the new variable.
1
{% if showTDs %}<br><td>Left side</td><br>{% endif %}
2
3
<td>How do you like the editor?</td><br>
4
5
{% if showTDs %}<td>Right side</td>{% endif %}
Copied!
If you made it this far, you are awesome!
Copy link