image_srcset

Construit l'attribut HTML img srcset (responsive) d'un élément d'image.

{{ image_srcset(asset) }}

Exemples :

{% set asset = asset(image_path) %}
<img src="{{ url(asset) }}" width="{{ asset.width }}" height="{{ asset.height }}" alt="" class="asset" srcset="{{ image_srcset(asset) }}" sizes="{{ image_sizes('asset') }}">

image_sizes

Renvoie l'attribut HTML img sizes basé sur un nom de classe CSS. Il doit être utilisé conjointement avec la fonction image_srcset.

{{ image_sizes('class') }}

Exemples :

{% set asset = asset(image_path) %}
<img src="{{ url(asset) }}" width="{{ asset.width }}" height="{{ asset.height }}" alt="" class="asset" srcset="{{ image_srcset(asset) }}" sizes="{{ image_sizes('asset') }}">

image_from_website

Construit l'élément HTML img à partir d'une URL de site Web en extrayant son image d'illustration. Retourne null si aucune image n'est trouvée.

{{ image_from_website('url', {attributs}, {options}) }}

L'image est recherchée dans le HTML de la page avec les fallbacks suivants, le premier candidat pouvant être téléchargé en tant qu'image est utilisé :

1. Open Graph : og:image:secure_url, og:image, og:image:url
2. Twitter : twitter:image, twitter:image:src
3. <link rel="image_src">
4. Microdata : itemprop="image"
5. JSON-LD : propriété image
6. Première <img> de <article>, <main> ou <body>
7. <link rel="apple-touch-icon">
8. <link rel="icon">

Les URL relatives sont résolues par rapport à <base href> ou à l'URL de la page.

L'URL de l'image trouvée et l'image téléchargée sont mises en cache (voir cache.assets.remote.ttl).

Options :

• fallback : chemin (ou URL) de l'image utilisée si aucune image n'est trouvée
• autres options de image (ex. : responsive, formats)

Exemples :

{{ image_from_website('https://example.com/page-with-image.html') }}

{# avec une image de fallback #}
{{ image_from_website('https://example.com/', {alt: 'Illustration'}, {fallback: 'images/default.png'}) }}

resize

Redimensionne une image à une largeur (en pixels) ou/et une hauteur (en pixels) spécifiée.

• Si seule la largeur est spécifiée, la hauteur est calculée pour conserver le rapport hauteur/largeur
• Si seule la hauteur est spécifiée, la largeur est calculée pour conserver le rapport hauteur/largeur
• Si la largeur et la hauteur sont spécifiées, l'image est redimensionnée pour s'adapter aux dimensions données, l'image est recadrée et centrée si nécessaire
• Si Remove_animation est vrai, toute animation dans l'image (par exemple, GIF) sera supprimée

{{ asset(image_path)|resize(width: width, height: height, remove_animation: bool) }}

Exemples :

{{ asset(page.image)|resize(300) }}
{# equivalent to: #}
{{ asset(page.image)|resize(width: 300) }}
{# resizes to 300px width, height auto-calculated to preserve aspect ratio #}
{{ asset(page.image)|resize(height: 200) }}
{# resizes to 300px width and 200px height, and crops if necessary #}
{{ asset(page.image)|resize(300, 200) }}
{# removes any animation from the image #}
{{ asset(page.image)|resize(width: 1200, height: 630, remove_animation: true) }}

cover

Redimensionne une image à une largeur et une hauteur spécifiées, en la recadrant si nécessaire.

{{ asset(image_path)|cover(width, height) }}

Exemple:

{{ asset(page.image)|cover(1200, 630) }}

maskable

Ajoute un remplissage, en pourcentages, à une image pour la rendre masquable.

{{ asset(image_path)|maskable(padding) }}

Exemple:

{{ asset('icon.png')|maskable }}

webp

Convertit une image au format WebP.

Exemple:

<picture>
    <source type="image/webp" srcset="{{ asset(image_path)|webp }}">
    <img src="{{ url(asset(image_path)) }}" width="{{ asset(image_path).width }}" height="{{ asset(image_path).height }}" alt="">
</picture>

avif

Convertit une image au format AVIF.

Exemple:

<picture>
    <source type="image/avif" srcset="{{ asset(image_path)|avif }}">
    <img src="{{ url(asset(image_path)) }}" width="{{ asset(image_path).width }}" height="{{ asset(image_path).height }}" alt="">
</picture>

lqip

Renvoie un espace réservé pour une image de faible qualité (100 x 100 px, flou à 50 %) comme URL de données.

{{ asset(image_path)|lqip }}

dominant_color

Renvoie la couleur hexadécimale dominante d'une image.

{{ asset(image_path)|dominant_color }}

fingerprint

Ajoutez l'empreinte digitale du contenu du fichier au nom du fichier.

{{ asset(path)|fingerprint }}
{{ path|fingerprint }}

Exemples :

{{ asset('styles.css')|fingerprint }}

minify

Réduire un fichier CSS ou JavaScript.

{{ asset(path)|minify }}

Exemples :

{{ asset('styles.css')|minify }}
{{ asset('scripts.js')|minify }}

minify_css

Réduire une chaîne CSS.

{{ variable|minify_css }}

{% apply minify_css %}
{# CSS here #}
{% endapply %}

Exemples :

{% set styles = 'some CSS here' %}
{{ styles|minify_css }}

<style>
{% apply minify_css %}
  html {
    background-color: #fcfcfc;
    color: #444;
  }
{% endapply %}
</style>

minify_js

Réduire une chaîne JavaScript.

{{ variable|minify_js }}

{% apply minify_js %}
{# JavaScript here #}
{% endapply %}

Exemples :

{% set script = 'some JavaScript here' %}
{{ script|minify_js }}

<script>
{% apply minify_js %}
  var test = 'test';
  console.log(test);
{% endapply %}
</script>

scss_to_css

Compile une chaîne Sass en CSS.

{{ variable|scss_to_css }}

{% apply scss_to_css %}
{# SCSS here #}
{% endapply %}

Alias : sass_to_css.

Exemples :

{% set scss = 'some SCSS here' %}
{{ scss|scss_to_css }}

<style>
{% apply scss_to_css %}
  $color: #fcfcfc;
  div {
    color: lighten($color, 20%);
  }
{% endapply %}
</style>

to_css

Compile un fichier Sass en CSS.

{{ asset(path)|to_css }}
{{ path|to_css }}

Exemples :

{{ asset('styles.scss')|to_css }}

inline

Affiche le contenu d'un Asset.

{{ asset(path)|inline }}

Exemple:

{{ asset('styles.css')|inline }}

dataurl

Renvoie l'URL de données d'un actif.

{{ asset(path)|dataurl }}
{{ asset(image_path)|dataurl }}

Exemples de configuration de fournisseurs de CDN pour les options de configuration.

Cloudinary

https://cloudinary.com

assets:
  images:
    cdn:
      enabled: true
      account: 'xxxx'
      url: 'https://res.cloudinary.com/%account%/image/fetch/c_limit,w_%width%,q_%quality%,f_%format%,d_default/%image_url%'

Cloudimage

https://www.cloudimage.io

assets:
  images:
    cdn:
      enabled: true
      account: 'xxxx'
      url: 'https://%account%.cloudimg.io/%image_url%?w=%width%&q=%quality%&force_format=%format%'

TwicPics

https://www.twicpics.com

assets:
  images:
    cdn:
      enabled: true
      account: 'xxxx'
      canonical: false
      remote: false
      url: 'https://%account%.twic.pics/%image_url%?twic=v1/resize=%width%/quality=%quality%/output=%format%'

Source URL : URL de base de votre site.

imgix

https://imgix.com

assets:
  images:
    cdn:
      enabled: true
      account: 'xxxx'
      canonical: false
      remote: false
      url: 'https://%account%.imgix.net/%image_url%?w=%width%&q=%quality%&fm=%format%'

Base URL : URL de base de votre site.

Netlify Image CDN

https://docs.netlify.com/image-cdn/overview/

assets:
  images:
    cdn:
      enabled: true
      canonical: false
      url: '/.netlify/images?url=%image_url%&w=%width%&fm=%format%'

Exécution en local

Installer Netlify CLI

npm install netlify-cli -g
netlify link

netlify.toml :

[dev]
  targetPort = 8000

Démarrer le serveur local

php cecil.phar serve & netlify dev

Ouvrez http://localhost:8888