Beitragsbild zu einzelnen Beiträgen hinzufügen

Ihr Beitragsbild aus dem Archiv (Beitragsminiaturbild) wird aus dem Beitragsbild gezogen, unabhängig davon, wie Sie es auf Ihrem Bildschirm „Beitrag bearbeiten“ hinzufügen.

Das Bild, das vor oder nach dem Titel Ihres einzelnen Beitragseintrags angezeigt wird, wird aus dem ersten Bild gezogen, das Sie in den Beitrag einfügen, es sei denn, Sie entfernen es.

Sie können den Code, der ein Bild vor oder nach den Titeln Ihrer einzelnen Posts anzeigt, mithilfe eines der Code-Snippets auf dieser Seite entfernen oder ändern.

Wenn Sie ein Bild als Beitragsbild hinzufügen, wird es in Ihren Archiven als Post-Thumbnail und nicht als Beitragsbild nach dem Titel Ihres einzelnen Beitrags angezeigt.

Wenn Sie kein Beitragsbild hinzufügen, wird das erste Bild in Ihrem Beitrag vor oder nach den Titeln Ihrer einzelnen Beitragseinträge sowie auf Ihren Archivseiten angezeigt.

In diesem Beitrag stelle ich Ihnen einige Zeilen PHP-Code zur Verfügung, die Sie einfach am Ende der Datei functions.php Ihres Child-Themes einfügen können.

Der Code ermöglicht es Ihnen, Ihr Beitragsbild vor oder nach Ihrem Titel in einzelnen Beiträgen anzuzeigen.

Dan stellte diese Frage kürzlich:

Ich habe mir den Kopf zerbrochen, habe herumgesucht, verschiedene Codes verwendet, die in diesem Forum gefunden wurden, und dazu geführt, dass ich einen neuen Beitrag erstellt habe.

Mit Minimum Pro möchte ich einfach das Beitragsbild eines Beitrags auf einer „einzelnen Beitrags“-Seite anzeigen. Vorzugsweise über dem Textinhalt. Ich habe Code in diesem Forum gefunden und ihn in functions.php eingefügt. Es wird das Beitragsbild angezeigt, aber gleichzeitig der Textinhalt ausgelöscht. Also mache ich offensichtlich etwas falsch.

Hinweis: Bitte verwenden Sie das letzte PHP-Code-Snippet in diesem Beitrag, wenn Sie das alte XHTML-Markup und nicht HTML 5 ausführen, da sich die Hooks geändert haben.

Vorgestelltes Bild nach Titel anzeigen

Dieser Code zeigt das Bild nach Ihrem einzelnen Beitragstitel an.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Vorgestelltes Bild vor Titel anzeigen

Dieser Code zeigt Ihr Bild vor Ihrem einzelnen Beitragstitel an.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Vorgestelltes Bild auf statischen Seiten anzeigen

Wenn Sie möchten, dass dies auch für statische Einzelseiten funktioniert, fügen Sie einfach Seite wie folgt zum Code hinzu:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Präsentiertes Bild auf statischen Seiten und einzelnen Beiträgen anzeigen

Wenn Sie möchten, dass dies auch für statische Seiten und Beiträge funktioniert, fügen Sie einfach eine Seite wie folgt zum Code hinzu:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Die Position, an der Ihr Beitragsbild angezeigt wird, kann mit dem dritten Parameter für die Positionierungspriorität bestimmt werden.

Im obigen Code geht es einfach darum, den 3. Parameter von 5 auf 15 zu ändern.

Bildgröße ändern

Hier ist ein Beispiel für die Verwendung einer großen Größe gemäß Ihren Medieneinstellungen.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Sie können auch andere Standardgrößen verwenden, die unter „Einstellungen“ > „Medien“ konfiguriert wurden.

• Miniaturansicht
• Mittel
• groß
• voll

Sie können auch benutzerdefinierte Größen verwenden, die Sie in Ihrer Funktionsdatei hinzugefügt haben.

Beispiel:

Portfolio

 add_image_size( 'portfolio', 540, 340, TRUE );

Verwendung alter XHTML-Loop-Hooks

Wenn Sie noch XHTML ausführen und noch nicht zu HTML 5 konvertiert haben, müssen Sie die alten Loop Hooks verwenden:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Hinzufügen von Leerzeichen zwischen Titel und Bild

Hier ist ein Beispiel-CSS-Code, den Sie am Ende der style.css-Datei Ihres untergeordneten Themas vor dem Code für Medienabfragen hinzufügen können, der einen Rand zwischen Ihrem vorgestellten Bild und Ihrem Eintragstitel bei einzelnen Beiträgen hinzufügt.

 .single .post-image { margin-bottom: 30px; }

Verwenden Sie dieses Beispiel für Seiten:

 .page .post-image { margin-bottom: 30px; }

Vorgestelltes Bild (Post-Image) rechts ausrichten

Sie können Ihre Beitragsbilder auch rechtsbündig ausrichten.

Fügen Sie einfach diesen CSS-Code vor Ihren Medienabfragen am Ende Ihrer style.css-Datei für untergeordnete Themen hinzu:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

Der obige Code richtet das Bild, das Sie als Beitragsbild hinzufügen, in allen einzelnen Beiträgen rechts neben Ihrem Inhalt aus, sodass der Text wie folgt umbrochen wird:

Sie können auch die alignright-Klasse zum PHP-Code hinzufügen, anstatt CSS zu verwenden.

 'class' => 'alignright'

Ersetzen Sie einfach post-image im PHP-Code durch alignright und Ihr Text wird auf der rechten Seite Ihres Inhalts um Ihr Bild herumgeführt.

Vorgestelltes Bild (Post-Bild) linksbündig ausrichten

Sie können die vorgestellten Bilder Ihrer einzelnen Beiträge auch links ausrichten.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

Und hier ist das Ergebnis:

Sie können auch die alignleft-Klasse zum PHP-Code hinzufügen, anstatt CSS zu verwenden.

 'class' => 'alignleft'

Ersetzen Sie einfach post-image im PHP-Code durch alignleft und Ihr Text wird auf der linken Seite Ihres Inhalts um Ihr Bild gewickelt.

Entfernen Sie einen href-Link aus dem Beitragsbild

Ein Mitglied hat mich gefragt, wie man den Link aus dem Code entfernt, also hier ist er:

Ersetzen Sie einfach diesen Teil des Codes:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

Mit diesem:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

zusammenhängende Posts

• 2 Möglichkeiten, verschiedene ausgewählte Bilder für einzelne Beiträge und Archivseiten zu verwenden
• Eintragstitel über Beitragsbild in einzelnen Beiträgen
• Kontrollkästchen zum Hinzufügen oder Entfernen von hervorgehobenen Bildern auf einzelnen Beiträgen oder Seiten
• Ausgewähltes Bild mit benutzerdefinierter URL verknüpfen
• Passen Sie die Anzeige von Beitragsbildern in einzelnen Beiträgen an
• Fügen Sie in jedem Thema ein ausgewähltes Bild vor dem Inhalt hinzu
• Legen Sie für jede Kategorie ein Fallback-Feature-Bild fest