Make some improvements to the fullwidth-image partial
- Add some handling of SVGs so the template doesn't attempt to resize them. - Include custom classes in the <figure class> attribute - Do not link to SVG images - Only include <img srcset> if there are multiple sized images. This mostly supports SVG figures where there's only ever one.
This commit is contained in:
		
							parent
							
								
									accd1aceeb
								
							
						
					
					
						commit
						05956b83b8
					
				
					 1 changed files with 23 additions and 12 deletions
				
			
		| 
						 | 
				
			
			@ -1,28 +1,39 @@
 | 
			
		|||
{{- $image := .resource -}}
 | 
			
		||||
 | 
			
		||||
{{-
 | 
			
		||||
  $resizedImages := dict
 | 
			
		||||
    "full"    ($image.Fit "2560x2560")
 | 
			
		||||
    "half"    ($image.Fit "1280x1280")
 | 
			
		||||
    "quarter" ($image.Fit "640x640")
 | 
			
		||||
-}}
 | 
			
		||||
{{- $isSVG := strings.Contains $image.MediaType.SubType "svg" -}}
 | 
			
		||||
{{- $linksToFullSizeImage := and .linksToFullSizeImage (not $isSVG) -}}
 | 
			
		||||
 | 
			
		||||
{{- $resizedImages := dict "full" $image -}}
 | 
			
		||||
{{- if not $isSVG -}}
 | 
			
		||||
  {{-
 | 
			
		||||
    $resizedImages := dict
 | 
			
		||||
      "full"    ($image.Fit "2560x2560")
 | 
			
		||||
      "half"    ($image.Fit "1280x1280")
 | 
			
		||||
      "quarter" ($image.Fit "640x640")
 | 
			
		||||
  -}}
 | 
			
		||||
{{ end }}
 | 
			
		||||
 | 
			
		||||
{{- $classes := slice "figure" "figure--image" -}}
 | 
			
		||||
{{- if eq .size "main" -}}
 | 
			
		||||
  {{ $classes = $classes | append "figure--main-column" }}
 | 
			
		||||
{{- end -}}
 | 
			
		||||
{{- with .class -}}
 | 
			
		||||
  {{ $classes = $classes | append . }}
 | 
			
		||||
{{- end -}}
 | 
			
		||||
 | 
			
		||||
<figure class="{{ delimit $classes "  " }}">
 | 
			
		||||
  {{ if .linksToFullSizeImage -}}
 | 
			
		||||
  {{ if $linksToFullSizeImage -}}
 | 
			
		||||
    <a href="{{ $image.RelPermalink }}">
 | 
			
		||||
  {{- end -}}
 | 
			
		||||
    <img
 | 
			
		||||
      src="{{ (index $resizedImages "full").RelPermalink }}"
 | 
			
		||||
      srcset="
 | 
			
		||||
        {{ (index $resizedImages "full").RelPermalink }} 2560w,
 | 
			
		||||
        {{ (index $resizedImages "half").RelPermalink }} 1280w,
 | 
			
		||||
        {{ (index $resizedImages "quarter").RelPermalink }} 640w,
 | 
			
		||||
      "
 | 
			
		||||
      {{ if gt (len $resizedImages) 1 -}}
 | 
			
		||||
        srcset="
 | 
			
		||||
          {{ (index $resizedImages "full").RelPermalink }} 2560w,
 | 
			
		||||
          {{ (index $resizedImages "half").RelPermalink }} 1280w,
 | 
			
		||||
          {{ (index $resizedImages "quarter").RelPermalink }} 640w,
 | 
			
		||||
        "
 | 
			
		||||
      {{ end }}
 | 
			
		||||
      {{ with $image.Params.alt | default $image.Title }} alt="{{ . }}"{{ end }}
 | 
			
		||||
      {{ with $image.Title }} title="{{ . }}"{{ end }}>
 | 
			
		||||
  {{ if .linksToFullSizeImage -}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue