Browse Source

transitioning to page resource images

master
Alexander Avery 3 years ago
parent
commit
7653a0b9d6
  1. 4
      assets/sass/main.scss
  2. 2
      layouts/_default/single.html
  3. 4
      layouts/authors/list.html
  4. 4
      layouts/games/list.html
  5. 4
      layouts/partials/article-card-alternate.html
  6. 10
      layouts/partials/article-card.html
  7. 17
      layouts/partials/responsive-image.html

4
assets/sass/main.scss

@ -67,6 +67,10 @@ a:visited, a:hover {
max-width: 820px;
margin: auto;
padding: 4px;
img {
width: 100%;
}
}
.center-text {

2
layouts/_default/single.html

@ -7,7 +7,7 @@
{{ range (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end}}
{{ partial "responsive-image.html" (dict "context" .Params.featured "class" "shadow large-image") }}
{{ partial "responsive-image.html" (dict "context" . "class" "shadow large-image") }}
</div>
{{ if .Params.toc }}

4
layouts/authors/list.html

@ -8,7 +8,9 @@
<span> | </span>
<a class="small-text" href="mailto:{{ .Params.email }}">{{ .Params.email}}</a>
<div class="break"></div>
<img class="shadow small-image" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
{{ with .Resources.GetMatch "avatar" }}
<img class="shadow small-image" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
{{ end }}
</div>
{{ end }}
{{ .Content }}

4
layouts/games/list.html

@ -3,14 +3,14 @@
<h1 class="center-text">{{ .Title | markdownify }}</h1>
{{ $authors := .Params.authors | default (slice .Site.Params.defaultAuthor) }}
<a class="center-text" href={{ printf "/%s/%s" "authors" (index $authors 0 | urlize) }}><h2 class="center-text">{{ index $authors 0 }}</h2></a>
{{ if .Params.date }}<h2 class="small-text">{{ .Date.Format "Mon | Jan 2, 2006" }}</h2>{{ end }}
{{ if .Params.releaseDate }}<h2 class="small-text">Released {{ dateFormat "Mon | Jan 2, 2006" .Params.releaseDate }}</h2>{{ end }}
{{ range (.GetTerms "tags") }}
<a class="small-text" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{ end }}
<div class="break"></div>
<h2 class="small-text">Platforms:</h2>
<span class="margin small-text">{{ delimit .Params.platforms " · " }}</span>
{{ partial "responsive-image.html" (dict "context" .Params.featured "class" "shadow fill-wh") }}
{{ partial "responsive-image.html" (dict "context" . "class" "shadow fill-wh") }}
</div>
{{ if .Params.toc }}

4
layouts/partials/article-card-alternate.html

@ -1,7 +1,9 @@
<a class="article-link" href={{ printf "/%s/%s" "authors" (.Params.name | urlize) }}>
<article class="card-alternate shadow float-on-hover">
<div>
<img class="shadow" src="{{ .Params.avatar }}" alt="{{ .Params.alt }}"/>
{{ with .Resources.GetMatch "avatar" }}
<img class="shadow" src="{{ .RelPermalink }}" alt="{{ .Params.alt }}"/>
{{ end }}
</div>
<div>
<h2>{{ .Params.name }}</h2>

10
layouts/partials/article-card.html

@ -1,7 +1,7 @@
<article class="shadow float-on-hover card">
<div class="article-image">
<a href=" {{ .Permalink }}">
{{ partial "responsive-image.html" (dict "context" .Params.featured)}}
{{ partial "responsive-image.html" (dict "context" .)}}
</div>
<div class="article-info-container">
<div class="article-info">
@ -11,7 +11,13 @@
<a href="{{ .Permalink }}" class="article-title fill-wh">
<h2>{{ .Title | markdownify }}</h2>
{{ if ne .Kind "term"}}
<span class="date">{{ .Date.Format "2006/01/02" }}</span>
<span class="date">
{{ if .Date }}
{{ .Date.Format "2006/01/02" }}
{{ else }}
TBD
{{ end }}
</span>
{{ end }}
</a>
</div>

17
layouts/partials/responsive-image.html

@ -1,10 +1,23 @@
{{ if resources.Get .context.Params.featured.url }}
<img class="{{ .class | default "fill-wh"}}"
{{ with resources.Get .context.url }}
{{ with resources.Get .context.Params.featured.url }}
srcset="
{{ (.Resize "320x q30").RelPermalink }} 320w,
{{ (.Resize "600x q40").RelPermalink }} 600w,
{{ (.Resize "1200x q65").RelPermalink }} 2x"
src="{{ .RelPermalink }}"
{{ end }}
alt="{{ .context.alt }}"
alt="{{ .context.Params.featured.alt }}"
/>
{{ else }}
<img class="{{ .class | default "fill-wh"}}"
{{ with .context.Resources.GetMatch .context.Params.featured.url }}
srcset="
{{ (.Resize "320x q30").RelPermalink }} 320w,
{{ (.Resize "600x q40").RelPermalink }} 600w,
{{ (.Resize "1200x q65").RelPermalink }} 2x"
src="{{ .RelPermalink }}"
alt="{{ .Params.alt }}"
{{ end }}
/>
{{ end }}

Loading…
Cancel
Save