In uikit tutte le immagini sono responsive a default.

Andando infatti ad analizzare la regola applicata nella sezione “Component: Base” al tag img

img {

max-width: 100%;

height: auto;

box-sizing: border-box;

border: 0;

vertical-align: middle;

}

ritroviamo esattamente quanto detto nel precedente capitolo “Responsive Design: Concetti di base – Immagini Responsive” di questa guida.

In sostanza le due proprietà “max-width: 100%” e “hieght: auto” garantiscono che riducendo le dimensioni del browser, e ovviamente, dei contenitori all’interno dei quali sono inserite le immagini, si riducano automaticamente e proporzionalmente anche esse.

Per annullare il comportamento responsivo di un’ immagine e fare in modo che mantenga le sue dimensioni originali, è sufficiente aggiungere al tag img un’apposita classe: .uk-img-preserve che come indicato nella relativa regola

.uk-img-preserve,.uk-img-preserve img {

max-width: none;

}

non fa altro che annullare il valore impostato a default per la larghezza massima.

A questo punto è bene fare una precisazione. In Passweb le immagini possono essere gestite in modi diversi:

• Mediante il componente “Immagine con Link”
• All’interno del componente Paragrafo
• Mediante il componente HML
• Mediante il componente “Immagine” interno a componenti quali il “Catalogo Ecommerce” la “Scheda Prodotto” ecc…
• …

Ora, mentre in alcuni casi (componente “HTML” o sezione codice del componente “Paragrafo”) la struttura del componente Passweb permette di accedere direttamente al tag img e di applicargli quindi tutte le classi desiderate, compresa quella richiesta da uikit per annullare il comportamento responsivo, in altri casi il markup dello specifico componente Passweb non ci consente di accedere direttamente a questo tag.

Prendiamo ad esempio il classico componente “Immagine con link che produce un markup di questo tipo

<div id="imagelink_3165" class="imagelinkComp component columned ">

<img src="/Resources/Graphics/blog-img4.jpg" alt="blog-img4" title="img4">

</div>

Applicando la classe richiesta da uikit per annullare il comportamento responsivo dell’immagine a questo componente, e utilizzando per questo l’apposito campo presente nella sua maschera di configurazione

in realtà questa classe viene applicata non al tag img ma bensì al suo contenitore più esterno

<div id="imagelink_3165" class="imagelinkComp component columned uk-img-preserve">

<img src="/Resources/Graphics/blog-img4.jpg" alt="blog-img4" title="img4">

</div>

Fortunatamente riusciamo comunque, anche in questo caso, a raggiungere il nostro scopo in quanto la regola definita nel file uikit.css sulla classe in esame è strutturata in maniera tale da annullare l’impostazione di default sulla larghezza massima non solo se la classe viene applicata direttamente al tag img ma anche nel caso in cui questa classe venga applicata ad un contenitore esterno all’immagine (.uk-img-preserve img).

In ogni caso potremmo tranquillamente annullare il comportamento responsivo dell’immagine anche utilizzando direttamente lo style editor di Passweb.

La regola sulla classe .uk-img-preserve infatti, non fa altro che impostare per l’immagine la max-width sul valore none, cosa questa che potremmo benissimo fare aprendo lo style editor del componente, selezionando l’elemento “Immagine” (1) e impostando per esso la proprietà Larghezza Max sul valore none (2)

ATTENZIONE! Nel caso in cui si dovesse utilizzare lo Style Editor di Passweb per fissare l’altezza, la larghezza o la larghezza massima di un’immagine su specifici valori in pixel, questi sovrascriveranno (avendo una maggior priorità) i rispettivi valori applicati a default per queste stesse proprietà dal framework annullando, di fatto, il comportamento responsivo dell’immagine.

Si ricorda infine, nel caso in cui si decida di gestire immagini responsive, di utilizzare sempre immagini sufficientemente grandi e adeguate a tutte le dimensioni che il layout può raggiungere.