Un utente ha chiesto
Categoria: Cerauno di WordPress
Domanda: Sposta l’immagine in primo piano in articoli unici

Ciao,
Ho trovato solo un riferimento all’immagine in primo piano nei file del tema e cambia il modo in cui le immagini in primo piano vengono visualizzate come miniature nella pagina dell’indice, non nelle pagine dei post.
Vorrei spostare le immagini in primo piano sulle singole pagine dei post (usando un tema figlio) in modo che appaiano sotto i titoli dei post, anziché sopra. Non sono riuscito a trovare un modo per farlo. Qualcuno ha qualche idea?
Grazie!

  • Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Le immagini presentate sono richiamate da header.php:

    <?php if ( is_single() || is_page() && has_post_thumbnail() ) : ?>
      <div class="featured-header-image">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <?php the_post_thumbnail( 'cerauno-header' ); ?>
        </a>
      </div><!-- .featured-header-image -->
    <?php endif; ?>

    Non so quanto tu abbia familiarità con PHP, ma quello che dice è “se è un singolo post o una pagina statica E il post o la pagina ha un’immagine in primo piano, mostra immagine in primo piano”.

    Quindi vorrai anche guardare single.php e template-parts / content-single.php.

    Se hai bisogno di consigli più specifici oltre a questo, fammi sapere!

    (@voipben)

    Grazie Caterina! Speravo che potessi vederlo perché hai risolto così tante altre domande.
    Questo è molto utile, poiché avevo perso il riferimento all’intestazione. Tuttavia, non vedo nulla in single.php o content-single.php che attualmente chiama l’immagine in primo piano (questi sono stati i primi posti in cui ho cercato). Capisco come header.php chiami l’immagine, ma non capisco davvero come posso farlo sotto il titolo del post, piuttosto che sopra.
    Potresti darmi un altro indizio?
    Grazie ancora.

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Tuttavia, non vedo nulla in single.php o content-single.php che attualmente chiama l’immagine in primo piano (questi sono stati i primi posti in cui ho cercato).

    Ok, al momento non stanno chiamando l’immagine selezionata: devi rimuovere la chiamata dell’immagine selezionata da header.php e spostarla dove vuoi in content-single.php invece. 🙂

    Se sei ancora bloccato fammelo sapere e posso farlo funzionare sul mio sito di prova e aiutarti con il codice esatto di cui avrai bisogno!

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Solo per chiarire un po’, dovrai rimuovere la chiamata alle immagini in primo piano solo per quanto riguarda is_single() di header.php e lascia il resto, quindi cambia:

    if ( is_single() || is_page() && has_post_thumbnail() ) :

    a

    if ( is_page() && has_post_thumbnail() ) :

    Questo lascerà le immagini in primo piano ancora visualizzate sulle pagine.

    (@voipben)

    Ha fatto il trucco! Grazie mille per aver trovato il tempo di spiegarmi così chiaramente. (Non sono ancora sicuro di come WP sapesse dove mettere l’immagine in primo piano chiamandola nell’intestazione, ma capisco il resto.)
    Sei il migliore.

    (@voipben)

    Ho una domanda correlata sulle immagini in primo piano: potresti dirmi dove sono impostate le dimensioni delle immagini in primo piano? Pensavo fosse in functions.php, ma la modifica della dimensione delle immagini sembra non avere alcun effetto sulle miniature o sulle immagini intere. (Vorrei evitare il ridimensionamento su index.php, poiché sfoca le immagini, e ho anche notato che l’inserimento dell’immagine in content-single.php si traduce in una dimensione diversa rispetto al modulo header.php.)
    Grazie ancora.

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Vedrò questo in modo più dettagliato, ma nel frattempo, potresti fornire un link al tuo sito in modo che possa vedere dove hai posizionato le immagini in primo piano su post unici? Grazie!

    (@voipben)

    Grazie ancora Caterina. Penso di capire. Apprezzo tutto l’aiuto.

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Sono contento di sentire che hai capito bene.

    Le dimensioni delle immagini selezionate sono definite nella funzione di configurazione del tema in functions.php qui:

    add_theme_support( 'post-thumbnails' );
    add_image_size( 'cerauno-home', 900, 300, true );
    add_image_size( 'cerauno-header', 1400, 400, true );

    Se hai ancora bisogno di aiuto, potresti fornire un link al tuo sito o non è ancora attivo? Mi piacerebbe davvero vedere le tue modifiche in prima persona in modo da poter consigliare il modo migliore per modificare le immagini mostrate in modo che vengano visualizzate correttamente sul tuo sito. Potrebbe essere necessario apportare sia modifiche CSS che funzioni nel tema figlio per farlo. Grazie!

    (@voipben)

    Ok, questo è quello che avevo cambiato, ma non sembra che le dimensioni dell’immagine siano costantemente cambiate per le miniature su index.php. (Le immagini mostrate su una singola pagina vanno bene e sembrano un po’ ridimensionate a causa dei contenitori div, che posso sistemare facilmente.) Hai anche indovinato correttamente: il sito non è ancora accessibile pubblicamente.
    Grazie ancora! Se hai qualche idea che 900 × 300 non sia influenzato da ciò che è in functions.php fammi sapere, ma in caso contrario, va bene così com’è.

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Per sovrascrivere la dimensione dell’immagine selezionata del tema predefinito, questa funzione va nel file functions.php del tuo tema figlio:

    function cerauno_child_featured_content() {
    	add_image_size( 'cerauno-header', '600', '300' );
    }
    add_action( 'after_setup_theme', 'cerauno_child_featured_content', 11 );

    (Naturalmente, puoi modificare 600 e 300 in qualsiasi valore tu preferisca per larghezza e altezza, questo è solo un esempio.)

    E poi lo metti nel CSS del tuo tema figlio, cambiando di nuovo 600 in qualsiasi valore tu voglia per la tua larghezza:

    .featured-header-image img {
        height: auto;
        width: 600px;
        max-width: 600px;
    }

    Questa combinazione funziona per me sul mio sito di prova. Non so come operi sul tuo sito, ma fammi sapere se questo aiuta!

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Tieni presente che ciò influirà sulle immagini in primo piano sui post del tuo blog e sulle normali immagini di intestazione poiché il tema utilizza la stessa funzione per entrambi: ricordi come erano le immagini in primo piano nel file di intestazione del tema? 🙂

    (@voipben)

    È così gentile da parte tua, Catherine. Cercherò di tenerti aggiornato. Grazie!

    (@voipben)

    Ciao – funziona alla grande per singoli post e pagine. Tuttavia, ciò non influisce affatto sulle miniature delle immagini mostrate su index.php. Mi chiedo se c’è un modo per definire la dimensione di questi, in quanto sono quelli che sono stranamente distorti. sembra essere governato da .img.attachment-cerauno-home.wp-post-image, ma provare a impostarne i valori in CSS non aiuta. (Sui post/pagine la classe è la stessa, ma cerauno-featured, invece di cerauno-home.)

    Grazie ancora!

    Moderatore

    (@zoonini)

    Ingegnere automatico della felicità

    Di niente!

    Tuttavia, ciò non influisce affatto sulle miniature delle immagini mostrate su index.php. Mi chiedo se c’è un modo per definire la dimensione di questi, in quanto sono quelli che sono stranamente distorti.

    Hmm, sul mio sito di prova le immagini non sembrano essere distorte nella pagina del blog.

    Detto questo, è qui che viene impostata la dimensione delle immagini in primo piano della homepage (blog):

    add_image_size( 'cerauno-home', 900, 300, true );

    Puoi provare a creare una seconda funzione, simile a quella che ho fornito sopra, che indirizzi separatamente le immagini mostrate nell’indice del blog. Dovresti quindi aggiungere CSS di accompagnamento, come ho fatto sopra per le immagini di intestazione. Vuoi provare e dirmi come va?

Hai risolto il tuo problema?

0 / 0

Lascia un commento 0

Il tuo indirizzo email non sarà pubblicato. Required fields are marked *