image processing

test
Florian Roger 10 months ago
parent 42ed8542b2
commit 07665afe28

2
.gitignore vendored

@ -1,3 +1,3 @@
resources
.hugo_build*
public/*
public

@ -36,8 +36,13 @@
<div class="box has-background-warning-light is-flex is-flex-direction-column is-justify-content-center" style="height: 40vh;">
{{ $img := resources.GetMatch (print .File.Dir "/illustration.*") }}
{{ with $img }}
<figure class="image is-flex is-justify-content-center" style="max-width: 100%; max-height: 100%; width: auto;">
<img src="{{ $img.Permalink }}" style="max-width: 100%; max-height: 100%; width: auto;">
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
<figure class="image is-flex is-justify-content-center" style="max-width: 100%; max-height: 100%; width: auto;">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}" style="max-width: 100%; max-height: 100%; width: auto;">
</picture>
</figure>
{{ end }}
</div>

@ -15,12 +15,17 @@
<div class="columns is-justify-content-center ">
{{ range .Pages }}
<div class="column is-4" style="overflow:hidden;">
{{ $img := resources.GetMatch (print .File.Dir "/portrait.*") }}
{{ with $img}}
{{- $jpeg := .Resize "800x jpeg" }}
{{- $webp := .Resize "800x webp picture" }}
<figure class="image">
{{ $img := resources.GetMatch (print .File.Dir "/portrait.*") }}
{{ with $img}}
<img src="{{ $img.Permalink }}" alt="Artiste">
{{ end }}
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
{{ end }}
<p class="is-size-5"> {{ .Title }}</p>
</div>
{{ end }}

@ -8,8 +8,13 @@
<div id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}}
{{ range $carouselImages }}
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
<figure class="image">
<img src='{{ .Permalink }}' alt="{{ .Permalink }}">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
{{ end }}
</div>

@ -19,9 +19,14 @@
<p class="mb-6">{{ .Title }}</p>
<div class="columns is-multiline is-mobile is-justify-content-center">
{{ range $img }}
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp text" }}
<div class="column is-one-quarter-mobile is-2-tablet p-1">
<figure class="image">
<img src="{{ .Permalink }}">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
</div>
{{ end }}
@ -37,9 +42,14 @@
<p class="mb-6">{{ .Title }}</p>
<div class="columns is-multiline is-mobile">
{{ range $img }}
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp text" }}
<div class="column is-one-quarter-mobile is-2-tablet p-1">
<figure class="image">
<img src="{{ .Permalink }}">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
</div>
{{ end }}

@ -14,8 +14,12 @@
{{ if and (isset .Params "presse") (.Params.presse) }}
{{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
{{ with $img }}
{{- $jpeg := .Crop "1400x400 jpeg" }}
{{- $webp := .Crop "1400x400 webp picture" }}
<div class="columns fond border my-6 p-6 has-background-black" style="background-image: url('{{ $img.Permalink }}');">
<div class="columns fond border my-6 p-6 has-background-black" style="background-image: url('{{ $webp.Permalink }}');">
{{ end }}
<div class="column border has-background-black has-text-white">
<!-- <div class="gauche"> -->
<p class="mb-3 is-uppercase">{{ .Title }}</p>

@ -13,17 +13,22 @@
{{ range .Pages.ByDate.Reverse }}
<div class="column is-one-quarter">
<figure class="image is-5by3">
<a href="{{ .Permalink|relURL }}">
{{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
<a href="{{ .Permalink|relURL }}">
{{ with $img }}
<img src="{{ .Permalink }}">
{{ with $img }}
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp picture" }}
<figure class="image is-5by3">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src="{{ $jpeg.Permalink }}" loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Permalink }}">
</picture>
{{ end }}
<div class="overlay">
<span class="has-text-black is-size-3-mobile is-size-5-tablet is-size-3-widescreen">{{ .Title }}</span>
</div>
</a>
</figure>
</figure>
</a>
</div>
{{ end }}
</div>

@ -17,8 +17,13 @@
<div class="column is-four-fifths p-0 m-0 has-background-danger">
{{ $img := resources.GetMatch (print .File.Dir "/principal.*") }}
{{ with $img }}
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
<figure class="image">
<img src="{{ .Permalink }}">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
{{ end }}
</div>
@ -83,8 +88,13 @@
<div class="column is-three-fifths p-0 m-0 has-background-danger is-hidden-mobile">
{{ $img := resources.GetMatch ( print .File.Dir "/savoir.*") }}
{{ with $img }}
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
<figure class="image">
<img src="{{ .Permalink }}">
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ .Width }}" height="{{ .Height }}" alt="{{ .Permalink }}">
</picture>
</figure>
{{ end }}
</div>
@ -118,10 +128,12 @@
{{ with $imgs }}
{{ range $imgs }}
{{ $img := .}}
<img src="{{ $img.Permalink }}" alt="{{ $img.Name }}">
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp picture" }}
<picture>
<source srcset="{{ $webp.Permalink }}" type="image/webp">
<img src='{{ $jpeg.Permalink }}' loading="lazy" width="{{ $webp.Width }}" height="{{ $webp.Height }}" alt="{{ .Name }}">
</picture>
{{ end}}
{{ end }}
</div>

Loading…
Cancel
Save