Jump to content

Forums

Country Flags Not Working


Ezaco

Recommended Posts

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:

ZLCUcRY.png

 

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.

Link to comment
Share on other sites

  • Administrators

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!

Owner
Deschutes Design Group LLC
email | jon@deschutesdesigngroup.com

Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

  • Administrators

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.

Owner
Deschutes Design Group LLC
email | jon@deschutesdesigngroup.com

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.