Allargare le immagini di Blogger da mobile nei post e nella Home

Come ridimensionare automaticamente tutte le immagini nei post e in homepage della versione mobile di Blogger.

I vecchi modelli di Blogger, non ancora Responsive, come è noto hanno una versione per il mobile e una versione per il desktop. Le immagini possono essere inserite attraverso l'Editor di Blogger con le dimensioni Piccola, Media, Grande, Extralarge e Dimensione Originale.

Qualunque misura si scelga, quando si passa alla visualizzazione da mobile, le immagini vengono molto ridimensionate rimanendo spesso molto più piccole della larghezza del layout. Se le immagini rappresentano una parte fondamentale dei contenuti di un post e se hanno bisogno di essere sufficientemente grandi per poter essere utili al lettore, subentra il problema di come allargarle tutte contemporaneamente mediante qualche riga di codice.

Si deve partire evidentemente dalla classe di stile delle immagini che è collegata a quella del post. Nella maggior parte dei modelli, tale classe di stile per il post è .post-body. Per controllare che anche nel vostro Tema sia così, andate su Tema -> Modifica HTML e digitate Ctrl+F dopo aver cliccato nell'area del codice.

Si aprirà una finestra dentro il modello in cui digitare appunto .post-body per poi andare su Invio. Se tale stringa non esiste, probabilmente è perché avete un Modello scaricato da internet. In questo caso scorrete il codice per cercarne un'altra simile che potrebbe essere .post o qualcosa di analogo.

Per semplicità poniamo che nel vostro modello esista la classe .post-body, questo significa che la classe per configurare le immagini nella versione desktop sarà .post-body img . La classe da usare per la versione mobile allora diventerà .mobile .post-body img. Vogliamo ottenere questo risultato

con le immagini che prendano quasi tutto lo spazio disponibile nel layout. Dopo aver salvato il template, si va su Tema -> Modifica HTML e si cerca la sezione <b:skin>.  Si clicca sulla freccetta nera posta sulla sinistra nel caso in cui non fosse visibile tutto il codice ivi contenuto. Fatto questo, con Ctrl+F si cerca la riga ]]></b:skin>, quindi subito sopra a questa, si incolla questo codice

.mobile .post-body img {
width: 95% !important;
height: auto !important;
}

e si salva il template. Se adesso apriamo un qualsiasi post con un dispositivo mobile, la larghezza della immagine prenderà il 95% del layout. Tale valore ovviamente può essere personalizzato.

Le immagini della homepage del blog rimarranno della stessa dimensione e non saranno influenzate dal codice precedente. Per aumentare la larghezza delle immagini anche nella home, dobbiamo incollare nel modello, sempre sopra alla stessa riga, questo nuovo codice

div.mobile-index-thumbnail img {
width: 250px !important;
height: auto !important;
}

dove ho scelto un valore assoluto (250px) invece che uno proporzionale. Dopo il salvataggio del modello, si avrà il risultato mostrato nello screenshot seguente ottenuto con il tool Qurktools Screenfly.

Questa stessa dimensione per le foto si avrà anche nelle pagine delle etichette aperte da mobile. Al posto di 250px si può mettere anche 50% per mostrare le immagini nella metà del layout, oppure un valore a vostra scelta.

ECCEZIONI

Ci potrebbero essere dei casi particolari in cui una immagine debba essere mostrata con dimensioni ben determinate e che quindi non vogliamo venga ridimensionata. In questo caso si dovrà pubblicare con il codice

<img  style="height: auto !important; width: 200px !important;" src="URL_IMMAGINE" alt="nome immagine"/>

oppure aggiungere la stringa evidenziata di giallo nel codice della foto inserita con l'Editor di Blogger.