Cute Profiles Revamped

Liebe Stammleser, ich entschuldige mich, denn dieser Beitrag wird Sie vermutlich nicht die Bohne interessieren. Statt Weltrettungsszenarien, Kochanleitungen, Filmrezensionen oder knuffigen Fotos gibt’s heute was Technisches – ich benötigte nämlich Social Media Icons für den linken Bildschirmrand, die das wunderbare, aber in die Jahre gekommene Cute Profiles nicht zur Verfügung stellt.

Generierung von CSS-Sprites

Entgegen der naheliegenden Vermutung, die wahlweise rechts oder links zu platzierende Icon-Leiste bestünde aus einzelnen Grafiken, die im Plugin-Verzeichnis nur zu finden und auszutauschen wären, arbeitet Cute Profiles mit CSS-Sprites: aus verschiedenen Einzelbildern zusammengesetzte Grafiken, deren Bestandteile per CSS exakt angesteuert und sichtbar gemacht werden können. Da statt vieler Komponenten nur ein einziges Bild ein einziges Mal geladen werden muss, wird sowohl die Anzahl der HTTP-Requests als auch die insgesamt zu übertragende Datenmenge minimiert. Sprites sind folglich (zumeist) ein probates Mittel, um die Ladezeiten von Webseiten zu verkürzen. (Das wird hier alles noch viel hübscher und detaillierter erklärt.)

Zur Erstellung neuer Sprites muss zunächst ein geeignet erscheinendes Icon-Paket ausgewählt werden, zum Beispiel das vom Original-Plugin verwendete. Das Paket stellt die von Cute Profiles benötigten Icon-Größen (16×16, 24×24 und 32×32 Pixel) zur Verfügung. Die gewünschten Exemplare können nun per Bildbearbeitungsprogramm in eine frische Datei ohne Abstand direkt nebeneinander gesetzt werden, schneller geht’s mit dem CSS-Sprite-Generator: Icons gleicher Größe auswählen, zippen, hochladen, die Ausgabeoptionen anpassen (horizontale Anordnung, Abstand von je einem Pixel), Sprite generieren und herunterladen. Drei Icon-Größen, drei Sprites – ist klar, ne?

cute_profiles_sprite1

cute_profiles_sprite2

cute_profiles_sprite3

Da Cute Profiles neben unterschiedlichen Icon-Größen zwei verschiedene Themes zur Auswahl stellt, kommt nun ein ebenenfähiges Bildbearbeitungsprogramm zum Einsatz. Jeweils ein Sprite wird in eine neue Grafik kopiert und übereinander stehend dupliziert, der obere Teil wird in Graustufen umgewandelt oder durch eine weiß gefüllte Ebene mit verringerter Deckkraft überlagert. Und weil das eine wahnsinnig dröge Arbeit ist, bastelte ich zu ihrer Erledigung zwei Aktionen für Photoshop.

cute_profiles_sprite21

cute_profiles_sprite22

Aktualisierung der Stylesheets

Für jeden Sprite existiert ein Stylesheet, das es anzupassen gilt. Angenommen, die ersten drei Icons sind E-Mail, Facebook und Feed, dann sieht der Code in etwa so aus:

div.cute_profiles_sprite {
  clear:both; position:fixed;
  border:0; margin:0; padding:0; }

div.cute_profiles_sprite a {
  background:url(../images/cute_profiles_sprite11.png) no-repeat 0 0; 
  display:block; width:16px; height:16px; 
  padding:0; margin:0 0 4px 0; }

div.cute_profiles_sprite a.cute_profiles_email {
  background-position:0 0; }
div.cute_profiles_sprite a.cute_profiles_email:hover {
  background-position:0 -16px; }

div.cute_profiles_sprite a.cute_profiles_facebook {
  background-position:-17px 0; }
div.cute_profiles_sprite a.cute_profiles_facebook:hover {
  background-position:-17px -16px; }

div.cute_profiles_sprite a.cute_profiles_feed {
  background-position:-34px 0; }
div.cute_profiles_sprite a.cute_profiles_feed:hover {
  background-position:-34px -16px; }

Die Hintergrundgrafik wird jeweils nach links und oben verschoben, um das gewünschte Icon im gewünschten Zustand anzuzeigen. Bei der Linksverschiebung muss der Abstandspixel einkalkuliert werden, den der Sprite-Generator unbedingt ausspucken wollte.

Anpassung des Plugin-Codes

So, nun noch den Code aktualisieren, der für die Einstellungsseite des Plugins und die Darstellung der Icons zuständig ist. Analog zum vorhandenen Code müssen die neuen sozialen Dienste aufgenommen und nicht gewollte entfernt werden, vier Stellen der cute-profiles.php sind hierfür relevant:

  • das Array $cute_profiles_opts1 in der Funktion activate_cute_profiles()
  • die Schlüssel im Array $cute_profiles_networks, deren Reihenfolge die Reihenfolge der ausgegebenen Icons und der Eingabefelder in den Plugin-Einstellungen bestimmt
  • die Variable $cute_profiles_nw innerhalb der Funktion put_cute_profiles()
  • die foreach-Schleife zur Ausgabe der „Social Network Profiles“.

Das war’s. Wenn Sie mögen, laden Sie Cute Profiles Revamped herunter, entpacken Sie es ins Plugin-Verzeichnis Ihrer WordPress-Installation und erfreuen Sie sich an den Icons für folgende soziale Dienste: RSS-Feed, E-Mail, Twitter, Facebook, Instagram, Flickr, Pintrest, Skype, Soundcloud, Spotify, Tumblr, Vcard, Vimeo, YouTube.