Dynamisches Logo anhand von URL!?

[Niksda]

Hallo zusammen,

ich suche gerade eine Lösung um ein Logo bei meinem Website-Projekt abhängig von der gerade angesurften Seite anzuzeigen.

Das Logo liegt als .svg vor (und auch ein .png-Fallback.)

Ich hatte das zuerst mit "switch" und einer pageTitle variable in php gelöst.
Das dauert nur leider viel zu lang bis das entsprechende Bild geladen ist.

Ein Freund meinte mit jquery und if (document.URL == "..."){$("#element").hide()} ginge es schneller. Hab ich auch probiert. Dauerte immer noch sehr lange, da ich jetzt ja alle versionen laden lassen musste. Irgendwelche Vorschläge?

Gibt es vielleicht eine Möglichkeit nur eine .svg-datei zu nehmen und den entsprechenden Teil zu färben? (dann hätte man noch weniger .mb aber wie sieht das mit der anzeigedauer aus?)

LG, Niksda.

 

[Duddle]

AW: Dynamisches Logo anhand von URL!?

Könntest du ein Beispiel nennen, wie du dir das vorstellst? Was genau ändert sich und worauf bezieht sich diese Änderung? Ist nur die Farbe des Logos unterschiedlich oder soll da dynamischer Text/Inhalt drauf?


Duddle

 

[Niksda]

AW: Dynamisches Logo anhand von URL!?

Habe es gerade hochgeladen, jetzt könnt ihr es auch sehen.

www.julianmaierhauff.com/news/news.php

bei news soll das mit dem grünen schriftzug angezeigt werden usw.

Niksda

 

[Duddle]

AW: Dynamisches Logo anhand von URL!?

Naja, irgendwie musst du a) die aktuelle Seite erkennen und b) das entsprechende Logo anzeigen. Für ersteres musst du entweder die URL / den Namen vom Dokument auslesen oder pro Datei eine Variable führen. Anders geht es nicht.

Sobald diese Entscheidung klar ist, muss das Logo angezeigt werden. Egal, wie du es umsetzt, es muss mindestens 1x komplett geladen werden. Du hast dabei folgende Optionen:

1. das Logo serverseitig erzeugen, sei es nun als .png oder .svg (wobei ersteres wohl kleiner wäre), aber das würde den Cache umgehen
2. alle benötigten Varianten vorrätig haben und je Seite laden, jede muss offensichtlich mindestens 1x geladen werden, was bei kleinen Dateigrößen aber kein Ding sein sollte
3. alle Varianten vorladen lassen, wobei die aktuell benötigte Version zuerst geladen wird, die restlichen sobald das Markup geladen wurde

Die erste Variante ist nur sinnvoll, wenn mehr Dynamik im Bild benötigt wird - bei dir also nicht.
Die zweite und dritte Variante hast du selbst genannt. Wenn der Nutzer zu 99% nur auf einer Seite bleibt / nur eine Logo-Variante benöötigt, ist die zweite Lösung wohl die bessere. Ansonsten sehe ich nichts, was gegen die dritte spricht. Wie gesagt: geladen werden muss jede Version auf jeden Fall.


Duddle

 

[Niksda]

AW: Dynamisches Logo anhand von URL!?

Danke Duddle, wie immer sehr hilfreich.

Ich versuche natürlich den code DRY zu halten und strebe die kürzeste Ladezeit an.
Wie würdest du die dritte Variante umsetzen?
Ich hab diesen Teil natürlich im php ausgelagert als header.php bzw logo.php.
Bzw wie lässt man generell etwas vorladen?

Niksda

 

[Duddle]

AW: Dynamisches Logo anhand von URL!?

Vorladen bedeutet, eine Ressource anzufordern ohne sie zu benutzen. Diese landet im Cache, ist danach also, sobald sie tatsächlich benötigt wird, sofort verfügbar.

Im konkreten Fall kannst du das über (per CSS) versteckte Bilder machen (Nachteil: bei deaktiviertem Stylesheet sind sie sichtbar) oder per JavaScript (Nachteil: kein Preloading bei deaktiviertem JS). Verschiedene Methoden werden hier erläutert.


Duddle

 

[cythux]

AW: Dynamisches Logo anhand von URL!?

hier nur als idee
http://css-tricks.com/using-svg/

 

[lachender_engel]

AW: Dynamisches Logo anhand von URL!?

Ich verstehe es so, dass Du abhängig von der aufgerufenen URL ein anderes Logo anzeigen willst. In Deinem Beispiel rufst Du jedoch keine URL sondern einen Datei news.php auf.
Daher verstehe ich es nicht, warum Du beim Aufruf von news.php nicht das von Dir gewünschte Logo feste hinterlegst.
Oder hast Du in news.php einen Header included der alle Logos enthält?
Dann ist die Frage, geht es Dir wirklich um die ganze URL oder nur um die aufgerufene Datei?
Und, was genau bedeutet "Das dauert nur leider viel zu lang bis das entsprechende Bild geladen ist."? Wenn das Laden des Logos zu lange dauert ist schlussendlich die Datei zu groß. Oder verstehe ich da etwas nicht?

 

[Myhar]

AW: Dynamisches Logo anhand von URL!?

Ein weiterer Lösungsvorschlag meinerseits:
Arbeite mit sprites. Hier gibt es auch zwei Möglichkeiten:
Eine Möglichkeit ist, einfach alle Trompeten + Schriftzug untereinander in ein File laden und bei Bedarf an die korrekte Stelle schieben.
Diese Methode kann man noch dahingehend optimieren, dass du dein Logo in zwei Teile aufspaltest, einerseits die Trompete und andererseits den Schriftzug, welcher sich auf jeder Seite ändert. Du hast also einmal die Trompete und darunter die einzelnen Schriftzüge in einer Grafik. Dann brauchst du zwar zwei HTML Elemente um die komplette Grafik anzuzeigen, aber die Dateigröße sollte sich gegenüber der ersten Sprite-Variante verkleinern.
Du kannst auch die Schrift deines Logos als Webfont erstellen, dann kannst du die einzelnen Farben mittels CSS realisieren. Das ist jedoch nur möglich, wenn die Rechte an der Schrift das erlauben.

 

[chrgas]

AW: Dynamisches Logo anhand von URL!?

Ein weiterer Lösungsvorschlag meinerseits:
Arbeite mit sprites. Hier gibt es auch zwei Möglichkeiten:
Eine Möglichkeit ist, einfach alle Trompeten + Schriftzug untereinander in ein File laden und bei Bedarf an die korrekte Stelle schieben.
Diese Methode kann man noch dahingehend optimieren, dass du dein Logo in zwei Teile aufspaltest, einerseits die Trompete und andererseits den Schriftzug, welcher sich auf jeder Seite ändert. Du hast also einmal die Trompete und darunter die einzelnen Schriftzüge in einer Grafik. Dann brauchst du zwar zwei HTML Elemente um die komplette Grafik anzuzeigen, aber die Dateigröße sollte sich gegenüber der ersten Sprite-Variante verkleinern.
Du kannst auch die Schrift deines Logos als Webfont erstellen, dann kannst du die einzelnen Farben mittels CSS realisieren. Das ist jedoch nur möglich, wenn die Rechte an der Schrift das erlauben.

Das mit den sprites ist super, aber mal ne Anmerkung von mir. Ich war gerade auf der Seite mit dem IE8 und deine hinterlegten Bilder sind, je Grafik, knapp einen MB groß und alle werden gleichzeitig geladen. ich denke mal das ist auch deine Herausvorderung. Klar kannst du hier scripten, aber sofern, ich habe Quelltext jetzt nicht ausgelesen, du deinen Content nicht dynamisch änderst, und so sieht es für mich aus (eine php Datei für jeden Link), hinterlege nur eine Grafik und spare dir die Arbeit.
Auch wenn du sprites nutzt, wirst du unter der aktuellen Voraussetzung eine erhöhte Ladezeit haben, denn du liegst bei ca 3-5 MB für die Grafik unter aktuellen Voraussetzungen.

VG, auch wenn das jetzt keine direkte Antwort war, sondern nur eine Anmerkung.

 

[Niksda]

AW: Dynamisches Logo anhand von URL!?

@lachender_engel
Du hast es genau beschrieben: Ich habe das Logo als logo.php in header.php included und header.php wird auf jeder Seite included.
Es geht mir also im Endeffekt um die angezeigte Datei.

@Myhar:
Da es die Handschrift des Künstlers ist und ich sie vektorisiert habe, habe ich natürlich alle Rechte daran. Hast du das schonmal gemacht? Lohnt sich der zusätzliche Aufwand?

@chrgas:
Hast du Ideen wie ich die Dateigröße verkleinern kann? Kompressionstools? Irgendwas mit php? Lohnt sich sowas wie gzip? Habe damit noch keine Erfahrungen.

Nochmal an Alle: Herzlichen Dank für den Input!

LG, Niksda

 

[lachender_engel]

AW: Dynamisches Logo anhand von URL!?

Ich habe das Logo als logo.php in header.php included und header.php wird auf jeder Seite included.
Es geht mir also im Endeffekt um die angezeigte Datei.

Also, ich würde dann folgendes machen:
- Die Logos als PNG (=hohe Detailschärfe) abspeichern.
- in der logo.php die Logo-Dateien den einzelnen aufrufenden Seiten zuweisen.
Also zum Beispiel "blog.php => logogruen.png" und "index.php => logorot.png". Das dient schlussendlich des schnelleren Zugriffs und der leichteren Pflege.
Dann ermittelst Du die aufgerufene Datei (Unterordner beachten) als Key des Arrays und gibst Dir den dazu gehörigen Wert aus.
Ich habe da mal etwas gebaut, für Dich:

// Array mit der Zurodnung Datei zum Logo
$a_logo = array('blog.php'=>'logogruen.png',
                'index.php'=>'logorot.png',
                'kontakt.php'=>'logogelb.png');

// gibt den Dateinamen des Logos in Abhängigkeit zum aufgerufenen Skriptnamen aus
echo $a_logo[getKey($_SERVER["REQUEST_URI"],1)];

function getKey($s_path, $i_level, $s_delimiter = "/") {
    // ermittelt den Skriptnamen und extrahiert ihn aus einem Verzeichnispfad
    $o_pieces = explode($s_delimiter, $s_path);
    return implode($s_delimiter, array_slice($o_pieces, count($o_pieces) - $i_level));
}

 

[Niksda]

AW: Dynamisches Logo anhand von URL!?

Ach krass! Du bist ja genial .

Habe gar nicht mehr mitbekommen dass da nochmal ne Antwort kam. Ich werde es gleich mal ausprobieren und gib dann feedback.

Danke - Niksda