NextGEN Gallery header

Il plugin NextGEN Gallery offre la possibilità  di inserire nel proprio tema una header animata. La procedura in sé non é particolarmente complessa sebbene una buona riuscita dell’intera operazione dipenda principalmente dalla struttura del tema in uso. Come primo passo, sarà  necessario creare uno slideshow con le immagini che vorremo mostrare nella header ricordando di mantenere inalterate le dimensioni del file immagine originale.

Prendiamo ora come esempio un tema di default per WordPress dove la header misuri in larghezza 760 pixel e 200 in altezza (valori width/height)…

wpdefault1.png

Passo 1

…e creiamo per nostra comodità  una cartella allocando in essa la serie di file immagine con estensione .jpg che verranno utilizzati in seguito per la realizzazione dello slideshow con il plugin NextGEN Gallery.

Prepariamo ora una nuova galleria dalla Bacheca di WP:

  1. Nuova Galleria (creazione sotto Galleria/Aggiungi Galleria)
  2. Impostazione setting slideshow (sotto Galleria/Opzioni/Slideshow)
  3. Upload file cartella come archivio .zip immagini (sotto Galleria/Aggiungi Galleria/Carica un file ZIP)

demo

Passo 2

Ad operazione compiuta, avremo a disposizione la ID di uno slideshow (pubblicabile via tag nei post/pagine del sito) non ancora pronto per essere inserito nella header del nostro tema. Il passo successivo sarà  dunque quello di estrarre il codice embed.

id

Passo 3

Andiamo ora nella sezione “Scrittura” del blog e prepariamo la bozza di un nuovo post inserendo la tag dello slideshow realizzato in precedenza, salviamo senza pubblicare e clicchiamo infine su “Anteprima”.

base_header.png

Passo 4

Per estrarre il codice, clicchiamo con il tasto destro del mouse a lato dello slideshow e selezioniamo dal menu la voce “Visualizza sorgente selezione”; ad operazione compiuta, apparirà  una finestra con l’embed flash dello slideshow pronto per essere copiato ed inserito nel file header.php del tema in uso come segue:

head_emb.jpg

Installazione

Giunti a questo punto, il tutto dipende dalla configurazione del proprio tema: in genere, la tag di riferimento della header sulla quale apportare le modifiche é la seguente:

div.png

Note

Vedi anche:

  1. Inside Plugins: NextGEN Gallery
  2. Random Header Images per WordPress
  3. Inside Plugins: Test Theme Drive
  4. Inside Plugins: NextGEN Gallery Polaroid addon

articoli potenzialmente correlati (generati in automatico):

  1. Inside Plugins: NextGEN Gallery Polaroid addon
  2. Inside Plugins: NextGEN Gallery SimpleViewer
  3. NextGEN Gallery

CharmingPress trasforma in un principe il tuo frog blog!
Servizi web "on-demand" e “Plug & Play” per una rapida soluzione professionale a tutte le tue necessità WordPress.

PARTITA IVA: 01538740083 - Registro delle Imprese di Imperia: REA – 134874

Contattaci subito per un preventivo gratuito

Commenti

  1. Giacomo scrive:

    Gent.mo Gianni
    E’ da poco che uso WP, ma ho trovato in NGG il plugin che fa al caso mio, vorrei inserire una galleria formata da 4 o più immagini in un DIV in home page, credo di aver fatto tutto come si deve ma ancora non mi si visualizza, che faccio?
    Il codice è questo:

    Ciao e grazie
    Giacomo

    • gidibao scrive:

      Ciao Giacomo, stai lavorando in locale? diversamente, potresti indicarmi un link al tuo sito? Grazie.

      P.S.
      Come avrai notato, il codice che hai inserito non c’è… Inserisci il codice con questa sintassi:

      [ php]inserisci qui il tuo codice[/php ]

      senza lo spazio vuoto nelle parentesi quadre di apertura e chiusura.

      • Giacomo scrive:

        Ciao Gianni
        Il sito è ora accessibile all’indirizzo http://www.sprecozero.it, la pagina su cui sto lavorando è un’alternativa all’attuale home page (http://www.sprecozero.it/nuova-pagina/), come vedrai a destra del div “box_news”, lasciato volontariamente non formattato e in colore arancione è presente uno spazio bianco (div “box_slider”) nel quale vorrei inserire la gallery di immagini, il codice è questo:

         get_header(); ?>
        
        	<div id="wrapper_home">
            	<div id="box_news">
                <?php get_featured_posts(); ?>
                </div><!--DIV per i post-->
                <div id="box_slider">
        
                </div><!--qui vorrei inserire la gallery NGG-->
                <div id="box_bottom">
                </div><!-- div n.3-->
        	</div><!-- contenitore generale-->
        
        <?php get_sidebar(); ?>
        <?php get_footer(); ?> 

        Grazie per l’aiuto
        Giacomo

        • Giacomo scrive:

          Gent.mo Gianni
          Eureka, ho trovato la risposta in uno dei tuoi post precedenti, mi ero un pò “incartato”, cercando di utilizzare NGG custom field, ma in realtà la soluzione era piuttosto semplice, a volte basta poco, se vai a vedere all’indirizzo indicato vedrai che ho inserito la gallery, ora non mi rimane che andare di CSS.
          Grazie comunque, soprattutto per il tuo “illuminante” sito.
          Ciao
          Giacomo

          • gidibao scrive:

            Ciao Giacomo, ottima notizia!!!

            Per il lavoro sul foglio di stile, utilizza Firefox con il componenete aggiuntivo Firebug ;-)

            Buon fine settimana,
            Gianni

  2. andrea scrive:

    che ti devo dire… sei bravissimo!
    grazie mille, funziona tutto alla perfezione!
    appena lo metto on-line ti mando il link!

    grazie per l’aiuto e la disponibilità, mi hai risolto un problemone!

    andrea

  3. gidibao scrive:

    Ciao Andrea, fai così:

    1. crea una galleria (immagini a 1000x288px)

    2. Bacheca/Galleria/Opzioni/Presentazione ed imposta “Dimensione predefinita (L x A)” a 1000x288px

    3. apri il file “header.php” e rimuovi la riga 94

    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    4. inserisci alla riga 94

    <div id="middlepic">
    <?php
    if (function_exists("nggSlideshowWidget"))
    { nggSlideshowWidget(1,1000,288); }
    ?>
    </div>

    NOTA: laddove il numero “1″ corrisponde alla ID della galleria, il “1000″ alla larghezza e “288″ alla altezza.

    5. Bacheca/Aspetto/Testata alla voce “Immagine predefinita” seleziona una immagine header qualsiasi e salva.

    Fammi sapere…
    Gianni

  4. andrea scrive:

    CIAO!!
    GRAZIE PER LA RISPOSTA…PURTROPPO IL SITO CHE STO COSTRUENDO E’ IN LOCALE…

    TI PROVO AD INCOLLARE IL MIO HEADER.PHP

    GRAZIE MILLE!
    [...]

  5. gidibao scrive:

    Ciao Andrea, vedo cosa posso fare.
    Nel frattempo, potresti inviarmi per cortesia un link al sito dove vorresti inserire la header animata? Grazie.

    Gianni

  6. andrea scrive:

    Ciao!
    riprendo questo post dopo un po’ di tempo…veramente ottimo! complimenti.

    Mi potresti aiutare in una cosa? dove incollo il codice nel tema Twenty Eleven 1.2 (quello preimpostato su wordpress)…nn riesco a “trovare la posizione giusta!”

    grazie mille!

  7. gidibao scrive:

    Ciao IlDuca,
    grazie! :-)

    La header attualmente in uso per gidibao.net funziona correttamente grazie alla versione 0.99.1 di NGG e la 2.6.3 di WP (ok anche per la 2.6.2 precedente).

    La header funzionava con le versioni precedenti ed ora no, oppure la stai installando per la prima volta?
    Nel mio caso, durante/nonostante tutti gli upgrade degli ultimi 9 mesi (WP e NGG), la header ha sempre funzionato propriamente a parte una sola volta nella quale l’aggiornamento del plugin metteva in automatico la barra di navigazione nello slideshow. La soluzione fu quella di modificare il codice embed dello slide settando su false la funzione.

    Qualora la tua fosse fosse una nuova integrazione:
    1. hai avuto l’occasione di verificare il codice embed dello slide?
    2. hai inserito e posizionato correttamente in header.php il codice embed?

    Poiché l’immagine della header viene regolata da un identificatore nel CSS del tema, il codice embed andrà  quindi inserito nel file header.php del tuo tema avvolto da div id="header" sostituendo così di fatto il codice attuale in uso che chiama l´immagine nella header.

    Fammi sapere…

    Gianni ;-)

  8. IlDuca scrive:

    Articolo veramente interessante!
    tuttavia non riesco a far funzionare lo slideshow nell’header con l’aggiornamento automatico del plugin nextgen alla versione 0.99.1, nਠcon wordpress 2.6.2 né con l’ultima versione 2.6.3. ti risulta qualcosa?
    ciao grande

  9. gidibao scrive:

    Ciao honeymoonchild,
    vai nel file header.php del tuo tema dove hai inserito il codice embed flash dello slideshow.
    Cerca shownavigation=true e modificalo sostituendo di fatto il solo comando “true” con “false“.
    Ad operazione compiuta, salva le modifiche a header.php e svuota la cache del browser per poter visualizzare il tuo slideshow senza la barra di navigazione ;-)

    Fammi sapere…

    Gianni

  10. honeymoonchild scrive:

    ciao ho un piccolo problema: non riesco a togliere la barra di navigazione che ਠpresente sulla slideshow:

    http://www.queensfoggia.net

    come posso fare? grazie in anticipo :)

  11. gidibao scrive:

    Ottima notiza grangas! ;-)

    Non ho mai provato due formati diversi. Nella mia esperienza diretta posso dire che il plugin riesce a gestire funzioni diverse in pi๠sideshow (tipo background, loader, etc.)

    Fammi sapere. Sarebbe interessate!!!

    Gianni :-)

  12. grangas scrive:

    Ho fatto un pò di prove e sembra andare :)
    Se metto lo slideshow nell’header in formato ad esempio 760×200 poi posso mettere altri slideshow inelle pagien del sito con formati pi๠piccoli (es 300×200)?

    Per il link vedo cosa posso fare, su altri miei siti sicuramente apparirà  presto :)

  13. gidibao scrive:

    Con Flock ad esempio, lo slideshow della tua sidebar mostra il codice (vedi qui). Prova con quello…

    Grazie per il link ;-)

    Fammi sapere…

  14. grangas scrive:

    Stesso problema sia con FF che con IE anche se messo in coda al testo di una pagina già  presente, il sito che stò realizzando ਠhttp://www.marmoedile.com

  15. gidibao scrive:

    Salve grangas,
    prova ad inserire momentaneamente lo slideshow in un post che hai già  pubblicato in precedenza. Fammi sapere…
    Usi FireFox?

    PS
    Metti il link al tuo sito ;-)

  16. grangas scrive:

    Salve, ho un problema :( ho scritto un post con solo il tag, ma quando lo vado a vedere in anteprima per poi estrarre il codice mi appare la scritta “The Flash Player and a browser with Javascript support are needed..” sul mio pc java e flash sono aggiornati all’ultima versione.

    Dove stà  l’errore?
    Grazie!!!

Inserisci il tuo commento

*