Hi, Amit here, I am the WPML Support Manager, our current ticket queue is quite calm and I'd like to encourage you to use our new chat support option

We are working hard to debug and look at every single report

All of the known issues are documented in https://wpml.org/known-issues/ you can also use our support search to find helpful information and of course review our documentation before opening a ticket.

We are also adding once a week a tutorial to our YouTube channel - https://www.youtube.com/c/WPML-multilingual - check out if we already covered what you need and leave us a comment if you want us to produce anything there

If you do need to open a ticket please make sure to provide us with all the needed information as described here https://wpml.org/faq/checklist-before-opening-a-ticket-in-wpml-support/

We are very proud at our level of support, we are one team from all over the world and we are all experienced WordPress developers, you can read more about us here - https://wpml.org/forums/supporters/

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 7 replies, has 2 voices.

Last updated by Andreas Neuber 5 years, 2 months ago.

Assigned support staff: Andreas Neuber.

Author Posts
November 4, 2013 at 8:27 am #286100

orla

Hi,
Running Google PageSpeed optimize tool recommends combining 7 WPML .png images as a single sprite, as it currently gives me a Grade F for that due to WPML:

Combine images using CSS sprites:
---------------------------------------------------------------------------------
/wp-content/plugins/sitepress-multilingual-cms/res/flags/ar.png
/wp-content/plugins/sitepress-multilingual-cms/res/flags/de.png
/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png
/wp-content/plugins/sitepress-multilingual-cms/res/flags/es.png
/wp-content/plugins/sitepress-multilingual-cms/res/flags/it.png
/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png
/wp-content/plugins/sitepress-multilingual-cms/res/img/nav-arrow-down.png

Please advise how to set this up in the WPML code and if there is a ready image sprite/css that I can use.

November 4, 2013 at 9:21 am #286143

Andreas Neuber
Supporter

Languages: English (English ) German (Deutsch )

Hello Orla,

To adjust this in WPML itself is not possible. It would require quite some reprogramming.
We have also no ready image sprite from our end you could use .
I see perhaps a possibility with a "custom language switcher" and some custom programming.

Before going into it, please keep in mind that a single image file containing the 7 above mentioned icons will be actually bigger. So how much loading time will be really saved?
Might be worth running a test with the sprite image file + Firebug.

--
http://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/
hidden link

November 5, 2013 at 10:49 am #286967

orla

Hi Andreas,
Thanks for your reply. I'm trying to reduce the number of round-trips and latency delays so I am still interested in your solution for the custom language switcher - all I really need is the "Language selector with flags only" version.

How would you recommend going about that?

November 5, 2013 at 1:17 pm #287077

Andreas Neuber
Supporter

Languages: English (English ) German (Deutsch )

Hi Orla,

Are you sure its worth the effort?
It can be done, might reduce latency a tiny bit, but requires a lot custom programming..

1) You need a custom language switcher PHP function
http://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/

2) You see this array in the docu page..
The value of [country_flag_url] needs to be replaced by the generic image with all the icons

3) when running through the array with a foreach loop you can give the <img> element an extra CSS class for the sprite

hidden link

November 6, 2013 at 1:58 pm #287844

orla

Thank you. I'm not sure yet but considering how it might work how you suggested but have a question re calling the correct css per language after (3):

I guess I would also need to call a specific css for each language that is output later in the foreach loop - so would I be able add something like this to the array first to hold that? [css_class] => flag_fr, etc. per each language in the array.
Is this right?

Then add class="[css_class]" call to foreach loop.
'<a href="'.$l['url'].'" class="'.$l['css_class'].'">'.$l['translated_name'].'</a>'
Is this right?

I guess then I would need to first define this new variable [css_class] somewhere, right?

November 7, 2013 at 9:52 am #288328

Andreas Neuber
Supporter

Languages: English (English ) German (Deutsch )

Hi Orla,

To add another $l key into the array is one possibility, but you need to go a bit deeper into the system.
Another perhaps easier one would be:

foreach(($languages as $l)){

  $class_name = 'sprite_css_' . $l['language_code'];

  echo "<a href='{$l['url']}' class='{$class_name}'>{$l['translated_name']}</a>";

}

This would return you for e.g. languages English and Spanish the css class names:
sprite_css_en
sprite_css_es

November 7, 2013 at 4:39 pm #288704

orla

Hi Andreas,
Thanks so far, I've got the custom function working and calling the sprite however it doesn't seem to call the sprite's css properly.

In css, I've tried these but neither way seem to work:
.sprite_css_fr{ background-position: -272px 0; width: 18px; height: 12px; }
#flags_language_selector .sprite_css_it img{ background-position: -340px 0; width: 18px; height: 12px; }

You can see my css and testpage here:
hidden link
hidden link

Any idea what I'm doing wrong?
Thanks.

November 8, 2013 at 8:57 am #289007

Andreas Neuber
Supporter

Languages: English (English ) German (Deutsch )

Hello Orla,

I'm afraid this is beyond the scope of our support - you will need some paid custom work for further adjustments. Best point to start this is our new section here: hidden link

Thank you for understanding!

--
http://wpml.org/purchase/support-policy/

The topic ‘[Closed] Image Sprite for Flags – PageSpeed Optimization’ is closed to new replies.