CSS - Bilder einfügen mit einem "Dummybild" als Alternative

Orwell · #1 (**permalink**) 24.03.2012, 10:29

Gutem morgen, ich bin der Neue

Ich komme auch gleich direkt zur Sache. In einem Wordpressblog sollen für Unterseiten verschiedene Headerbilder angezeigt werden. Ich habe die Bilder per CSS-Anweisungen nach den Seiten-ID der einzelnen Seiten eingefügt weil nicht groß in den Dateien herumgehackt werden soll.

Wird also die Seiten-ID1 aufgerufen, erscheint das dazugehörige Bild.

Nun ist es aber so, das es 6 Headerbilder gibt, aber unzählige andere IDs, und ich kann nicht für hunderte IDs Bilder einfügen oder die CSS-Datei unnütz aufblähen.

Ich bräuchte einen Tip wie man wenn keine in der CSS deklarierte ID aufgerufen wird, ein "Dummy"-Bild angezeigt bekommt, also ein Standardbild. Anders, es soll immer ein Standardbild aufgerufen werden wenn kein speziell in der CSS deklariertes Bild aufgerufen wird. Wie könnte man das am besten anstellen?

Hier mal die Codezeile mit der die IDs aufgerufen werden:

PHP-Code:


			
if ( get_header_image() ):

        $output .= '<figure><a href="'.home_url( '/' ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home"><img class="header-image'.get_the_ID().'"src="" alt="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'"></a></figure>';

    endif;

Die noch unzusammengefasste css sieht im Moment so aus:

Code:

.header-image23{
background: url(imgs/head_kulturmanagement.png) no-repeat;
width:830px;
height:210px;
}

.header-image258{
background: url(imgs/head_arete.png) no-repeat;
width:830px;
height:210px;
}

.header-image20{
background: url(imgs/head_musikmanagement.png) no-repeat;
width:830px;
height:210px;
}
....

Vielleicht kann mir ja jemand helfen?
Vielen Dank,

Orwell

cebito · #2 (**permalink**) 24.03.2012, 12:15

Hast du dir mal angeschaut, was du dort ausgibst? Ein leeres img-Element, im schlimmsten Fall wird dir dort eine Platzhaltergrafik (IE) für ein nicht vorhandenes/gefundenes Image über dem Hintergrund angezeigt.
Und warum ein figure? Du schreibst, es ist der header, dann benutze auch header. Dann gibst du dem per css ein allgemeines Hintergrundbild, danach notierst du deine Klassen. Ach ja, und Klassen bitte nicht mit ID's durcheinanderbringen

Orwell · #3 (**permalink**) 24.03.2012, 12:53

Danke für die schnelle Antwort.

Ja, das ist mir klar, hehe, es ist ja auch noch im Experimentalstadium, das leere Bildchen verschwindet dann noch.

Das "figure" ist im Theme so vorgesehen, und deswegen nutze ichs auch weiter, denn im Header sind noch andere Elemente wie 'ne Nav usw. enthalten und "header" ist schon in Verwendung.

Ich nutze jetzt als Hintergundbilder eben diese verschiedenen Grafiken. Die IDs sind keine CSS-IDs, sondern die Seiten-IDs die Wordpress ausgibt um die Seiten im Code quasi unterscheiden zu können. Also ist beispielsweise die ID 2 die Bezeichnung für die Seite 2.

Code:

class="header-image'.get_the_ID().'"

gibt folglich die gerade aufgerufene Seite als ID aus:

Code:

class="header-image2"

welcher ich in der CSS ein Hintergrundbild zuweise:

Code:

.header-image2{
background: url(imgs/head_musikmanagement.png) no-repeat;
width:830px;
height:210px;
}

Das Problem ist nun, wenn keine der 6 verschiedenen Seiten-IDs ausgegeben werden die eigene Grafiken erhalten sollen, weil eine andere Seite ohne zugewiesenes Hintergrundbild aufgerufen wird, das dann kein Hintergrundbild angezeigt werden kann, logischerweise. Es soll dann aber ein Standardbild alternativ angezeigt werden

cebito · #4 (**permalink**) 24.03.2012, 13:21

Danke für die Aufklärung, ich weiß wie das funktioniert

ich bezog mich auf diesen Satz

Zitat:

Zitat von Orwell

wenn keine in der CSS deklarierte ID

du hast in der CSS keine ID sondern Klassen.
Und wie es funktioniert hab ich dir bereits gesagt:

Code:

meinElement{
  background:url(dummy.jpg);
  width:830px;
  height:210px;
}
meinElement.bg1{
  background:url(bg1.jpg);
}
meinElement.bg2{
  background:url(bg2.jpg);
}

Orwell · #5 (**permalink**) 24.03.2012, 13:42

Dann haben wir uns Missverstanden, -ist ja kein Beinbruch-, ich meinte mit den IDs ja die WP-IDs, was sonst?

Danke für den Tip, werds ausprobieren

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Bilder mit CSS einfügen Ideen für Webseiten	overdev	CSS	4	26.11.2010 18:24
3 Bilder nebeneinander (CSS)	nuni83	CSS	11	08.08.2008 13:26
Mit CSS eingebundene Bilder werden immer neu geladen	lomtas	CSS	8	06.05.2005 17:56
Mehrere Bilder mit css ausrichten, aber wie?	mika	CSS	2	07.09.2004 13:35