Come aggiungere descrizioni colorate sopra alle immagini di Blogger.

Come mostrare una descrizione o didascalia su sfondo colorato sopra alle foto di Blogger, fissa o che compare al passaggio del cursore.

Gli utenti di Blogger possono aggiungere delle didascalie sotto alle foto pubblicate con un testo che ne illustri il significato. Per visualizzare una didascalia sotto a una immagine la si seleziona dopo averla inserita tramite l'Editor, si clicca su Aggiungi Didascalia quindi si digita il testo sostituendolo a quello che si visualizzerà sotto la foto.

In pratica viene utilizzato il codice di una tabella di due righe e una colonna e quindi con due celle. L'aspetto della didascalia non è il massimo ma si può personalizzare il testo nei colori e nelle dimensioni.

Si può addirittura creare una galleria di foto con le didascalie solo che tale galleria non è responsive. In un prossimo articolo vedrò se riesco a risolvere il problema per realizzare una Galleria di Immagini Responsive con Didascalie. In questo post molto più modestamente illustrerò come mostrare una descrizione sopra alla immagine. La descrizione sulla foto si differenzia dalla didascalia proprio per la sua posizione.

PUBBLICARE NEI SERVER DI BLOGGER LE IMMAGINI DA UTILIZZARE

Per questa personalizzazione occorre avere il link diretto delle immagini e questo non è più possibile ottenerlo in modo semplice da Google Foto anche se ci sono almeno quattro metodi per poterlo ricavare. Si può risolvere pubblicando un post retrodatato con le immagini da utilizzare quindi cliccarci sopra con il destro del mouse e scegliere Copia indirizzo dell'immagine. Successivamente si può anche eliminare il post pubblicato perché le immagini resteranno comunque nei server. Più informazioni possono essere trovate nel post che ho pubblicato su come postare immagini su Blogger.

Eventualmente le immagini possono anche essere ridimensionate agendo sull'URL. Per esempio in questo URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWL60-2CgI6YhAgHWvGCUhq5qeBCpMQNZ_YwspCieZbhKQmbQym3B3_Xz4lr_VZ64yeiLAQBlZQwYsZ4cBOjkmj5rLwq0fmOSprckLo3Y2mJnp2mO4qHipJ-HUsT26qpp4TrUi2qfX4TA/s1600/cavalli.jpg

possiamo sostituire s1600 con s540 per avere una immagine larga 540 pixel che mantenga le stesse proporzioni.

COME AGGIUNGERE UNA DESCRIZIONE SEMPRE VISIBILE

Con questo sistema la descrizione sarà sempre visibile sopra alla foto stessa. Se abbiamo intenzione di mostrare lo stesso stile di descrizione in più di una immagine conviene incollare il CSS nel modello mentre se la volessimo usare solo per una immagine allora il codice del CSS può essere incollato nel post comprendendolo tra i tag <style> e </style>.

Nel caso si decida di incollare il CSS nel template allora bisogna andare su Modello -> Modifica HTML, cercare la riga ]]></b:skin> quindi incollare sopra a questa il codice seguente

.descrizione1 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione1 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione1::before {
content: attr(title);
position: absolute;
background: rgba(255, 240, 0, 0.4); /* Colore dello sfondo */
color: #111; /* Colore del testo */
font-size: 16px; /* Dimensione caratteri */
font-weight:bold; /* Grassetto */
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}

quindi si salva il modello. Per i codici dei colori si è scelto il Modello RGB che permette di inserire anche la trasparenza, in questo caso del 40% (0.4), per mostrare la foto nella sua interezza.  La trasparenza può essere scelta tra 0.1 (massima) e 0.9 (minima).

Quando si vuole pubblicare una immagine con una didascalia dobbiamo incollare nel post in Modalità HTML un codice secondo questo schema di esempio

<div style="width:500px; padding:10px; margin:0 auto;"><div class='descrizione1' title='Digitare la didascalia'><img src='URL della immagine' alt='nome-immagine' /></div></div>

Il risultato mostrerà una immagine con la descrizione in basso su sfondo di colore rgba(255, 240, 0, 0.4);

MOSTRARE UNA DESCRIZIONE AL PASSAGGIO DEL MOUSE

Invece di mostrare una descrizione sempre visibile potremo scegliere di visualizzarla solo al passaggio del cursore sulla foto. Il codice da incollare sempre sopra alla riga ]]></b:skin> in questo caso è il seguente

.descrizione2 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione2 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione2::before {
content: attr(title);
position: absolute;
background: rgba(8, 242,236, 0.4);
color: #000;
font-size: 16px;
font-weight:bold;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
opacity:0;
filter:alpha(opacity=00);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.descrizione2:hover:before {
opacity:1;
filter:alpha(opacity=100);
}

Si salva il modello. Lo schema di codice per visualizzare le immagini con questa descrizione è

<div style="width:500px; padding:10px; margin:0 auto;"><div class='descrizione2' title='Digitare il nome della descrizione'><img src='URL_IMMAGINE' alt='nome-immagine' /></div></div>

Il risultato sarà simile al seguente



La descrizione sarà mostrata dopo 0.5 secondi che il mouse passa sulla foto e sparirà quando la lascerà.

IMMAGINE CON DESCRIZIONE E RIQUADRO

Prima di passare a mostrare il codice per questa terza tipologia di descrizione ecco quello che sarà il risultato

Sopra all'immagine e in basso si visualizzerà una descrizione della stessa in uno sfondo e all'esterno verrà mostrato un altro testo in un riquadro dai bordi arrotondati con sfondo colorato anche diverso. Si tratta di un modo molto interessante per mostrare immagini mettendole maggiormente in evidenza.

Il codice da incollare sopra alla riga ]]></b:skin> in Modello -> Modifica HTML è il seguente

.descrizione3 {
padding: 0;
width: 100%;
position: relative;
}
.descrizione3 img {
width: 100%;
height: auto;
display: block;
padding: 0;
border: 0;
}
.descrizione3::before {
content: attr(title);
position: absolute;
background: rgba(0, 255, 200, 0.4); /* Colore dello sfondo */
color: #000; /* Colore del testo */
font-size: 16px; /* Dimensione del testo */
font-weight:bold;
padding: 5px;
right: 0;
bottom: 0;
left: 0;
text-align: center;
z-index: 1;
}
.testo_immagine{
max-width:650px; /* Larghezza riquadro */
padding:8px;
background:#fec; /* Colore dello sfondo riquadro */
margin:0 auto;
border-radius:14px; /* Raggio arrotondamento */
text-align:justify
}

Dopo aver salvato il modello si pubblicano le immagini in Modalità HTML con questa struttura di codice

<div class='testo_immagine'>
<div style='width:400px; padding:10px;clear: left; float: left; margin:0 auto;'><div class='descrizione3' title='Testo della didascalia'><img src='URL_IMMAGINE' alt='nome-immagine'/></div></div>
....  Testo da visualizzare nel riquadro ...</div>

Per spostare l'immagine sulla destra del riquadro basterà sostituire float: left; con float: right; . Nelle descrizioni è opportuno non inserire apostrofi e nel caso fosse indispensabile bisogna usare al suo posto l'entità del carattere apostrofo che è &#039; mentre quella delle virgolette è &quot; . Per esempio come descrizione nella foto dello screenshot si può usare Volpe bianca dell&#039;artico.