Wordpress: Modifica NextGen Gallery

[Sbarello]

Ciao a tutti

Ho bisogno di una mano da qualcuno di voi super esperti.

Ho il sito di foto e ho installato il plugin NextGen Gallery in modo che mi visualizzi i thumbs cliccabili e non la foto grande.

Ho poi trovato QUESTO SITO, segnalato sul sito della NextGen Gallery, dove spiega come è possibile creare un riquadro attorno alla foto, diverso dal solito standard del plugin.

Per intenderci, da così:

a così per esempio:

Leggendo l'articolo di prima ( QUI ) non riesco a capire come fare.

Dice di inserire <SPAN> da qualche parte ( ma dove ??!! ) e di modificare "position:" ...

Per favore, aiutatemi a capire come fare !!!

Graaaazie.

A

[Ce]

Lo span va inserito all'interno del div che contiene la foto:

E poi "stilizzato" e posizionato tramite css (e delle immagini che vengono referenziate nel css).

Nella pagina che hai linkato puoi anche scaricare tutti gli esempi, oppure vai qui e dacci dentro di Firebug per leggere il css, dai che non è difficile

[Sbarello]

Ho provato con firebug ma nel caso specifico del sito dello sviluppatore lavoro su un .html definito, con posizione chiara, ovvero /demo/decorative-gallery/decorative-gallery-index.html.

Nel caso di un mio articolo, come ad esempio "http://www.alessandrobosio.com/2010/02/14/flashmob/" non so dove lavorare

Ho provato a vedere il CSS prima di tutto, per trovare se ci fosse il modo per fare la modifica lì e non farla su ogni foto ...

Poi ho pensato che fosse verosimile pensare che fosse da modificare un file della nextgen gallery, dal momento che per farla comparire nell'articolo metto solo [nggallery id=X template=sample5] e nient'altro che si avvicini al codice....

Ma anche lì niente ...

Torno a guardare

P.S. Ora, dal nulla, mi dice dirattamente "Rendering of template gallery-sample5.php failed"

[Ce]

Probabilmente userai un plugin allora... dovrei duplicare la struttura per verificare Cerca se ci sono dei file della gallery nella cartella wp-content/plugins!

[Sbarello]

Probabilmente userai un plugin allora... dovrei duplicare la struttura per verificare Cerca se ci sono dei file della gallery nella cartella wp-content/plugins!

No Ce, non c'è ... ahahaha ...

Scusami ...

Detto questo, sto provando a capire se posso agire direttamente sul plugin nextgen gallery, che, come vedi sopra, crea un riquadro. Se riuscissi a trovare il file immagine del riquadro, potrei sostituirlo e il gioco sarebbe fatto, ma per ora nada...

Work in progress insomma ...

E il forum non mi manda le notifiche di avvenute risposte ....

Graaaaazie

[Sbarello]

Aggiorno la questione ...

sono andato sul sito della nextgen gallery dove le immagini di una galleria hanno una cornice diversa ( QUI ).

Con firebug ho selezionato la foto con cornice ed ho ottenuto questo:

Allora sono andato a cercarmi il file nggallery.css e a quel punto sono andato a cercare "sample5"....

Bene, non ho nulla di tutto ciò ...

Il file nggallery del sito del plugin ha un sacco di righe in più, ognuna per la visualizzazione del plugin secondo il template....

Che faccio, aggiungo la stringa per il template 5 così come la vedo, e mi creo la cartella images dove inserisco la cornice che mi piace ?

Se è questo posso farlo ... resta il problema che non riesco a capire cove mettere il codice <span></span> ...

[pix]

tu l'immagine la metti in un div, o no?

quel div dell'immagine avrà una classe di stile, ad esempio "sample5".

dentro al div metti uno span vuoto <span></span> e nel css crei una classe ".sample5 span" che viene associata a tutti gli span contenuti nei div di classe "sample5".

in pratica questo sarebbe più o meno l'html di una singola immagine (la prima) della gallery (senza il link):

<div id="ngg-image-1" class="photo sample5" >
	<span></span>
	<img title="Cologne" alt="Cologne" src="thumbs/thumbs_cologne.JPG"  />
</div>

e questo il css relativo:

div {
  display: block;
}
.photo {
  float: left;
  margin: 10px;
  position: relative;
}
.sample5 span {
  background: url(images/round-corner.png) no-repeat;
  display: block;
  height: 120px;
  left: 6px;
  position: absolute;
  top: 5px;
  width: 170px;
}
.sample5 img {
  background: url(images/round-bg.gif) no-repeat;
  border: ;
  padding: 5px 6px 6px;
}
.photo img {
  border: 1px solid #CCC;
}

[Sbarello]

Ciao Pix 77, innanzi tutto grazie

Allora, la risposta alla tua domanda è no, ma faccio prima ...

Ho creato una test page ad hoc, in cui ho inserito la nextgen gallery tramite plugin con alcune foto.

L'indirizzo è QUESTO.

Ora , analizzando con firebug ottengo questo ( scusate le dimensioni ):

In azzurro riquadrata è la selezione di firebug, ovvero l'immagine

da cui evinco solo che l'immagine è in gallery/testgallery/ecc... ok, e fin qui ci sono.

Per questo motivo sono andato a cercarmi il file nggallery.css, in cui a questo punto inserisco il codice css che tu mi hai postato ...

Bene fin qui ... se non fosse che non so dove mettere il codice SPAN perchè io le foto non le posto tramite modifica dell'articolo, bensì tramite il plugin ...

Immagino lo span debba essere aggiunto a mano in un php o html, ecc ...

Sbaglio ?

Se no, in quale file lo metto e soprattutto dove trovo questo file ?

Non vorrei dire cavolate, correggetemi se così fosse ...

Comunque grazie

[Ce]

No Ce, non c'è ... ahahaha ...

Come non c'è, lo sto vedendo da qui, hai tutta una cartella!

Bene fin qui ... se non fosse che non so dove mettere il codice SPAN perchè io le foto non le posto tramite modifica dell'articolo, bensì tramite il plugin ...

Immagino lo span debba essere aggiunto a mano in un php o html, ecc ...

Sbaglio ?

Se no, in quale file lo metto e soprattutto dove trovo questo file ?

Non vorrei dire cavolate, correggetemi se così fosse ...

Comunque grazie

Adesso non ho tanto tempo, ma prova a inserire la riga

<span></span>

Nel file gallery.php nella cartella view della cartella del plugin, sotto la riga 42.

[Sbarello]

Grazie Ce ...

Ho provato ma non ha sortito effetto .... vedo cosa riesco a combinare o se trovo soluzioni alternative ...

Grazie anche a te Pix77.

A :o

[Sbarello]

Ci risiamo ... non mi do per vinto ...

Allora, ho trovato la linea che comanda la dimensione del frame attorno alla foto e il colore:

In questo caso specifico ho provato a modificarlo con firebug mettendo come colore un grigio scuro e uno spessore maggiore. Peccato che il file zoran #6 in cui trovare la riga 133 non esista ...

Sto provando a cercare nel css del plugin per la visualizzazione della galleria per vedere se riesco a modificargli i bordi ... già poter scegliere dimensione, colore e bordi arrotondati non sarebbe male !!!

[pix]

quello che hai trovato è lo stile del bordo dell'immagine, e non puoi applicarci gli effetti che vorresti.

ma la tua pagina è online da qualche parte?

basta che metti qui il link e ad aiutarti ci vuole un minuto....

[Sbarello]

Eh si che è online :P

Ti linko l'articolo in cui qui inserito l'unica galleria per ora:

QUI.

Quello che vorrei capire è se si possono inserire dei bordi customizzati ( come quelli dell'articolo da cui è partita la discussione ) alla galleria che wordpress crea con la normale funzione "galleria" ....

Da quello che capisco dell'articolo originario dovrebbe potersi fare, ma continuo a non capir come ...

Grazie, buon sabato :P

[pix]

Prova così:

trova il file

http://www.alessandrobosio.com/wp-content/themes/autofocus/style.css

e aprilo con un editor di testo.

vai alla fine dove c'è il paragrafo

/* Wordpress 2.5+ Shortcode Styles
------------------------------------------ */

e dopo lo stile

div.gallery dl dd{margin-left:0;}

in una nuova riga (beh in realtà 4 nuove righe) inserisci questo:

div.gallery .gallery-icon {
padding:5px;
background-image: url('sfondo.jpg'); }

il codice qui sopra devi modificarlo in base alla tua necessità, ovvero:

- sfondo.jpg è l'immagine (vuota al centro) con la cornicetta che vuoi mettere;

- il padding dipende dall'immagine sfondo.jpg. Se ad esempio l'immagine dello sfondo con la cornice è grande 85x85, e le tue anteprime sono 75x75, il padding sarà 85-75=10 diviso due =5 pixel.

per salvare le immagini di sfondo basta che vai sul sito che avevi linkato, clicchi destro sulla cornice e salvi l'immagine.

poi la carichi da qualche parte insieme al sito e metti l'url corretta all'immagine (relativa o assoluta, come preferisci).

vediamo se così funziona...in caso contrario, carica uno screenshot del risultato che vediamo di capire che succede.

[Sbarello]

Prova così:

trova il file

http://www.alessandrobosio.com/wp-content/themes/autofocus/style.css

e aprilo con un editor di testo.

vai alla fine dove c'è il paragrafo

/* Wordpress 2.5+ Shortcode Styles
------------------------------------------ */

e dopo lo stile

div.gallery dl dd{margin-left:0;}

in una nuova riga (beh in realtà 4 nuove righe) inserisci questo:

div.gallery .gallery-icon {
padding:5px;
background-image: url('sfondo.jpg'); }

il codice qui sopra devi modificarlo in base alla tua necessità, ovvero:

- sfondo.jpg è l'immagine (vuota al centro) con la cornicetta che vuoi mettere;

- il padding dipende dall'immagine sfondo.jpg. Se ad esempio l'immagine dello sfondo con la cornice è grande 85x85, e le tue anteprime sono 75x75, il padding sarà 85-75=10 diviso due =5 pixel.

per salvare le immagini di sfondo basta che vai sul sito che avevi linkato, clicchi destro sulla cornice e salvi l'immagine.

poi la carichi da qualche parte insieme al sito e metti l'url corretta all'immagine (relativa o assoluta, come preferisci).

vediamo se così funziona...in caso contrario, carica uno screenshot del risultato che vediamo di capire che succede.

Intanto sei il mio idolo !!! :P

Qualcosa comincia a muoversi .... cioé, penso ci sia da correggere giusto una baggianata.

L'inditizzo della pagina è sempre lo stesso ( QUI ) ed il risultato è questo :

In pratica mi ripete l'immagine di cornice un sacco di volte... ( l'ho fatta con sfondo centrale nero così si capisce meglio )

Come evito questo problema ?

Graaaaaaaaaaaaaaaaazie !!!

Vedo la fine del tunnel .... una luce, laggiù, in fondo .... :P

[Sbarello]

RISOLTOOOOOOOOOOO !!!

Mi sono andato a cercare i comandi del css e ci ho aggiunto "background-repeat: no-repeat;" ...

Risultato :P

Mitico tu ... mitico Ce ... mitici tutti !!!

[pix]

bene

[Sbarello]

.... ....

Ma è mai possibile che Internet Explorer dia sempre problemi ?

Per scrupolo ho testato il sito con IE8 ... le pagine si vedono bene, le gallerie sono ok, peccato che quando clicco su un thumb, piuttosto che vedere l'immagine come succede su safari, firefox, chrome e tutti gli altri ottengo questo ( ovvero gli angoli del riquadro contenente la foto, senza la foto dentro !!!! ) :

Incredibile !!!

Possibile che si debba sempre fare la versione ad hoc per IE ??!!

Dove sta l'errore ?

[pix]

senza la "nostra" modifica, su IE funziona?

[Sbarello]

Provato, cancellato codice, testato su IE8 e non cambia nulla

[pix]

Provato, cancellato codice, testato su IE8 e non cambia nulla

in tal caso devi chiedere su un forum dedicato a wordpress....mi pare strano che solo tu abbia questo problema con il suddetto plugin.

[Sbarello]

Ho scritto allo sviluppatore del plugin della galleria per vedere se sa come mai ...

Aspetto

Per ora grazie

[Sbarello]

Ho scoperto una cosa splendida ...

Con IE anche il sito dello sviluppatore del plugin "JQuery lightbox" non viene visualizzato ...

Dubito otterrò aiuto da lui, se nemmeno si è reso conto del problema sul suo stesso sito ...

[pix]

in effetti...

cambia plugin e tanti saluti....al massimo, si ricomincia da capo

[Sbarello]

cambia plugin e tanti saluti....al massimo, si ricomincia da capo

Disgraziato !!!

Ho risolto .... ora non mi resta che finire di aggiornare le gallerie ....

Uff che fatica .... :clap:

[pix]

buon lavoro, a quest'ora è bello sapere di non essere l'unico ad aver ancora roba da fare

[Sbarello]

Buon Natale