Ezaco Posted December 11, 2018 Share Posted December 11, 2018 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. Quote Link to comment Share on other sites More sharing options...
Administrators Jon Erickson Posted December 12, 2018 Administrators Share Posted December 12, 2018 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! Quote Owner Deschutes Design Group LLC email | jon@deschutesdesigngroup.com Link to comment Share on other sites More sharing options...
Arthur Cantu Posted December 12, 2018 Share Posted December 12, 2018 <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. Quote Link to comment Share on other sites More sharing options...
Administrators Jon Erickson Posted December 12, 2018 Administrators Share Posted December 12, 2018 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. Quote Owner Deschutes Design Group LLC email | jon@deschutesdesigngroup.com Link to comment Share on other sites More sharing options...
Ezaco Posted December 13, 2018 Author Share Posted December 13, 2018 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. Quote Link to comment Share on other sites More sharing options...
Administrators Jon Erickson Posted December 13, 2018 Administrators Share Posted December 13, 2018 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. Quote Owner Deschutes Design Group LLC email | jon@deschutesdesigngroup.com Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.