Country Flags Not Working

[Ezaco]

Been trying to get the country flags to show up on the main roster row view, and realized it's already set up, but not working.

 

	<div class='ipsGrid_span1 ipsType_center ipsPad_half ipsResponsive_hidePhone'>
            <span class='flag-icon flag-icon-{expression="mb_strtolower($soldier->country)" raw="$soldier->country"}'></span>
        </div>

Is present, and if you inspect the element it does show up correct, as shown below:

 

And double-checking the CSS shows this for the .flag-icon and the .flag-icon-us classes:

 

.flag-icon-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.flag-icon:before {
  content: "\00a0";
}
.flag-icon.flag-icon-squared {
  width: 1em;
}

.flag-icon-us {
  background-image: url({resource="flags/4x3/us.svg" app="perscom" location="front"});
}
.flag-icon-us.flag-icon-squared {
  background-image: url({resource="flags/1x1/us.svg" app="perscom" location="front"});
}

 

But, as you can see from the Inspect Element picture, the source URL isn't being filled in, so no flags are showing.

[Jon Erickson]

For some reason IPB, is not correctly building the resource paths for the SVG icon files. The CSS document has about half of the background-image URL's right. I am gonna change something on my end for next release to see if that helps IPB build the resource paths better - it works correctly in my dev environment but in the mean time, you can edit the soldierRow template and make the following changes:

Replace:

<span class='flag-icon flag-icon-{expression="mb_strtolower($soldier->country)" raw="$soldier->country"}'></span>

With:

{{$country = mb_strtolower( $soldier->country );}}
<span class='flag-icon' style="background-image: url('{resource="flags/4x3/{$country}.svg" app="perscom" location="front"}');"></span>

Let me know how it works!

[Arthur Cantu]

<span class='flag-icon flag-icon-{expression="mb_strtolower($soldier->country)" raw="$soldier->country"}' data-ipstooltip="" _title="{lang='country-$soldier->country'}"></span>

Interesting, the above works for us and how I have it implemented to include the country name on mouse over.

Do those resources exist within your theme resources? I find that there is a bug that deletes resources which causes this error sometimes. I have to manually upload the flags again and it fixes it. CSS looks the same to me, there is no background url parsed because that resource isn't physically found in the system based on the naming convention. 

There are bug reports on IPB's site about this issue and supposedly its being investigated for a fix with 4.4 release. Basically it seems that when apps or plugins add resources, sometimes they change the filename of the resources, even though the resource is still there under the old filename such as uploads/set_resources_X/c0b56cc222cde0460c4bb40b45433af3_us.svg but will be renamed to a filename with a more recent date such as uploads/set_resources_X/ac493a35b67becbd8e183644baf404a2_us.svg

So I suggest, check your theme resources see if they are there. If not, browse your set_resources_X (it will be 1 or 2 etc based on your theme) and you should have all the resources there to re-upload manually.

[Jon Erickson]

I checked their website and the flags that are not appearing on the webpage, are present in their uploads folder. And it's not the fact that the resources are missing - if you visit their website and view the flag-icons.css file, you can see that the background-image url is missing on many countries. No matter what they do they won't appear.

[Ezaco]

10 hours ago, Jon Erickson said:

For some reason IPB, is not correctly building the resource paths for the SVG icon files. The CSS document has about half of the background-image URL's right. I am gonna change something on my end for next release to see if that helps IPB build the resource paths better - it works correctly in my dev environment but in the mean time, you can edit the soldierRow template and make the following changes:

Replace:

<span class='flag-icon flag-icon-{expression="mb_strtolower($soldier->country)" raw="$soldier->country"}'></span>

With:

{{$country = mb_strtolower( $soldier->country );}}
<span class='flag-icon' style="background-image: url('{resource="flags/4x3/{$country}.svg" app="perscom" location="front"}');"></span>

Let me know how it works!

 

Unfortunately this did not work. Following the suggestion above I did verify the resources are in the theme.

[Jon Erickson]

Dang. Yeah, as Arthur mentioned - this is a crappy bug in IPB 4 that will be addressed in 4.4's release. I will be releasing PERSCOM 1.1.5 - probably today, which may fix the issue for you on the new update.