image processing

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

2
.gitignore vendored

@ -1,3 +1,3 @@
resources resources
.hugo_build* .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;"> <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.*") }} {{ $img := resources.GetMatch (print .File.Dir "/illustration.*") }}
{{ with $img }} {{ with $img }}
{{- $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;"> <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;"> <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> </figure>
{{ end }} {{ end }}
</div> </div>

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

@ -8,8 +8,13 @@
<div id="galerie" class="carousel"> <div id="galerie" class="carousel">
{{ $carouselImages := resources.Match "carousel/*"}} {{ $carouselImages := resources.Match "carousel/*"}}
{{ range $carouselImages }} {{ range $carouselImages }}
{{- $jpeg := .Resize (printf "%dx%d jpeg" .Width .Height) }}
{{- $webp := .Resize (printf "%dx%d webp picture" .Width .Height) }}
<figure class="image"> <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> </figure>
{{ end }} {{ end }}
</div> </div>

@ -19,9 +19,14 @@
<p class="mb-6">{{ .Title }}</p> <p class="mb-6">{{ .Title }}</p>
<div class="columns is-multiline is-mobile is-justify-content-center"> <div class="columns is-multiline is-mobile is-justify-content-center">
{{ range $img }} {{ range $img }}
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp text" }}
<div class="column is-one-quarter-mobile is-2-tablet p-1"> <div class="column is-one-quarter-mobile is-2-tablet p-1">
<figure class="image"> <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> </figure>
</div> </div>
{{ end }} {{ end }}
@ -37,9 +42,14 @@
<p class="mb-6">{{ .Title }}</p> <p class="mb-6">{{ .Title }}</p>
<div class="columns is-multiline is-mobile"> <div class="columns is-multiline is-mobile">
{{ range $img }} {{ range $img }}
{{- $jpeg := .Resize "600x jpeg" }}
{{- $webp := .Resize "600x webp text" }}
<div class="column is-one-quarter-mobile is-2-tablet p-1"> <div class="column is-one-quarter-mobile is-2-tablet p-1">
<figure class="image"> <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> </figure>
</div> </div>
{{ end }} {{ end }}

@ -14,8 +14,12 @@
{{ if and (isset .Params "presse") (.Params.presse) }} {{ if and (isset .Params "presse") (.Params.presse) }}
{{ $img := resources.GetMatch (print .File.Dir "/principal.*") }} {{ $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="column border has-background-black has-text-white">
<!-- <div class="gauche"> --> <!-- <div class="gauche"> -->
<p class="mb-3 is-uppercase">{{ .Title }}</p> <p class="mb-3 is-uppercase">{{ .Title }}</p>

@ -13,17 +13,22 @@
{{ range .Pages.ByDate.Reverse }} {{ range .Pages.ByDate.Reverse }}
<div class="column is-one-quarter"> <div class="column is-one-quarter">
<figure class="image is-5by3">
{{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
<a href="{{ .Permalink|relURL }}"> <a href="{{ .Permalink|relURL }}">
{{ $img := resources.GetMatch (print .File.Dir "/principal*") }}
{{ with $img }} {{ with $img }}
<img src="{{ .Permalink }}"> {{- $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 }} {{ end }}
<div class="overlay"> <div class="overlay">
<span class="has-text-black is-size-3-mobile is-size-5-tablet is-size-3-widescreen">{{ .Title }}</span> <span class="has-text-black is-size-3-mobile is-size-5-tablet is-size-3-widescreen">{{ .Title }}</span>
</div> </div>
</a>
</figure> </figure>
</a>
</div> </div>
{{ end }} {{ end }}
</div> </div>

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

Loading…
Cancel
Save