Riferimento comando - Attributi di configurazione

Gli attributi di configurazione sono definiti come attributi direttamente su un elemento IMG gestito dalla libreria di immagini reattive. Ogni immagine può avere un proprio set di attributi.

data-src

Facoltativo.

URL dell'immagine fornita da Image Server. Se l'URL non è presente, la libreria utilizza il valore impostato in src come valore precedente. Questo attributo serve l’immagine iniziale e l’immagine dinamica gestite dalla libreria di immagini reattive da diverse posizioni.

Esempio

<img data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

src

Se data-src è impostato, src è facoltativo e può contenere qualsiasi URL da aggiungere. Ad esempio, può contenere un URL della stessa immagine basata su Image Server utilizzata dalla libreria. Oppure può contenere un segnaposto GIF o persino un URI dati per evitare un ulteriore viaggio di andata e ritorno del server all'avvio.

Se data-src non è impostato, src è obbligatorio e deve contenere un URL dell’immagine fornita da Image Server.

Esempio

Utilizzo dell’URI dati per il src e l'URL di Image Server per data-src attributo:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

punti di interruzione dei dati

Elenco di punti di interruzione separati da virgole seguito facoltativamente da due punti ( :) e i comandi Image Server o Image Preset. Ogni punto di interruzione è un valore di larghezza dell’immagine definito in pixel CSS logici. La libreria carica l’immagine con il valore più vicino dall’elenco e la ridimensiona sul client in modo che corrisponda alla larghezza dell’immagine CSS di runtime. (Se si lavora su uno schermo ad alta densità, le rappresentazioni di immagini caricate dal server rappresentano valori di punto di interruzione moltiplicati per il rapporto pixel del dispositivo).

Per qualsiasi punto di interruzione dall’elenco, è possibile definire uno o più comandi Image Serving o nomi di predefiniti immagine. Tali parametri aggiuntivi vengono applicati solo all’immagine nel caso in cui questo particolare punto di interruzione sia attualmente attivo.

È possibile utilizzare qualsiasi comando Image Serving supportato, ad eccezione dei comandi di visualizzazione che influiscono sulle dimensioni dell'immagine di risposta, come wid=, hei=oppure scl=. La stessa restrizione si applica ai predefiniti immagine: un predefinito per immagini utilizzato con la libreria di immagini reattive non deve contenere tali comandi.

I nomi di più comandi Image Server o di predefiniti immagine sono separati con " &" carattere. Se un comando Image Server ha una virgola nel suo valore, tale virgola viene sostituita con %2C. I nomi dei predefiniti per immagini sono racchiusi in simboli di dollaro ( $).

Esempi

Uso solo dei punti di interruzione

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">

Utilizzo dei comandi Image Server

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">

Utilizzo dei predefiniti per immagini

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">

Utilizzo dei predefiniti per immagini e dei comandi Image Serving

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">

modalità dati

Sono disponibili le due seguenti modalità di ritaglio avanzato in AEM 6.4 e versioni successive e in Dynamic Media Viewers 5.9 e versioni successive:

  • Manuale - i punti di interruzione definiti dall’utente e i comandi corrispondenti del servizio immagine sono definiti all’interno di un attributo nell’elemento immagine.
  • Ritaglio avanzato - le rappresentazioni di ritaglio avanzato calcolate vengono recuperate automaticamente dal server di consegna. Il rendering migliore viene selezionato utilizzando le dimensioni di runtime dell’elemento immagine.

Per utilizzare la modalità Ritaglio avanzato è necessario impostare data-mode attributo a smart crop.

Esempio

<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">

L’elemento immagine associato invia un s7responsiveViewer in fase di runtime quando il punto di interruzione cambia.

         responsiveImage.addEventListener("s7responsiveViewer", function (event) {
           var s7event = event.s7responsiveViewerEvent;
           if(s7event.type == "breakpointchanged") {
              console.log("New width: " + s7event.width);
              console.log("Old width: " + s7event.oldWidth);
           }
        });

In questa pagina