Dare uno stile alle immagini corrotte
Spesso può capitare che qualche immagine del tuo sito non sia raggiungibile, perché è stata eliminata per sbaglio o magari perché rinominata non aggiornando il link. Quando questo accade, i browser inseriscono delle icone al posto delle immagini corrotte. Ma è possibile tramite Css o jQuery dare uno stile personalizzato e più curato nel caso in cui si verifichi l’evenienza.
- Leggi l'articolo, ti bastano solo 1 minuto, 46 secondi
Sei di fretta? Scarica il PDF e consultalo quando vuoi!
Il codice: CSS
È sufficiente inserire all’interno del tuo foglio di stile, le seguenti righe:
img:before {
background-color: rgb( 230, 230, 230 );
border: 2px dotted rgb( 200, 200, 200 );
border-radius: 5px;
content: " ";
display: block;
height: calc( 100% + 10px );
left: 0;
position: absolute;
top: -10px;
width: 100%;
}
img:after {
color: rgb( 100, 100, 100 );
content: "Immagine momentaneamente non disponibile";
display: block;
font-size: 16px;
font-style: normal;
left: 0;
position: absolute;
text-align: center;
top: 5px;
width: 100%;
}È importante ricordarti di assegnare al contenitore dell’immagine la regola Css position: relative;, per evitare che gli pseudo selettori :before e :after, posizionati in modo assoluto, si espandano in maniera incontrollata coprendo i contenuti della tua pagina.
Ecco il risultato, che ovviamente puoi personalizzare a piacimento modificando il Css proposto:
Il codice: jQuery
La correzione dei problemi dovuti alle immagini corrotte può essere effettuata anche tramite jQuery, con un semplicissimo script:
jQuery( function( $ ) {
$( 'img' ).error( function() {
$( this ).attr( 'src', 'img/broken.png');
} );
} );Nel codice proposto, basta inserire il percorso relativo dell’immagine che vogliamo utilizzare in caso di immagini corrotte (nell’esempio: img/broken.png).
Nota bene, che in questo caso, è necessario avere inserito la libreria di jQuery nella nostra pagina.
Per includere la libreria di jQuery nella tua pagina, puoi utilizzare diversi modi:
Scaricare il file dal sito ufficiale di jQuery ed aggiungere alla tua pagina il seguente codice, preferibilmente prima della chiusura del tag body:
<script src="cartella_in_cui_hai_inserito_jquery/jquery-3.2.1.min.js"></script>
Oppure, sfruttando la CDN messa a disposizione da Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo
Hai trovato interessante l’articolo? Allora ti consiglio di leggere:
Come aggiungere formati immagine personalizzati in WordPress
Impariamo a creare nuovi formati immagine, in aggiunta a quelli predefiniti, da utilizzare nel nostro tema aumentando le prestazioni del nostro sito.
Limitare la lunghezza del titolo in WordPress
Impariamo a limitare il numero di caratteri nella visualizzazione del titolo di articoli e pagine in WordPress, sostituendo l’eventuale eccesso con un carattere di troncamento.