Too many {foreach} workaround?

[Former Member]

It wont let me save a template because there are too many foreach loops, is there a way around this or to extend this? This is how my coding is set up, I have roughly 30 custom fields, the second lot of code is my attempt at trying to reduce foreachs but it made everything go haywire.

<td><div style="margin-top:4px;width: 80px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">{foreach $[post.created_by.custom_field]}

       {if $[post.created_by.custom_field.name] == "First Race"}$[post.created_by.custom_field.value]

{/if}{/foreach}</div></td>

<td><div style="margin-left:13px;margin-top:4px;width: 59px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">{foreach $[post.created_by.custom_field]}

       {if $[post.created_by.custom_field.name] == "First Gender"}$[post.created_by.custom_field.value]

{/if}{/foreach}</div></td>

<td><div style="margin-left:6px;margin-top:4px;width: 30px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">{foreach $[post.created_by.custom_field]}

       {if $[post.created_by.custom_field.name] == "First Age"}$[post.created_by.custom_field.value]

{/if}{/foreach}</div></td>

<td><div style="margin-left:-31px;margin-top:4px;width: 102px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">{foreach $[post.created_by.custom_field]}

       {if $[post.created_by.custom_field.name] == "First Profession"}$[post.created_by.custom_field.value]

{/if}{/foreach}</div></td>
<td>{foreach $[post.created_by.custom_field]}<div style="margin-top:4px;width: 80px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">

       {if $[post.created_by.custom_field.name] == "First Race"}$[post.created_by.custom_field.value]{/if}

</div></td>

<td><div style="margin-left:13px;margin-top:4px;width: 59px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">

       {if $[post.created_by.custom_field.name] == "First Gender"}$[post.created_by.custom_field.value]{/if}

</div></td>

<td><div style="margin-left:6px;margin-top:4px;width: 30px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">

       {if $[post.created_by.custom_field.name] == "First Age"}$[post.created_by.custom_field.value]{/if}

</div></td>

<td><div style="margin-left:-31px;margin-top:4px;width: 102px; height: 18px; overflow: auto; padding: 4px; border: solid 2px #000000; background-color: #393c4d;">

       {if $[post.created_by.custom_field.name] == "First Profession"}$[post.created_by.custom_field.value]{/if}

{/if}</div>{/foreach}</td>

[Brian]

If you're typing the same code with the same foreach loop being used over and over again with only minor differences in each instance it's definitely worth looking at your code again and seeing what can be done differently so that you're not duplicating code.

Something like this would take up a lot less space in your template while still allowing you to customize the field's CSS:

{foreach $[post.created_by.custom_field]}
    <td>
        <div class="custom-data" data-field="$[post.created_by.custom_field.name]">$[post.created_by.custom_field.value]</div>
    </td>
{/foreach}

Note the class name (in red) I've given to the div element in the above code. You can use this in conjunction with the data-field attribute I added right after it to target just that field and style it with CSS in your theme's style sheet.

/* CSS that will be applied to all fields */

.custom-data {
    margin-top: 4px;
    border: solid 2px #000000;
    background-color: #393c4d;
    height: 18px;
    overflow: auto;
    padding: 4px;
}


/* CSS that's specific to a particular field */

.custom-data[data-field="First Race"] {
    width: 80px;
}

.custom-data[data-field="First Gender"] {
    margin-left: 13px;
    width: 59px;
}

.custom-data[data-field="First Age"] {
    margin-left: 6px;
    width: 30px;
}