Molto spesso pensiamo che per gestire qualcosa in WordPress sia necessario aggiungere una funzione, un widget o un plugin. In realtà spesso la soluzione più semplice è anche la migliore. In questo articolo vedremo come gestire le immagini in WordPress con i CSS.
Immagini fluide
Il seguente codice permetterà alle vostre immagini di non superare i limiti dei loro contenitori:
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%;
}
Immagini scalabili
Il seguente codice permetterà alle immagini prese dalla Media Library di scalare correttamente:
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
height: auto;
}
img.size-full,
img.size-large {
max-width: 97.5%;
width: auto;
height: auto;
}
Gestire le emoticon
Il seguente codice permetterà alle emoticon di non lasciare spazi eccessivi tra loro e il testo:
.entry-content img.wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
Allineamento
Le seguenti classi CSS gestiscono le possibili posizioni delle immagini (sinistra, destra, centro):
.alignleft {
display: inline;
float: left;
margin-right: 1.625em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.625em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}