As I faced similar issue than https://drupal.org/node/1945270, I think the first step is to add background picture support.

Adding sprite can then be for instance automatic (https://drupal.org/project/spritesheets) or manual.
But adding the background feature with automatic CSS is possible.

I attach a patch that does so. Basic version.

What it does

  1. adds a "background image of span" option in admin
  2. handles this option by adding a span in tags, with relevant classes
  3. automatically rebuild languageicons CSS file when form s saved so that enabled language icons (and only them) are automatically handled.

it is then possible to add generic rule such as

span.language-icon:hover {box-shadow:2px 2px 5px 2px #666;}

not that for my usage, I also added in theme style.css file the following rules, to support box-shadow on hovering

span.language-icon {
	height: 18px;
	background-position: center center !important;	
	margin: 3px 0;
}

what it does not
you have to manually clear the cache if CSS file is updated

Note: this is really basic patch but it does what it promises :D

CommentFileSizeAuthor
0001-Language-icon-update-240.patch5.26 KBJulienThomas

Comments

JulienThomas’s picture

JulienThomas commented

Okay so I will review this at this patch makes D7 crashes under IE8.
Likely to be the background pictures on spans ...

JulienThomas’s picture

JulienThomas commented

Okay so following update fix it

function theme_languageicons_background($variables) {
  $language = $variables['language'];
  $title    = $variables['title'];

    $title = $title ? $title : $language->native;
    // Build up $image for theme_image() consumption.
    $sspan = array(
      'element' => array(
        "#tag" => 'span',
        '#attributes' => array(
	      	'title' => $title,
	        'class' => 'language-icon '.$language->language,
        ),
    -     '#value' => NULL
   +     '#value' => " "
      )
    ); 
    return theme('html_tag',  $sspan);
}

For the CSS

/**
 * Regenerate language icon CSS file
 */
function languageicons_regenerate(){
  $path = variable_get('languageicons_path', drupal_get_path('module', 'languageicons') . '/flags/*.png');
  $rules = array();
  $size = variable_get('languageicons_size', '16x12'); 
  list($width, $height) = explode('x', $size);
  $rules[] = "span.language-icon { height:".$height."px ; width:".$width."px ; display:inline-block }";
  foreach(language_list() as $language) {
    $l_path = str_replace('*', $language->language, check_plain($path)) ;
-    $rules[] = "span.language-icon.".$language -> language." { background: url(/".$l_path.")}";
+    $rules[] = "span.language-icon.".$language -> language." { background-image: url(/".$l_path.")}";
  }
  
  //update css file!
  $ficons = dirname(__FILE__) ."/languageicons.css";
  file_put_contents($ficons, implode("\n",$rules));
  //print_r(file_get_contents(dirname(__FILE__) ."/languageicons.css"));
}
JulienThomas’s picture

JulienThomas commented

Okay so I tried the update with CSS Embedded Images (https://drupal.org/project/css_emimage) and this works ... perfectly.

The Sprite generation issue mentioned in https://drupal.org/node/1945270 is simply ... bypassed!

OnkelTem’s picture

OnkelTem commented

I just want to announce a module which can be used for totally automatic sprites generation.
I've just uploaded. Its called Sprites.
It generates sprites from images of a specific image style, replaces affected IMG tags with SPAN with identification CSS classes and generates required CSS definitions for applying background to SPANS.
Sandbox link: https://drupal.org/sandbox/onkeltem/2191795
Please check out and review. Thanks.