Skip to content

Assets e immagini

Jump to bottom
Francesco Zaia edited this page Mar 8, 2021 · 1 revision

Di default, gli URL degli asset puntano a un URL di DatoCMS.

Gli asset di questo progetto vanno recuperati tramite un proxy a "https://assets.innovazione.gov.it/".

Per questo motivo sono stati implementati degli helper:

  • proxy_link_to,
  • proxy_image_tag,
  • proxy_dato_meta_tags.

che assegnano l'URL corretto del proxy.

Per questo motivo, sono da evitare gli helper di default:

  • link_to,
  • image_tag,
  • dato_meta_tags.

Immagini responsive e lazyload

DatoCMS utilizza imgix per offrire le immagini caricate. Nell'esempio sottostante viene utilizzato il metodo .url() su un campo image_cover dell'oggetto page.

I parametri richiesti sono relativi a larghezza, altezza, tipo di ridimensionamento (ritaglio entro le dimensioni specificate), con compressione automatica.

page.image_cover.url(w: 719, h: 350, fit: 'crop', auto: 'compress')

Per informazioni sull'utilizzo delle immagini su Middleman con DatoCMS https://www.datocms.com/docs/middleman/image-manipulation

Per informazioni dettagliate sui possibili parametri è possibile fare riferimento alla documentazione di imgix.

  • srcset: standard usato per definire una mappa di URL in base al breakpoints
  • lazysizes: libreria JS usata per il caricamento asincrono
  • lqip_data_url: offerto dalla gemma middleman-dato che permette di generare e includere l'immagine di preview nel codice della pagina, prima che venga caricata l'immagine della dimensione corretta.
  • proxy_image_tag: helper costruito image_tag di Ruby per richiamare le immagini dal dominio corretto.

Esempio

    = proxy_image_tag page.image_cover.lqip_data_url(w: 10, h: 4,
      fit: "crop"), data: {"sizes": "100vw",
        "src": page.image_cover.url(w: 2500, h: 750,
          fit: "crop", auto: "compress"),
        "srcset": "#{page.image_cover.url(w: 480, h: 350,
          fit: 'crop', auto: 'compress')} 480w,
        #{page.image_cover.url(w: 719, h: 350,
          fit: 'crop', auto: 'compress')} 719w,
        #{page.image_cover.url(w: 1023, h: 450,
          fit: 'crop', auto: 'compress')} 1023w,
        #{page.image_cover.url(w: 1500, h: 550,
          fit: 'crop', auto: 'compress')} 1500w,
        #{page.image_cover.url(w: 1920, h: 650,
          fit: 'crop', auto: 'compress')} 1920w,
        #{page.image_cover.url(w: 2500, h: 750,
          fit: 'crop', auto: 'compress')} 2500w"},
      class: "lazyload d-block w-100",
      alt: page.image_cover.alt
Clone this wiki locally