Unito.it

Tema Unito v 3 / 3.1

Liste di immagini

La lista di immagini è un componente flessibile per la visualizzazione di serie di immagini sotto forma di griglia.

Elemento singolo

ultimo aggiornamento 23/10/24

Di seguito gli esempi di elemento singolo della lista di immagini:

Solo Versione 3
  • Immagine semplice
  • Immagine con didascalia sovrapposta
descrizione immagine
descrizione immagine
Didascaliacopyright Mario Rossi
descrizione immagine
Didascalia 

            
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="it-grid-item-wrapper">
            <a href="#">
                <div class="img-responsive-wrapper">
                    <div class="img-responsive">
                        <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="it-grid-item-wrapper">
            <a href="#">
                <div class="img-responsive-wrapper">
                    <div class="img-responsive">
                        <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
                    </div>
                </div>
                <span class="it-griditem-text-wrapper">
                    <span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
                    <svg class="icon">
                        <use href="./dist/svg/sprite.svg#it-info-circle"></use>
                    </svg>
                </span>
            </a>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="it-grid-item-wrapper it-grid-item-overlay">
            <a href="#">
                <div class="img-responsive-wrapper">
                    <div class="img-responsive">
                        <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
                    </div>
                 </div>
                 <span class="it-griditem-text-wrapper">
                    <span class="it-griditem-text">Didascalia</span>
                    <svg class="icon">
                        <use href="./dist/svg/sprite.svg#it-info-circle"></use>
                    </svg>
                </span>
            </a>
        </div>
    </div>
</div>
Versione 3.1
Lorem Ipsum
Lorem Ipsum
©
Lorem Ipsum
 

            
<div class="row">
    <div class="col-12 col-lg-4">
        <div class="it-grid-item-wrapper">
            <a href="#">
                <figure class="figure position-relative">
                    <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                </figure>
            </a>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="it-grid-item-wrapper">
            <a href="#">
                <figure class="figure position-relative">
                    <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                    <div class="copyright">
                        <span>©</span>
                        <div class="copyright-info">Lorem Ipsum</div>
                    </div>
                </figure>
            </a>
        </div>
    </div>
</div>

Griglia 3 colonne - solo Versione 3.1

ultimo aggiornamento 23/10/24

Per la corretta formattazione degli spazi di questo tipo di griglia, occorre aggiungere la classe .it-image-label-grid al div .it-grid-list-wrapper.


            
<div class="it-grid-list-wrapper it-image-label-grid">
    <div class="grid-row">
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6 col-lg-4">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
    </div>
</div>

Griglia 2 colonne - Solo Versione 3.1

ultimo aggiornamento 23/10/24

Analogamente all'esempio precedente, per la corretta formattazione degli spazi di questo tipo di griglia, occorre aggiungere la classe .it-image-label-grid al div .it-grid-list-wrapper.


            
<div class="it-grid-list-wrapper it-image-label-grid col-12 col-md-6">
    <div class="grid-row">
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
        <div class="col-6">
            <div class="it-grid-item-wrapper">
                <a href="#">
                    <figure class="figure position-relative">
                        <img src="https://tema.unito.it/v3/assets/images/inmage_grid.jpg" class="figure-img img-fluid" alt="Lorem Ipsum"/>
                        <div class="copyright">
                            <span>©</span>
                            <div class="copyright-info">Lorem Ipsum</div>
                        </div>
                    </figure>
                </a>
            </div>
        </div>
    </div>
</div>

Griglia proporzionale - Solo Versione 3

La griglia proporzionale contiene elementi griglia con immagine e testo in overlay.
Per la corretta formattazione degli spazi di questo tipo di griglia occorre aggiungere la classe .it-quilted-grid al div .it-grid-list-wrapper. La griglia utilizza le classi di Bootstrap .col- per realizzare il layout colonnare.

I tipi di immagini utilizzabili sono sostanzialmente 2:

  • standard
  • orizzontale (con larghezza doppia rispetto all’immagine standard e di altezza uguale)

Per utilizzare l’immagine orizzontale, occorre aggiungere la classe .it-grid-item-double-w al div .it-grid-item-wrapper che contiene l’immagine.

descrizione immagine
Didascalia
descrizione immagine
Didascaliacopyright Mario Rossi
descrizione immagine
Didascalia
descrizione immagine
Didascalia 

            
<div class="it-grid-list-wrapper it-quilted-grid">
  <div class="grid-row">
    <div class="col-12 col-md-6">
      <div class="it-grid-item-wrapper it-grid-item-overlay">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-12 col-md-6">
      <div class="grid-row">
        <div class="col-6">
          <div class="it-grid-item-wrapper it-grid-item-overlay">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
                </div>
              </div>
              <span class="it-griditem-text-wrapper">
                <span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
                <svg class="icon">
                  <use href="./dist/svg/sprite.svg#it-info-circle"></use>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <div class="col-6">
          <div class="it-grid-item-wrapper it-grid-item-overlay">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/800x600/ebebeb/808080/?text=800x600" alt="descrizione immagine"></div>
                </div>
              </div>
              <span class="it-griditem-text-wrapper">
                <span class="it-griditem-text">Didascalia</span>
                <svg class="icon">
                  <use href="./dist/svg/sprite.svg#it-info-circle"></use>
                </svg>
              </span>
            </a>
          </div>
        </div>
        <div class="col-12">
          <div class="it-grid-item-wrapper it-grid-item-overlay it-grid-item-double-w">
            <a href="#">
              <div class="img-responsive-wrapper">
                <div class="img-responsive">
                  <div class="img-wrapper"><img src="https://dummyimage.com/800x300/ebebeb/808080/?text=800x300" alt="descrizione immagine"></div>
                </div>
              </div>
              <span class="it-griditem-text-wrapper">
                <span class="it-griditem-text">Didascalia</span>
                <svg class="icon">
                  <use href="./dist/svg/sprite.svg#it-info-circle"></use>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Griglia masonry - solo Versione 3

Per un elenco di tutti i possibili parametri di configurazione consultare la documentazione completa.

Aggiungendo data-bs-toggle="masonry" al contenitore row, verrà attivato l’effetto Masonry sulla griglia responsive.

descrizione immagine
Didascalia
descrizione immagine
Didascaliacopyright Mario Rossi
descrizione immagine
Didascalia
descrizione immagine
Didascalia
descrizione immagine
Didascalia
descrizione immagine
Didascalia
descrizione immagine
Didascalia
descrizione immagine
Didascalia
descrizione immagine
Didascalia 

            
<div class="container-fluid">
  <div class="row it-masonry" data-bs-toggle="masonry">
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x300/ebebeb/808080/?text=400x300" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia<span class="it-griditem-copyright">copyright Mario Rossi</span></span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x700/ebebeb/808080/?text=400x700" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x600/ebebeb/808080/?text=400x600" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x400/ebebeb/808080/?text=400x400" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x600/ebebeb/808080/?text=400x600" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x500/ebebeb/808080/?text=400x500" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="it-grid-item-wrapper">
        <a href="#">
          <div class="img-responsive-wrapper">
            <div class="img-responsive">
              <div class="img-wrapper"><img src="https://dummyimage.com/400x400/ebebeb/808080/?text=400x400" alt="descrizione immagine"></div>
            </div>
          </div>
          <span class="it-griditem-text-wrapper">
            <span class="it-griditem-text">Didascalia</span>
            <svg class="icon">
              <use href="./dist/svg/sprite.svg#it-info-circle"></use>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
</div>

Griglia masonry via Javascript - Solo Versione 3

È possibile abilitare Masonry manualmente utilizzando questo script:


var elementList = [].slice.call(document.querySelectorAll('.it-masonry'));
var masonryList = elementList.map(function (element) {
    return new bootstrap.Masonry(element)
})

Elenco dei metodi disponibili:

Metodo Descrizione
dispose Rimuove le funzionalità Masonry
getInstance Metodo statico che restituisce l'istanza Masonry associata ad un elemento del DOM. Esempio: bootstrap.Masonry.getInstance(element)
getOrCreateInstance Metodo statico che restituisce un'istanza Masonry associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.Masonry.getOrCreateInstance(element)
Torna su