Neatening up Foreach tags

[Boy_Wonder]

Okay so... I've realised I need to free up five foreach tags.... and if anyone wants to help please be my guest!

<div class="hero ">
<!--Header-->
<img src="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Large Avatar"}$[user.custom_field.value]{/if}{/foreach}" class="large-avatar-Image" style="background-image: url(http://placehold.it/250x250);"/>
<div class="main-head-content container show-user"><div class="text-display">$[user.name] {if $[user.group]}$[user.group.stars]{/if}</div>
<div class="additional-info">
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Gender"}<strong>Gender</strong> - $[user.custom_field.value]{elseif $[user.custom_field.name] == "Pronouns"} <strong>Pronouns</strong> - $[user.custom_field.value] {elseif $[user.custom_field.name] == "Age"}<strong>Age</strong> - $[user.custom_field.value]{elseif $[user.custom_field] == "Alias"}<strong>Alias</strong> - $[user.custom_field.value]{/if}
{/foreach}
<strong>Gil</strong> - <span class="money_amount"></span> - <a class="button" href="/user/$[user.id]?monetarydonation&view=1" role="button">Send Money</a> - <a id="rudolphs-presents-button">Send a Gift</a><br />
{if $[current_user.id] != $[user.id] && $[current_user.is_member]}<a href="$[send_message_button.href]">Send Message</a> - {elseif $[current_user.id] == $[user.id]}<a href="/user/$[user.id]/personal">Edit Profile</a>{/if} </div></div>
<!--Party Display --><div class="party-display-profile"><b>Party Members</b><br />
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 1"}
<a href="$[user.custom_field.value]">{/if}{/foreach}
<img src="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 1 Avatar"}$[user.custom_field.value]{/if}{/foreach}" class="member-1" style="background-image: url(http://placehold.it/80);"></a>
<br />
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 2"}
<a href="$[user.custom_field.value]">{/if}{/foreach}
<img src="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 2 Avatar"}$[user.custom_field.value]{/if}{/foreach}" class="member-2" style="background-image: url(http://placehold.it/80);"></a>
<br />
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 3"}
<a href="$[user.custom_field.value]">{/if}{/foreach}
<img src="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Member 3 Avatar"}$[user.custom_field.value]{/if}{/foreach}" class="member-3" style="background-image: url(http://placehold.it/80);"></a>
</div></div>
<!-- Start of Character Sheet. Add tabs in here-->
<div class="section bio"><p class="subtitle is-4">Biography</p>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Bio"}$[user.custom_field.value]{elseif $[user.custom_field.name] == "Character Sheet"}<img src="$[user.custom_field.value]" style="max-width: 1000px;"/>{/if}{/foreach}</div>
<div class="section trivia"><p class="subtitle is-4">Trivia</p>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Favourite Food"}<strong>Favourite Food:</strong> $[user.custom_field.value]<br />{elseif $[user.custom_field.name] == "Favourite Music"}<strong>Favourite Music:</strong> $[user.custom_field.value]<br />{elseif $[user.custom_field.name] == "Dreams"}<strong>Dreams:</strong><br /> $[user.custom_field.value]<br />{elseif $[user.custom_field.name] == "Fears"}<strong>Fears:</strong><br /> $[user.custom_field.value]{/if}
{/foreach}</div>
<div class="section skills"><p class="subtitle is-4">Skills</p>
<div class="clearfix">
<div class="c100 p{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill 2 Percent"}$[user.custom_field.value]{/if}{/foreach} big">
<span>{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill Hunting and Fishing"}$[user.custom_field.value]<br />{/if}{/foreach}Hunting <br />&<br />Fishing</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill 1 Percent"}$[user.custom_field.value]{/if}{/foreach} big">
<span>{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill Survival"}$[user.custom_field.value]<br />{/if}{/foreach}Survival</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill 3 Percent"}$[user.custom_field.value]{/if}{/foreach} big">
<span>{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill Cooking"}$[user.custom_field.value]<br />{/if}{/foreach}Cooking</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="c100 p{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill 4 Percent"}$[user.custom_field.value]{/if}{/foreach} big">
<span>{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Skill Creative Arts"}$[user.custom_field.value]<br />{/if}{/foreach}Creative<br />Arts</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<div class="level-display"><span class="Level">
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Level"}$[user.custom_field.value]<br />{/if}{/foreach}Level</span></div>
</div></div>
<div class="section connections"><p class="subtitle is-4">Connections</p>
{foreach $[user.custom_field]} {if $[user.custom_field.name] == "Group"}<b>My Affiliation:</b> $[user.custom_field.value] <br />
{elseif $[user.custom_field.name] == "Tags Tracked"}<b>Tracked Tags</b><br /> $[user.custom_field.value]{/if}{/foreach}<br />
<div class="boxified"><i class="fa fa-envelope-open-o fa-3x" aria-hidden="true"></i>
<a href="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Plot Page"} $[user.custom_field.value]{/if}{/foreach}">Plot Page</a>
</div><div class="boxified"><i class="fa fa-mobile fa-3x" aria-hidden="true"></i>
<a href="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Want Ads"} $[user.custom_field.value]{/if}{/foreach}">Want Ads</a>
</div><div class="boxified"> <i class="fa fa-users fa-3x" aria-hidden="true"></i>
<a href="{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Party Requests"} $[user.custom_field.value]{/if}{/foreach}">Party Wanted</a>
</div></div>
<div class="section inventory"><p class="subtitle is-4">Inventory</p>
<div id="tabs" class="c-tabs no-js">
<div class="c-tabs-nav">
<a href="#" class="c-tabs-nav__link is-active">
<img src="https://cdnw.nickpic.host/oqhDb5.png">
<span>Curatives</span>
</a>
<a href="#" class="c-tabs-nav__link">
<img src="https://cdnw.nickpic.host/oqhw6P.png">
<span>Monster Drops</span>
</a>
<a href="#" class="c-tabs-nav__link">
<img src="https://cdnw.nickpic.host/oqh8mF.png">
<span>Weapons</span>
</a>
<a href="#" class="c-tabs-nav__link">
<img src="https://cdnw.nickpic.host/oqh19D.png">
<span>Accessories</span>
</a>
<a href="#" class="c-tabs-nav__link">
<img src="https://cdnw.nickpic.host/oqhzHM.png">
<span>Ingredients</span>
</a>
<a href="#" class="c-tabs-nav__link">
<img src="https://cdnw.nickpic.host/oqhRnd.png">
<span>Key Items</span>
</a>
<a href="#" class="c-tabs-nav__link">
<span>Wintermas Presents</span></a>
</div>
<div class="c-tab is-active">
<div class="c-tab__content">
<h2>Curatives</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Curatives"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Loot</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Monster Drops"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Weapons</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Weapons"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Accessories</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Accessories"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Ingredients</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Ingredients"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<h2>Key Items</h2>
{foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Key Items"}$[user.custom_field.value]{/if}{/foreach}
</div>
</div>
<div class="c-tab">
<div class="c-tab__content">
<div id="rudolphs-presents-profile-presents"></div>
</div>
</div>
</div>
</div>
<div class="section proboards-default"><div class="ui-tabMenu" style="display: none !important;">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
<div class="pad-all-double ui-helper-clearfix clear" style="display: none !important;">
$[content]
</div>
</div>

<script>
var myTabs = tabs({
el: '#tabs',
tabNavigationLinks: '.c-tabs-nav__link',
tabContentContainers: '.c-tab'
});

myTabs.init();
</script>

[Boy_Wonder]

BUMP

[Brian]

Your tabs near the end could easily be shortened into a single foreach loop. Anything where you're typing the same HTML over and over again and adding a loop in the middle should probably be remade so that you only have to type the HTML once. Let the loop do the duplication work for you.

        <div class="c-tab is-active">
            <div class="c-tab__content">
                <h2>Curatives</h2>
                {foreach $[user.custom_field]}{if $[user.custom_field.name] == "Inventory Curatives"}$[user.custom_field.value]{/if}{/foreach}
            </div>
        </div>

Instead of copying this section 6 times over and making minor edits this can be shortened into the following to produce all 6:

{foreach $[user.custom_field]}
    {if $[user.custom_field.name] == "Inventory Curatives" || $[user.custom_field.name] == "Inventory Monster Drops" || $[user.custom_field.name] == "Inventory Weapons" || $[user.custom_field.name] == "Inventory Accessories" || $[user.custom_field.name] == "Inventory Ingredients" || $[user.custom_field.name] == "Inventory Key Items"}
        <div class="c-tab {if $[user.custom_field.name] == "Inventory Curatives"}is-active{/if}">
            <div class="c-tab__content">
                <h2>$[user.custom_field.name]</h2>
                $[user.custom_field.value]
            </div>
        </div>
    {/if}
{/foreach}

[Boy_Wonder]

How would I ensure that the is-active is transferred onto each tab in turn Brian as the is-active controls which tab displays (as it is right now no tab displays)

[Brian]

In your original HTML is-active is present in the very first tab. In the version that I gave you it's still present in the very first tab because I added an if statement within the class specifying such.

I believe your Javascript at the end controls the tabs.

[Boy_Wonder]

Jan 30, 2018 12:13:33 GMT -8 Brian said:

In your original HTML is-active is present in the very first tab. In the version that I gave you it's still present in the very first tab because I added an if statement within the class specifying such.

I believe your Javascript at the end controls the tabs.

I copied and pasted exactly what you put:
sehnsuchtffxv.com/user/1

As you can see its now not functioning at all

[Brian]

Are those custom fields filled out in your profile?

If not they aren't included in the data the foreach loop goes through and thus won't render on the page.

[Boy_Wonder]

Jan 30, 2018 12:20:25 GMT -8 Brian said:

Are those custom fields filled out in your profile?

If not they aren't included in the data the foreach loop goes through and thus won't render on the page.

Yep they're definitely filled in, Ifrit was very much my crash test dummy account (as much as my staff account on the site)

[Brian]

It looks like you have an extra space in each of their names in Members > Custom Profile Fields which is why they aren't rendering. The if statements only have one space after the word "Inventory".

[Boy_Wonder]

Okay that's sort of working now, I'm unsure as to why ingredients has decided to take on the Monster drops field information but

Custom field reordering fixed that XD