ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

render-image.html (2248B)


      1 {{ $image := (.Page.Resources.GetMatch  .Destination) }}
      2 {{ $alt := .Text }}
      3 {{ $title := "" }}
      4 {{ if ne .Text "" }}
      5   {{ $title = .Text }}
      6 {{ end }}
      7 {{ if ne .Title "" }}
      8   {{ $title = .Title }}
      9 {{ end }}
     10 {{ $placeholder := ($image.Resize "48x q20") | images.Filter (images.GaussianBlur 6) }}
     11 {{ $src := $image }}
     12 {{ $src_set := ""}}
     13 
     14 {{ $src_set = (print $image.RelPermalink " " $image.Width "w") }}
     15 {{ $src := $image }}
     16 
     17 {{ if ge $image.Width "500"}}
     18 {{ $x_small := $image.Resize "500x" }}
     19 {{ $src_set = (print $src_set ", "  $x_small.RelPermalink " 500w") }}
     20 {{ end }}
     21 
     22 {{ if ge $image.Width "800"}}
     23 {{ $small := $image.Resize "800x" }}
     24 {{ $src_set = (print $src_set ", " $small.RelPermalink " 800w") }}
     25 {{ end }}
     26 
     27 {{ if ge $image.Width "1200"}}
     28 {{ $medium := $image.Resize "1200x" }}
     29 {{ $src_set = (print $src_set ", " $medium.RelPermalink " 1200w") }}
     30 {{ end }}
     31 
     32 {{ if gt $image.Width "1500"}}
     33 {{ $large := $image.Resize "1500x" }}
     34 {{ $src_set = (print $src_set ", " $large.RelPermalink " 1500w") }}
     35 {{ end }}
     36 
     37 {{ $figure_class := "image-figure" }}
     38 
     39 
     40 <noscript>
     41   <style>
     42     figure.lazy {
     43       display: none;
     44     }
     45   </style>
     46   <figure class="{{ $figure_class }}">
     47     <center>
     48       <img
     49         src="{{ $src.RelPermalink }}"
     50         style="max-width: 100%; height: auto;"
     51         alt={{ $title }}
     52         title={{ $title }}
     53       />
     54       <figcaption>
     55       <em>{{ .Text }}
     56         <a title="{{ $title }}" href="{{ $image.RelPermalink }}">
     57           <i class="no-sup fab fa-font-awesome-flag"></i>
     58         </a>
     59       </em>
     60       </figcaption>
     61     </center>
     62   </figure>
     63 </noscript>
     64 
     65 <figure class="{{ $figure_class }} lazy">
     66   <center>
     67     <img class="lazyload" data-sizes="auto" src="{{ $src.RelPermalink }}"
     68       style="max-width: 100%; height: auto;"
     69       srcset="data:image/jpeg;base64,{{ $placeholder.Content | base64Encode }}" data-src="{{ $src.RelPermalink }}"
     70       data-srcset="{{ $src_set }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt={{ $title }} title={{ $title }} />
     71     <figcaption>
     72       <em>{{ .Text | safeHTML }}
     73         <a title="{{ $title }}" href="{{ $image.RelPermalink }}">
     74           <i class="no-sup fab fa-font-awesome-flag"></i>
     75         </a>
     76       </em>
     77     </figcaption>
     78   </center>
     79 </figure>