Ausgabe von Text in Node durch Icon/Symbol ersetzen
Eingetragen von jshoffmann (82)am 13.07.2012 - 08:08 Uhr in
Hallo Community,
leider bin ich mir gerade nicht sicher, ob ich hier in der richtigen Kategorie bin, um diese Frage zu stellen. Falls nicht, verschiebe ich das Thema natürlich gerne.
Mein Problem ist aktuell, dass ich Text in einer Node durch Icons ersetzen muss. Also in der Erfassung bzw. im Bearbeitungsmodus gibt es ein Multiselect-Element, in dem zum Beispiel folgende Informationen ausgewählt werden sollen: Kreditkarte, EC-Karte, Barzahlung. Im Ansichtsmodus sollen dann nicht die Begriffe, sondern entsprechende Icons angezeigt werden. Dazu hatte ich schon die Idee, die Bilder genau so wie die Werte zu bezeichnen, die in die Datenbank geschrieben werden.
Beispiel:
Multiselect-Werte:
kreditkarte|Kreditkarte
eckarte|EC-Karte
barzahlung|Barzahlung
Bilder in einem Ordner pictures/icons/zahlungsart:
kreditkarte.jpg
eckarte.jpg
barzahlung.jpg
Leider weiß ich nun nicht, wie ich weiter an die Sache dran gehen soll. In einem Template oder in einer preprocess-Funktion? Und wo plaziere ich diese am Besten im Filesystem?
Vielen Dank im Voraus für all eure Hilfe!
Viele Grüße,
Jacqueline
- Anmelden oder Registrieren um Kommentare zu schreiben
Ich denk, ich würde da per
am 13.07.2012 - 21:56 Uhr
Ich denk, ich würde da per CSS an die sache rangehen. Das entsprechende Bild als Hintergrund und den Text mit display: none; ausblenden.
Besser als display: none; ist
am 16.07.2012 - 11:02 Uhr
Besser als display: none; ist text-indent.
Mit text-indent rückst du den Text bei positiven Werten nach rechts und bei negativen nach links. Sollen wie in diesem Beispiel Textlinks gar nicht mehr auftauchen einfach in deiner CSS-Datei das Bild als Background-Image ausrichten und mit text-indent: -9999em; nach links ausrücken.
Danke für die Ideen!
am 16.07.2012 - 13:54 Uhr
Hallo!
Dankeschön für eure Antworten. Ich habe das jetzt mal genau so versucht, wie Ihr das beschrieben hat. Funktioniert auch wunderbar, mit dem Einlenden als Background und dem Ausblenden des Textes. Leider habe ich nun ein Problem dabei von Drupal. Ich habe eine Checkbox im Bearbeiten-Modus, diese wird an- ober ausgehakt. Die Anzeige im Quellcode sieht dann so aus:
AN
<div class="field field-name-field-sticker field-type-list-boolean field-label-hidden"><div class="field-items">
<div class="field-item even">
1
</div>
</div>
</div>
AUS
<div class="field field-name-field-sticker field-type-list-boolean field-label-hidden"><div class="field-items">
<div class="field-item even">
</div>
</div>
</div>
Der HTML-Code ist also der selbe, nur der Text im innersten DIV verändert sich. Da nun aber alle DIVs immer da sind, wird das Logo auch immer angezeigt. Kann man da was machen? Habt ihr da eine Idee? Ich steh' gerade noch etwas auf dem Schlauch, ob ich vielleicht ein anderes Drupal-Element nehmen muss anstatt die Textbox? Die Node soll aber natürlich auch für den Benutzer dennoch so einfach wie möglich auszufüllen sein.
Dankeschön für eure Hilfe!
Jacqueline