Aggiungi un'immagine in primo piano su singoli post

Pubblicato: 2013-10-10

L'immagine in primo piano dell'archivio (anteprima del post) verrà estratta dall'immagine in primo piano indipendentemente da come la aggiungi nella schermata Modifica post.

L'immagine visualizzata prima o dopo il titolo del singolo post viene estratta dalla prima immagine inserita nel post, a meno che non venga rimossa.

Puoi rimuovere o modificare il codice che mostra un'immagine prima o dopo i titoli dei singoli post utilizzando uno degli snippet di codice in questa pagina.

Se aggiungi un'immagine come immagine in primo piano, verrà visualizzata nei tuoi archivi come miniatura del post e non come immagine in primo piano dopo il titolo del tuo singolo post.

Se non aggiungi un'immagine in primo piano, la prima immagine nel tuo post verrà visualizzata prima o dopo i titoli dei singoli post e nelle pagine di archivio.

In questo post, ti fornirò alcune righe di codice PHP che puoi semplicemente incollare alla fine del tuo file functions.php dei temi figlio.

Il codice ti consentirà di visualizzare l'immagine del tuo post, prima o dopo il tuo titolo sui singoli post.

posta l'immagine prima del singolo titolo

Dan ha posto questa domanda di recente:

Mi sono scervellato a cercare in giro, usando codice diverso trovato in questo forum e ho portato a creare un nuovo post.
Utilizzando Minimum Pro, vorrei semplicemente visualizzare l'immagine in evidenza di un post in una pagina "post singolo". Preferibilmente sopra il contenuto del testo. Ho trovato il codice su questo forum e l'ho messo in functions.php. Viene visualizzata l'immagine in primo piano, ma contemporaneamente cancellato il contenuto del testo. Quindi ovviamente sto sbagliando qualcosa.

Nota: utilizza l'ultimo frammento di codice PHP in questo post se stai eseguendo il vecchio markup XHTML e non HTML 5 poiché gli hook sono cambiati.

Mostra l'immagine in primo piano dopo il titolo

Questo codice mostra l'immagine dopo il titolo del tuo singolo post.

 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 ); }

Mostra l'immagine in primo piano prima del titolo

Questo codice mostra l'immagine prima del titolo del tuo singolo post.

 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 ); }

Visualizza l'immagine in primo piano su pagine statiche

Se vuoi che funzioni anche per singole pagine statiche, aggiungi semplicemente una pagina al codice in questo modo:

 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 ); }

Visualizza l'immagine in primo piano su pagine statiche e post singoli

Se vuoi che funzioni anche per pagine e post statici, aggiungi semplicemente una pagina al codice in questo modo:

 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 ); }

La posizione visualizzata dall'immagine in primo piano può essere determinata utilizzando il terzo parametro per la priorità di posizionamento.

Nel codice sopra si tratta semplicemente di cambiare il 3° parametro da 5 a 15.

Modifica la dimensione dell'immagine

Ecco un esempio di utilizzo di una dimensione grande in base alle impostazioni multimediali.

 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 ); }

Puoi anche utilizzare una qualsiasi delle altre dimensioni predefinite configurate in Impostazioni > Media.

miniatura
medio
larga
pieno

Puoi anche utilizzare qualsiasi dimensione personalizzata che hai aggiunto nel file delle funzioni.

Esempio:

portafoglio

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

Utilizzo dei vecchi hook di loop XHTML

Se stai ancora eseguendo XHTML e non hai ancora convertito in HTML 5, dovrai usare i vecchi Loop Hooks:

 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 ); }

Aggiunta di spazio tra titolo e immagine

Ecco alcuni esempi di codice CSS che puoi aggiungere alla fine del file style.css dei tuoi temi figlio prima del codice per Media Query che aggiunge un margine tra l'immagine in primo piano e il titolo della voce sui singoli post.

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

Usa questo esempio per le pagine:

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

Allinea l'immagine in primo piano (post-immagine) a destra

Puoi anche allineare le immagini del tuo post a destra.

Aggiungi semplicemente questo codice CSS prima delle tue query multimediali verso la fine del file style.css dei temi figlio:

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

Il codice sopra allineerà l'immagine che aggiungi come immagine in primo piano in tutti i singoli post a destra del tuo contenuto in modo che il suo testo sia avvolto in questo modo:

immagine del post

Puoi anche aggiungere la classe alignright al codice PHP invece di usare CSS.

 'class' => 'alignright'

Sostituisci semplicemente post-immagine nel codice PHP con alignright e il tuo testo avvolgerà la tua immagine sul lato destro del tuo contenuto.

Allinea l'immagine in primo piano (post-immagine) a sinistra

Puoi anche allineare le immagini in primo piano dei tuoi singoli post a sinistra.

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

Ed ecco il risultato:

galleggiante a sinistra

Puoi anche aggiungere la classe alignleft al codice PHP invece di usare CSS.

 'class' => 'alignleft'

Sostituisci semplicemente post-immagine nel codice PHP con alignleft e il tuo testo avvolgerà la tua immagine sul lato sinistro del tuo contenuto.

Nota : questo codice CSS si applica ai temi figlio di Genesis 2.0 HTML 5 e potrebbe non funzionare su altri temi che utilizzano una classe diversa per pubblicare immagini/immagini in primo piano.

Rimuovi un link href dall'immagine in primo piano

Un membro mi ha chiesto come rimuovere il collegamento dal codice, quindi eccolo qui:

Sostituisci semplicemente questa parte del codice:

 $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 );

Con questo:

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