Creazione di Schede Immagine in Oxygen

Panoramica

• Obiettivo: Creare schede immagine senza usare immagini di sfondo.
• Importanza di mantenere altezze delle immagini uniformi per un’estetica coerente.
• Necessità che i design siano adattabili a varie proporzioni dell’immagine.
• Mantenere la capacità di utilizzare immagini source set, tag alt per SEO e immagini indicizzabili.

Tipi di Schede

1. Layout Tradizionale della Scheda di un Post del Blog
2. Scheda Immagine Completa

Concetti Chiave

• Buone Pratiche vs Cattive Pratiche
  • Evita di usare immagini di sfondo.
  • Discuti i blocchi comuni per i principianti.

Obiettivi del Tutorial

• Insegnare le tecniche corrette per costruire schede immagine in Oxygen.
• Fornire ulteriore conoscenza sulle tecniche di posizionamento (assoluto vs relativo).

Costruzione Step-by-Step della Scheda

1. Creazione di una Sezione

   • Inizia con una nuova sezione per il design della scheda.
   • Facoltativo: crea un layout a griglia usando le classi di griglia di Oxy Ninja.

2. Impostazione della Scheda

   • Crea un div per la scheda e applica una classe (ad es. image-card-new).
   • Aggiungi elementi all'interno della scheda: Immagine, Titolo (H3), Testo e Pulsante.
   • Usa le convenzioni di denominazione BEM per i nomi delle classi:
     • image-card-new__image
     • image-card-new__heading
     • image-card-new__text
     • image-card-new__button

3. Stile della Scheda

   • Applica padding al wrapper interno per evitare lo schiacciamento dell’immagine.
   • Usa dimensioni dei font fluide per la reattività in base alla dimensione dello schermo con la funzione clamp().
   • Implementa lo spazio usando un sistema di spaziatura come "owl spacing" o classi di margine.

Tecniche di Gestione Immagine

Problemi Comuni

• Immagini schiacciate quando l'altezza è impostata senza considerare la proporzione.

Evitare Immagini di Sfondo

• Problemi con le immagini di sfondo:
  • Non utilizzabili per immagini reattive e source set.
  • SEO scarso a causa della mancanza di tag alt.

Soluzione con CSS

• Usa la proprietà CSS object-fit: cover; per mantenere la proporzione senza schiacciare le immagini.
• Permette pratiche SEO appropriate con immagini reali.

Design della Scheda Immagine Completa

1. Crea una Nuova Sezione

   • Inizia con una nuova sezione per una scheda immagine completa.

2. Impostazione della Scheda Immagine Completa

   • Aggiungi un’immagine e imposta le sue proprietà CSS.
   • Usa il posizionamento assoluto per effetti di stratificazione.
   • Crea un overlay con gradiente per la leggibilità del testo.

3. Tecnica di Posizionamento Assoluto

   • Assicurati che l'elemento genitore sia impostato su position: relative; affinché i figli vengano posizionati correttamente.
   • Usa la proprietà z-index per gestire l'ordine di stratificazione degli elementi.

Pensieri Finali

• Il tutorial punta a fornire una comprensione completa della creazione di schede immagine in Oxygen.
• Incoraggiati a porre domande e fornire feedback per futuri tutorial.