Zum Inhalt springen

Artikelbild bei den einzelnen Artikel ausblenden (WordPress Theme Twenty Seventeen)

Nachdem ich nun bei einem neuen Webhosting-Provider bin (allinkl.com), dachte ich mir, es wäre auch mal an der Zeit ein neues Theme für meinen Blog auszuprobieren. 
Ich wollte etwas, was sehr schlicht und klar ist und nicht zu verspielt. Nachdem ich einige Themes mit angeschaut und ausprobiert hatte, bin ich bei "Twenty Seventeen" hängen geblieben. Das Theme ist direkt von WordPress selbst und (Stand heute) das aktuellste.

Allerdings hatte ich mit dem Theme ein Problem, da es mit bei einzelnen Artikelseiten das Artikelbild doppelt anzeigte. An dem Problem bin ich bin zu einem gewissen Grad selber schuld, da bei meinem alten Theme (Nano von Yoothemes.com) das Artikelbild nicht per Default auf der Artikelseite angezeigt wurde. Aus diesem Grund hab ich dann das selbe Bild nochmals zu Beginn des Textes eingebaut. 
Mein aktuelles Theme verhält sich da etwas anders und somit wird das Artikelbild dort nun doppelt angezeigt.

Das hat mir überhaupt nicht gefallen und ich begab mit auf die Suche nach einer Lösung für dieses Problem. Es dauerte auch nicht lange und ich wurde auf einer englischsprachigen Webseite fündig.
Und wie es sehr oft bei solchen Problemen ist, reichen ein paar einfache Zeilen Code um es zu lösen.

Hierzu noch die Anmerkung, dass ihr den Code unbedingt über das WordPress-Backend einbaut und NICHT(!) an den original CSS Dateien rumfuhrwerkt, da diese bei einem Theme-Update dann auch wieder überschrieben werden. 
Im Backend könnt ihr dies sehr elegant über "Design" und dann "CSS bearbeiten" bewerkstelligen.

Fügt dort einfach nachstehenden Code ein:

.single-featured-image-header {
display: none;
}

Wie ihr seht – auch gleich in der Live-Ansicht – wird so das "obere" Artikelbild sofort ausgeblendet.

17 Gedanken zu „Artikelbild bei den einzelnen Artikel ausblenden (WordPress Theme Twenty Seventeen)“

  1. Hallo Markus,
    Toller Tipp.
    kann es beim css editieren sein das, wenn es zu einem automatischen update des Themes kommt auch die css seite überschrieben wird und man dann erneut editieren muss?

    Ich weiß es nicht aber vielleicht weißt Du es oder jemand anderes.

    Grüße Lothar

    1. Servus Lothar,
      wenn du das CSS über den WordPress Customizer veränderst, dann sollte dieser Code bestehen bleiben, wenn es ein Theme-Update gibt. Das wäre ja der Grundgedanke dahinter 😉
      Oder andersrum gesagt:
      Wenn du in den Theme-CSS-Dateien was veränderst, dann werden diese (natürlich) bei einem Theme-Update durch die neuen Dateien überschrieben/ersetzt und somit sind deine Anpassungen futsch.
      Servus Markus

  2. Wir das Bild trotzdem noch geladen?
    Wäre schade, wenn sich das auf die Ladezeit auswirkt. Ein Bild zu laden, welches sowieso ausgeblendet wird.
    Danke für den Tipp, hat mir sehr geholfen!

    1. Guten Morgen Marc,
      ich geb dir recht, das Bild wird höchstwahrscheinlich schon geladen, da ich es ja dann nur ausblende.
      War in meinem Fall nicht so tragisch, dass es sich ja nur um Artikel-Bilder handelte und diese ja nicht so groß sind.
      Man könnte jetzt auch noch überlegen, ob es vielleicht grundsätzlich auch kein Problem vielleicht ist, da der Browser mit seinem Cache vielleicht eh doppelte Bilder nur einmal lädt. Aber da bin ich mir nicht ganz sicher.
      Wenns dich interessiert, was passiert, dann könntest du ja mal zum Beispiel mit dem Firefox nachschauen, was alles von der Seite geladen wird. Könnte mir vorstellen, dass das damit irgendwie geht. 😉
      Servus Markus

  3. Hallo Markus,

    dabei war ich so happy einen Beitrag gefunden zu haben, der genau mein Problem lösen sollte! Leider funktioniert das aber irgendwie nicht! Liegt das vielleicht daran, dass Twenty Seventeen mitlerweile andere Klassennamen benutzt oder wie kann das sein?

    Um überhaupt den Excerpt zu erstellen benutze ich das Plugin „Auto Excerpt everywhere“. In der Folge wird dann vor dem Auszug ein Thumbnail meines Beitragsbildes angezeigt, was toll ist. Leider wird aber über dem Thumbnail und dem Excerpt auch nochmal das Beitragsbild angezeigt. WordPress ist also von deinem Codeschnipsel gänzlich unbeeindruckt (ich habe ihn natürlich unter „Zusätzliches CSS“ im Customizer eingetragen)!

    Liegt das vielleicht an der Verwendung des Plugins? Wie hast du dieses Problem denn umfänglich gelöst nur noch einen Excerpt mit Thumbnail für deinen Beitrag auf der Startseite stehen zu haben?

    Für einen guten Tipp wäre ich sehr dankbar!

    Viele Grüße
    Andreas

    1. Servus Andreas,
      seitdem ich „damals“ im Januar 2018 das Problem für mich gelöst hatte, hatte ich dran auch nichts mehr gemacht und seither taucht bei mir auch kein zweites Beitragsbild mehr auf. Darum wundert es mich, dass es bei dir nicht funktioniert.
      Servus Markus

  4. Tja, damit funktioniert es leider auch nicht. Auto Excerpt Everywhere erstellt immerhin noch einen Thumbnail. Das macht Advances Excerpt leider auch nicht. Und auch die verschiedenen Einstellungen helfen da nicht weiter. Mist!

    1. Das ist schade. Versteh ich dich richtig, dass du von „Auto Excerpt Everywhere“ automatisch ein Beitragsbild erstellen lässt? Da geh ich den anderen Weg und bau bei Bedarf selber eines ein. Das ist mir mittlerweile lieber 😉

  5. „Auto Excerpt Everywhere“ nutzt ja das Bild, welches als Beitragsbild in den Optionen des Beitrags hinterlegt wird. Leider schaltet es aber nicht die Anzeige über das Template aus. Bei manchen Templates gibt es dafür extra einen Schalter, ob man das Bild anzeigen möchte oder nicht. Bei Twenty Seventeen aber leider nicht. Deshalb sehe ich das Bild einmal über dem Excerpt (nämlich vom Template angezeigt) und einmal vor dem Excerpt als Thumbnail (von „Auto Excerpt Everywhere“ generiert). Ich kriege also nur beides oder garnichts.

  6. Ich sehe jetzt, wie du das machst, bzw. wie „Advanced Excerpt“ das macht. Das gefällt mir allerdings nicht so gut (sorry, nichts gegen deine Seite, ich meine das Plugin! 😉 ). Mal hat man ein Bild, mal etwas Text, mal ein bisschen von beidem. Die einheitliche Erscheinung von „Auto Excerpt Everywhere“ gefällt mir da eigentlich besser, abgesehen von dem Manko mit dem 2. Bild.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.