supporto per image-post e image-list #340

Merged
paspo merged 1 commits from paspo/bglug.it:big-images into main 2024-11-12 13:08:18 +00:00
3 changed files with 119 additions and 87 deletions
Showing only changes of commit 3e313a4cb8 - Show all commits

View File

@ -1,41 +1,52 @@
<div class="box post">
{{ $rasters := slice "jpeg" "png" }}
{{ $newres := "360x250 smart" }}
{{- $image_src := "" }}
{{- $image_alt := "" }}
{{- $image_caption := "" }}
{{/* immagine di default */}}
{{- $featimg := (resources.Get "/images/placeholder_elenco.png").RelPermalink -}}
{{- $image := (resources.Get "/images/placeholder_elenco.png") -}}
{{- if .Params.image -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img := .Page.Resources.GetMatch .Params.image -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- else if .Params.featured -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img := .Page.Resources.GetMatch .Params.featured -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- else -}}
{{/* altrimenti prendo la prima risorsa immagine disponibile */}}
{{- $img := (.Page.Resources.ByType "image").GetMatch "**" -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- end -}}
{{/* priorità maggiore: image_list */}}
{{- if .Params.image_list }}
{{- $image_src = .Params.image_list.src }}
{{- with .Params.image_list.alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

Perché hai usato with invece che fare $image_alt = .Params.image_list.src (come sopra)?

Imo se il significato è equivalente (non conosco bene hugo), allora sarebbe meglio usare quello che ho suggerito per maggiore chiarezza e meno linee da mantenere

Perché hai usato with invece che fare `$image_alt = .Params.image_list.src` (come sopra)? Imo se il significato è equivalente (non conosco bene `hugo`), allora sarebbe meglio usare quello che ho suggerito per maggiore chiarezza e meno linee da mantenere
Outdated
Review

with skippa il codice nestato se l'elemento non è disponibile.
In questo modo, alt e caption non sono obbligatori.

`with` skippa il codice nestato se l'elemento non è disponibile. In questo modo, `alt` e `caption` non sono obbligatori.
{{- end }}
{{- with .Params.image_list.caption }}
{{- $image_caption = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem sopra

idem sopra
{{- end }}
{{- end }}
<a href="{{ .RelPermalink }}" class="image left"><img src="{{ $featimg }}" alt="{{ .Params.image_alt }}" /></a>
{{/* in alternativa: image_post */}}
{{- if and (not $image_src) .Params.image_post }}
{{- $image_src = .Params.image_post.src }}
{{- with .Params.image_post.alt }}
{{- $image_alt = . }}
{{- end }}
{{- with .Params.image_post.caption }}
{{- $image_caption = . }}
{{- end }}
{{- end }}
{{/* in alternativa uso il metodo vecchio */}}
{{- if and (not $image_src) .Params.image }}
{{- $image_src = .Params.image }}
{{- with .Params.image_alt }}
{{- $image_alt = . }}
{{- end }}
{{- with .Params.image_caption }}
{{- $image_caption = . }}
{{- end }}
{{- end }}
paspo marked this conversation as resolved Outdated
Outdated
Review

Come viene gestito il caso di fallback?

Come viene gestito il caso di fallback?
Outdated
Review

Ah, ok. Forse è meglio spostare {{- $image := (resources.Get "/images/placeholder_elenco.png") -}} qua sotto, in un else, per ragioni di ordine mentale.

Ah, ok. Forse è meglio spostare `{{- $image := (resources.Get "/images/placeholder_elenco.png") -}}` qua sotto, in un else, per ragioni di ordine mentale.
Outdated
Review

qui però sfociamo nella semantica....

Il default si imposta all'inizio e se ne fa override in seguito nel codice.
Il fallback si imposta alla fine se non è stato impostato un altro valore nel codice.

A mio avviso, è la stessa roba, dipende solo da come la vuoi chiamare.

Onestamente, siamo io e te a guardare a sto codice, e anche se non lo hai trovato subito, è stata questione di secondi, immagino...

Personalemnte, non starei a perderci il sonno.

Se proprio ti pesa, vai di PR.

qui però sfociamo nella semantica.... Il default si imposta all'inizio e se ne fa override in seguito nel codice. Il fallback si imposta alla fine se non è stato impostato un altro valore nel codice. A mio avviso, è la stessa roba, dipende solo da come la vuoi chiamare. Onestamente, siamo io e te a guardare a sto codice, e anche se non lo hai trovato subito, è stata questione di secondi, immagino... Personalemnte, non starei a perderci il sonno. Se proprio ti pesa, vai di PR.
{{- if $image_src }}
{{- $image = .Page.Resources.GetMatch $image_src }}
{{- end}}
{{- $image = $image.Fill $newres -}}
<a href="{{ .RelPermalink }}" class="image left"><img src="{{ $image.RelPermalink }}" alt="{{ $image_alt }}" /></a>
<div class="inner">
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>

View File

@ -23,34 +23,44 @@
{{ partial "tags.html" . }}
</header>
{{- if or .Params.image .Params.featured }}
{{- $image_src := "" }}
{{- $image_alt := "" }}
{{- $image_caption := "" }}
{{/* priorità maggiore: image_post */}}
{{- if .Params.image_post }}
{{- $image_src = .Params.image_post.src }}
{{- with .Params.image_post.alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem sopra

idem sopra
{{- end }}
{{- with .Params.image_post.caption }}
{{- $image_caption = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- end }}
{{/* in alternativa uso il metodo vecchio */}}
{{- if and (not $image_src) .Params.image }}
{{- $image_src = .Params.image }}
{{- with .Params.image_alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- with .Params.image_caption }}
{{- $image_caption = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- end }}
{{- if $image_src }}
{{- $image := .Page.Resources.GetMatch $image_src }}
{{- $maxHeight := 600 -}}
{{- $ratio := 2.33 -}}
{{ $rasters := slice "jpeg" "png" }}
{{- $img := "#" -}}
{{- if .Params.image -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img = .Page.Resources.GetMatch .Params.image -}}
{{- end -}}
{{- if .Params.featured -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img = .Page.Resources.GetMatch .Params.featured -}}
{{- end -}}
<span class="image featured"><figure>
{{- if in $rasters $img.MediaType.SubType -}}
{{- if gt $img.Height $maxHeight -}}
{{- $img = $img.Resize (printf "x%d webp q50" $maxHeight) -}}
{{- end -}}
<img src="{{ $img.RelPermalink }}" alt="{{ .Params.image_alt }}" {{- if ge (mul $img.Height $ratio) $img.Width -}}style="width: auto;" {{- end -}}/>
{{ else }}
<img src="{{ $img.RelPermalink }}" alt="{{ .Params.image_alt }}" />
{{- if gt $image.Height $maxHeight -}}
{{- $image = $image.Resize (printf "x%d webp q50" $maxHeight) -}}
{{- end -}}
{{- with .Params.image_caption -}}
<figcaption style="max-width: {{- $img.Width -}}px;">{{- . | markdownify -}}</figcaption>
<img src="{{ $image.RelPermalink }}" alt="{{ $image_alt }}" {{- if ge (mul $image.Height $ratio) $image.Width -}}style="width: auto;" {{- end -}}/>
paspo marked this conversation as resolved Outdated
Outdated
Review

Non mi piace che viene aperto un blocco codice hugo con if e chiuso con end nella stessa linea.

Non c'è qualche trucco che permette di ridurre la lunghezza del codice o renderlo più leggibile?, tipo usando l'equivalente echo di php (in php avrei fatto qualcosa tipo ` $image.Width) echo "style=\"width: auto;\"" ?>)

E comunque compattando l'espressione della condizione.

Non mi piace che viene aperto un blocco codice hugo con if e chiuso con end nella stessa linea. Non c'è qualche trucco che permette di ridurre la lunghezza del codice o renderlo più leggibile?, tipo usando l'equivalente echo di php (in php avrei fatto qualcosa tipo `<?php if ($image.height*$ratio > $image.Width) echo "style=\"width: auto;\"" ?>) E comunque compattando l'espressione della condizione.
Outdated
Review

hai ragione sul fatto che sia meno leggibile, però è comodo e viene usato spesso nei temi e se non ricordo male c'è anche negli esempi di hugo

hai ragione sul fatto che sia meno leggibile, però è comodo e viene usato spesso nei temi e se non ricordo male c'è anche negli esempi di hugo
{{- with $image_caption -}}
<figcaption style="max-width: {{- $image.Width -}}px;">{{- . | markdownify -}}</figcaption>
{{- end -}}
</figure></span>
{{ end }}

View File

@ -1,42 +1,53 @@
<section>
<div class="box post">
{{ $newres := "360x250 webp q50 smart" }}
{{ $rasters := slice "jpeg" "png" }}
{{ $newres := "360x250 smart" }}
{{- $image_src := "" }}
{{- $image_alt := "" }}
{{- $image_caption := "" }}
{{/* immagine di default */}}
{{- $featimg := (resources.Get "/images/placeholder_autore.png").RelPermalink -}}
{{- $image := (resources.Get "/images/placeholder_autore.png") -}}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- if .Params.image -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img := .Page.Resources.GetMatch .Params.image -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- else if .Params.featured -}}
{{/* se è stata definita un'immagine featured */}}
{{- $img := .Page.Resources.GetMatch .Params.featured -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- else -}}
{{/* altrimenti prendo la prima risorsa immagine disponibile */}}
{{- $img := (.Page.Resources.ByType "image").GetMatch "**" -}}
{{- if $img -}}
{{- if in $rasters $img.MediaType.SubType -}}
{{- $img = $img.Fill $newres -}}
{{ end }}
{{- $featimg = $img.RelPermalink -}}
{{- end -}}
{{- end -}}
{{/* priorità maggiore: image_list */}}
{{- if .Params.image_list }}
{{- $image_src = .Params.image_list.src }}
{{- with .Params.image_list.alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- with .Params.image_list.caption }}
{{- $image_caption = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- end }}
<a href="{{ .RelPermalink }}" class="image left"><img src="{{ $featimg }}" alt="{{ .Params.image_alt }}" /></a>
{{/* in alternativa: image_post */}}
{{- if and (not $image_src) .Params.image_post }}
{{- $image_src = .Params.image_post.src }}
{{- with .Params.image_post.alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- with .Params.image_post.caption }}
{{- $image_caption = . }}
{{- end }}
{{- end }}
{{/* in alternativa uso il metodo vecchio */}}
{{- if and (not $image_src) .Params.image }}
{{- $image_src = .Params.image }}
{{- with .Params.image_alt }}
{{- $image_alt = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- with .Params.image_caption }}
{{- $image_caption = . }}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem

idem
{{- end }}
{{- end }}
{{- if $image_src }}
{{- $image = .Page.Resources.GetMatch $image_src }}
{{- end}}
paspo marked this conversation as resolved Outdated
Outdated
Review

idem (fallback qui sotto)

idem (fallback qui sotto)
{{- $image = $image.Fill $newres -}}
<a href="{{ .RelPermalink }}" class="image left"><img src="{{ $image.RelPermalink }}" alt="{{ $image_alt }}" /></a>
<div class="inner">
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
{{ if .Site.Params.show_post_dates | default true }}