supporto per image-post e image-list #340
@ -1,41 +1,52 @@
|
|||||||
<div class="box post">
|
<div class="box post">
|
||||||
|
|
||||||
{{ $rasters := slice "jpeg" "png" }}
|
|
||||||
{{ $newres := "360x250 smart" }}
|
{{ $newres := "360x250 smart" }}
|
||||||
|
|
||||||
|
{{- $image_src := "" }}
|
||||||
|
{{- $image_alt := "" }}
|
||||||
|
{{- $image_caption := "" }}
|
||||||
{{/* immagine di default */}}
|
{{/* immagine di default */}}
|
||||||
{{- $featimg := (resources.Get "/images/placeholder_elenco.png").RelPermalink -}}
|
{{- $image := (resources.Get "/images/placeholder_elenco.png") -}}
|
||||||
|
|
||||||
{{- if .Params.image -}}
|
{{/* priorità maggiore: image_list */}}
|
||||||
{{/* se è stata definita un'immagine featured */}}
|
{{- if .Params.image_list }}
|
||||||
{{- $img := .Page.Resources.GetMatch .Params.image -}}
|
{{- $image_src = .Params.image_list.src }}
|
||||||
{{- if $img -}}
|
{{- with .Params.image_list.alt }}
|
||||||
{{- if in $rasters $img.MediaType.SubType -}}
|
{{- $image_alt = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
|
|||||||
{{- $img = $img.Fill $newres -}}
|
{{- end }}
|
||||||
{{ end }}
|
{{- with .Params.image_list.caption }}
|
||||||
{{- $featimg = $img.RelPermalink -}}
|
{{- $image_caption = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
idem sopra idem sopra
|
|||||||
{{- end -}}
|
{{- end }}
|
||||||
{{- else if .Params.featured -}}
|
{{- end }}
|
||||||
{{/* 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 -}}
|
|
||||||
|
|
||||||
<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
amreo
commented
Come viene gestito il caso di fallback? Come viene gestito il caso di fallback?
amreo
commented
Ah, ok. Forse è meglio spostare Ah, ok. Forse è meglio spostare `{{- $image := (resources.Get "/images/placeholder_elenco.png") -}}` qua sotto, in un else, per ragioni di ordine mentale.
paspo
commented
qui però sfociamo nella semantica.... Il default si imposta all'inizio e se ne fa override in seguito 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">
|
<div class="inner">
|
||||||
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||||
|
|
||||||
|
@ -23,34 +23,44 @@
|
|||||||
{{ partial "tags.html" . }}
|
{{ partial "tags.html" . }}
|
||||||
</header>
|
</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
amreo
commented
idem sopra idem sopra
|
|||||||
|
{{- end }}
|
||||||
|
{{- with .Params.image_post.caption }}
|
||||||
|
{{- $image_caption = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
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
amreo
commented
idem idem
|
|||||||
|
{{- end }}
|
||||||
|
{{- with .Params.image_caption }}
|
||||||
|
{{- $image_caption = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
idem idem
|
|||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
|
{{- if $image_src }}
|
||||||
|
{{- $image := .Page.Resources.GetMatch $image_src }}
|
||||||
{{- $maxHeight := 600 -}}
|
{{- $maxHeight := 600 -}}
|
||||||
{{- $ratio := 2.33 -}}
|
{{- $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>
|
<span class="image featured"><figure>
|
||||||
{{- if in $rasters $img.MediaType.SubType -}}
|
{{- if gt $image.Height $maxHeight -}}
|
||||||
{{- if gt $img.Height $maxHeight -}}
|
{{- $image = $image.Resize (printf "x%d webp q50" $maxHeight) -}}
|
||||||
{{- $img = $img.Resize (printf "x%d webp q50" $maxHeight) -}}
|
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<img src="{{ $img.RelPermalink }}" alt="{{ .Params.image_alt }}" {{- if ge (mul $img.Height $ratio) $img.Width -}}style="width: auto;" {{- end -}}/>
|
<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
amreo
commented
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.
paspo
commented
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
|
|||||||
{{ else }}
|
{{- with $image_caption -}}
|
||||||
<img src="{{ $img.RelPermalink }}" alt="{{ .Params.image_alt }}" />
|
<figcaption style="max-width: {{- $image.Width -}}px;">{{- . | markdownify -}}</figcaption>
|
||||||
{{- end -}}
|
|
||||||
{{- with .Params.image_caption -}}
|
|
||||||
<figcaption style="max-width: {{- $img.Width -}}px;">{{- . | markdownify -}}</figcaption>
|
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</figure></span>
|
</figure></span>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
@ -1,42 +1,53 @@
|
|||||||
<section>
|
<section>
|
||||||
<div class="box post">
|
<div class="box post">
|
||||||
|
{{ $newres := "360x250 webp q50 smart" }}
|
||||||
|
|
||||||
{{ $rasters := slice "jpeg" "png" }}
|
{{- $image_src := "" }}
|
||||||
{{ $newres := "360x250 smart" }}
|
{{- $image_alt := "" }}
|
||||||
|
{{- $image_caption := "" }}
|
||||||
{{/* immagine di default */}}
|
{{/* 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
amreo
commented
idem idem
|
|||||||
|
|
||||||
{{- if .Params.image -}}
|
{{/* priorità maggiore: image_list */}}
|
||||||
{{/* se è stata definita un'immagine featured */}}
|
{{- if .Params.image_list }}
|
||||||
{{- $img := .Page.Resources.GetMatch .Params.image -}}
|
{{- $image_src = .Params.image_list.src }}
|
||||||
{{- if $img -}}
|
{{- with .Params.image_list.alt }}
|
||||||
{{- if in $rasters $img.MediaType.SubType -}}
|
{{- $image_alt = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
idem idem
|
|||||||
{{- $img = $img.Fill $newres -}}
|
{{- end }}
|
||||||
{{ end }}
|
{{- with .Params.image_list.caption }}
|
||||||
{{- $featimg = $img.RelPermalink -}}
|
{{- $image_caption = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
idem idem
|
|||||||
{{- end -}}
|
{{- end }}
|
||||||
{{- else if .Params.featured -}}
|
{{- end }}
|
||||||
{{/* 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 -}}
|
|
||||||
|
|
||||||
<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
amreo
commented
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
amreo
commented
idem idem
|
|||||||
|
{{- end }}
|
||||||
|
{{- with .Params.image_caption }}
|
||||||
|
{{- $image_caption = . }}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
idem idem
|
|||||||
|
{{- end }}
|
||||||
|
{{- end }}
|
||||||
|
|
||||||
|
{{- if $image_src }}
|
||||||
|
{{- $image = .Page.Resources.GetMatch $image_src }}
|
||||||
|
{{- end}}
|
||||||
paspo marked this conversation as resolved
Outdated
amreo
commented
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">
|
<div class="inner">
|
||||||
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
<h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
|
||||||
{{ if .Site.Params.show_post_dates | default true }}
|
{{ if .Site.Params.show_post_dates | default true }}
|
||||||
|
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 mantenerewith
skippa il codice nestato se l'elemento non è disponibile.In questo modo,
alt
ecaption
non sono obbligatori.