Move showcase images to proper Resources

2026-08-24 15:28:54 +00:00 · 2018-02-01 10:07:47 +01:00
parent 0544b57dfa
commit 0524479e01
62 changed files with 25 additions and 50 deletions
@@ -7,6 +7,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/showcase-1password.png
 ---
@@ -6,6 +6,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/screenshot-hugo-datocms-boomtown.jpg
 ---
@@ -6,7 +6,5 @@ repo:
 creator:
  - name: Sérgio Jardim
    link:
-images:
- - /images/showcase/showcase-brightline-org-hugo-netlify-cloudinary.jpg
 ---
 The goal of this TED Women 2017, held in New Orleans, was to surface bold ideas from women and those who support them. We heard from an entrepreneur with an idea poised to transform how we consume power and from an architect who sees her work as being a healer. In this report, you can read these and others TEDWomen 2017 event's takeaways.
@@ -7,6 +7,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/crossref.png
 ---
@@ -7,7 +7,5 @@ repo:
 creator:
  - name: eSolia Inc.
    link:
-images:
- - /images/showcase/1436586928778_thenewdynamic-showcase-esolia-com-150710.jpg
 ---
 eSolia had experimented with various other site generators, both proprietary and open source, and with server-side CMSs. We wanted the superior security and performance of a static site, without having to deal with development environment dependencies, meaning having to keep various libraries updated. [Hugo](http://gohugo.io/), written in the modern Go language, fits that requirement perfectly. It is not only available as a single, easy-to-install binary file for Mac, Linux and Windows, it was written to be insanely great in terms of speed and performance. Most sites build in milliseconds; in fact it takes longer to sync them to your web host than it does to generate the site! We like it so much that we built my personal site [Rick Cogley Central](http://rick.cogley.info/), eSolia's [English esolia.com](http://esolia.com/) and [Japanese esolia.co.jp](http://esolia.co.jp/) sites, and finally, eSolia's professional blog at [eSolia.pro](http://esolia.pro/) in it. As of July 2015, Hugo's community is vibrant, development is actively proceeding, and we'd love to welcome new users to the fold. Also see:[Why Hugo? A static site generator optimized for performance](http://esolia.pro/en/why-did-esolia-choose-hugo/)[](http://esolia.pro/en/why-did-esolia-choose-hugo/)
@@ -6,8 +6,6 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/hugo-forestgiant.jpg
 ---


@@ -6,6 +6,4 @@ repo: https://github.com/forestryio
 creator:
  - name:
    link:
-images:
- - /images/showcase/forestry.png
 ---
@@ -8,6 +8,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/labs-us-gov-hugo.jpg
 ---
@@ -7,6 +7,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/letsencrypt.jpg
 ---
@@ -6,6 +6,4 @@ repo:
 creator:
  - name: Cantiere Creativo
    link: https://www.cantierecreativo.net/
-images:
- - /images/showcase/linking-art-middleman-datocms.jpg
 ---
@@ -6,6 +6,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/netlify.png
 ---
@@ -7,6 +7,4 @@ repo:
 creator:
  - name:
    link:
-images:
-  - /images/showcase/showcase-prettyflyfpv.jpg
 ---
@@ -6,6 +6,4 @@ repo:
 creator:
  - name:
    link:
-images:
- - /images/showcase/showcase-smashingmag.jpg
 ---
@@ -6,6 +6,4 @@ repo: https://github.com/upframe/upframe.co
 creator:
  - name:
    link:
-images:
- - /images/showcase/upframe.png
 ---
@@ -1,7 +1,9 @@
 <a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white flex-auto hover-bg-near-white mb3 mr3 w-100 w-40-l">
  <div class="flex flex-column black h-100 mb2 pa3 pa4-l">
-    {{with .Params.images}}
-    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" data-src="{{index . 0}}" class="grow img lazyload" />
+    {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+    {{ with $img }}
+    {{ $img := .Fill "600x300 top" }}
+    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" data-src="{{ .RelPermalink }}" class="grow img lazyload" />
    {{end}}
    <div style="margin-top:auto;">{{/* the margin aligns to the bottom */}}
      <h2 class="dib f3 mt4">
@@ -1,30 +1,29 @@
 <section class="bg-near-white mid-gray pb5 ph4 ph5-ns pt4 w-100">
-<h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
-{{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
+  <h3 class="black f1 fw4 lh-title ma0 pb3 pt0-l pt4">Showcase</h3>
+  {{/* NOTE: transitions for this section are in themes/gohugoioTheme/src/css/_carousel.css */}}
  <div class="w-100">
    <div class="w-100 overflow-x-scroll">
      <div class="row nowrap mv2 pb1">
-        {{ range first 10 (where .Site.RegularPages "Section" "showcase") }}
-          {{if .Params.images}} {{/* Only show a tile if there's an image */}}
-            <a href="{{.URL}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:455px;"{{with .Params.images}} data-bg="{{ index . 0}}"{{end}}>{{/* data-bg uses a lazyload script to load the actual background image. It is located here: themes/gohugoioTheme/src/js/lazysizes.js */}}
-              {{with .Title}}{{/* The title only shows if there is one, and on hover with a slight background gradient (in CSS file) */}}
-                <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
-                  <div class="absolute bottom-0 pa2 tc white">
-                    {{.}} &#8594;
-                  </div>
-                </div>
-              {{end}}
-            </a>
+        {{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
+        {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+        {{ with $img }}
+        {{ $img := .Fill "600x300 top" }}
+        <a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:455px;" data-bg="{{ $img.RelPermalink }}">{{/* data-bg uses a lazyload script to load the actual background image. It is located here: themes/gohugoioTheme/src/js/lazysizes.js */}}
+          {{with $p.Title}}
+          <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
+            <div class="absolute bottom-0 pa2 tc white">
+              {{.}} &#8594;
+            </div>
+          </div>
          {{end}}
+        </a>
+        {{ end }}
        {{end}}
      </div>
    </div>
-
  </div>
  {{/* END */}}
-
  <div class="flex w-100 mt4 justify-end">{{/* using Flex to make the button show up on the right side */}}
    <a href="/showcase/" class="br2 f6 bg-primary-color-dark hover-bg-primary-color link ph3 pv2 ttu white">See All</a>
  </div>
-
-  </section>
+</section>
@@ -10,9 +10,11 @@
    </header>
    <div class="flex-l">
      <div class="mw8 w-75-l">
-        {{ with .Params.images }}
-          <img src="{{ index . 0 }}" alt="Featured Image for {{ $.Title }}" class="img">
-        {{ end }}
+      {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
+      {{ with $img }}
+      {{ $img := .Resize "640x" }}
+      <img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}" height="{{ $img.Height }}" class="mw-100">
+      {{ end }}
        {{with .Content}}
          <div class="nested-copy-line-height nested-img nested-links">
            {{- . -}}