Commit d25f5e06 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Get social media images generating from page resources on photo posts

parent 8164dd03
......@@ -23,7 +23,7 @@ colours:
twitterurl: ""
mastodonurl: ""
instagramurl: ""
image: "/images/2018/08/book.jpg"
image: "images/2018/08/book.jpg"
imagealt: "Two Accessibility For Everyone paperback books stacked."
description: ""
---
......
......@@ -22,7 +22,8 @@ colours:
twitterurl: ""
mastodonurl: ""
instagramurl: ""
image: "/notes/2018/07/20/21/28/osky-1.jpg"
image: "notes/2018/07/20/21/28/osky-1.jpg"
imagealt: "Selfie of me and Oskar the huskamute, he’s looking at me."
---
{{< figure class="grid two" figcaption="Inevitable" >}}
......
......@@ -21,7 +21,8 @@ colours:
tab-six: "137,64%,42%" # hsl(137,64%,42%)
slug: "book"
description: "I wrote a book! It’s called *Accessibility For Everyone*, and you can buy it in paperback and ebook from A Book Apart."
image: "/images/2017/12/book-collage.jpg"
image: "images/2017/12/book-collage.jpg"
imagealt: "Collage of photos of the Accessibility For Everyone paperback posted on people’s desks, tables and outside."
---
I wrote a book! It’s called *Accessibility For Everyone*, and you can [buy it in paperback and ebook from A Book Apart](https://abookapart.com/products/accessibility-for-everyone), and as an [audiobook on Audible](https://www.audible.com/pd/Science-Technology/Accessibility-for-Everyone-Audiobook/B07G24HLXS?source_code=AUDFPWS0223189MWT-BK-ACX0-123554&ref=acx_bty_BK_ACX0_123554_rh_us&ipRedirectOverride=true&overrideBaseCountry=true&pf_rd_p=a2114686-0da6-4a69-b176-801cc68d86c0&pf_rd_r=CJKZGDNQVCGAKRBFC54Z&). Do you want to know about how to make your website more accessible to people with disabilities and other accessibility-related needs? My book helps you do just that.<!--more-->
......
......@@ -17,7 +17,7 @@ colours:
tab-four: "5,55%,70%" # hsl(5,55%,70%)
tab-five: "6,59%,62%" # hsl(6,59%,62%)
tab-six: "4,57%,53%" # hsl(4,57%,53%)
image: "/images/2018/10/thundernerds.jpg"
image: "images/2018/10/thundernerds.jpg"
imagealt: "Screenshot of the video showing me in my spare room talking into a microphone with the three hosts’ video feeds visible in the corner."
description: ""
---
......
......@@ -17,7 +17,7 @@ colours:
tab-four: "219,50%,74%" # hsl(219,50%,74%)
tab-five: "213,56%,66%" # hsl(213,56%,66%)
tab-six: "211,61%,60%" # hsl(211,61%,60%)
image: "/images/2018/08/mastodon-elephant.png"
image: "images/2018/08/mastodon-elephant.png"
imagealt: "The Mastodon mascot is a cute elephant."
description: "Now you know why I’m moving away from Twitter, you probably have a vague idea of what I’m looking for in a social network. Mastodon is unique for a few reasons: it is federated, ethical, and inclusive."
---
......
<!-- From Indiego partials/micro-schema.html https://github.com/growdigital/indiego/blob/master/themes/indiegomin/layouts/partials/micro-schema.html -->
<!-- Schema.org markup -->
<meta itemprop="headline" content="{{ .Title }}">
{{ if eq .Type "status" }}
<meta itemprop="description" content="{{ .Summary }}">
{{ else }}
<meta itemprop="description" content="{{ .Description }}">
{{ end }}
{{ if .Params.image }}
<meta itemprop="image" content="{{ .Site.BaseURL }}{{ .Params.image }}">
{{ else if eq .Type "photos" }}
{{ with .Resources }}
{{ with .GetMatch "{*.*,*.jpg,*.png,*.jpeg}" }}{{ $photo := .Resize "580x275" }}
{{ with $photo }}<meta itemprop="image" content="{{ .Permalink }}">{{ end }}
{{ end }}{{ end }}
{{ else }}
<meta itemprop="image" content="{{ .Site.BaseURL }}{{ .Site.Params.publisherLogo }}">
{{ end }}
......
......@@ -13,7 +13,18 @@
<!-- Aspect ratio 2:1, minimum dimension 300x157 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.Image }}">
<meta name="twitter:image:alt" content="{{ .Params.ImageAlt }}">
<meta name="twitter:image:alt" content="{{ .Params.imagealt }}">
{{ else if eq .Type "photos" }}
{{ with .Resources }}
{{ with .GetMatch "{*.*,*.jpg,*.png,*.jpeg}" }}{{ $photo := .Resize "600x314" }}
{{ with $photo }}
<!-- Twitter Summary Card with Large Image data -->
<!-- Aspect ratio 2:1, minimum dimension 300x157 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ .Permalink }}">
<meta name="twitter:image:alt" content="{{ .Params.imagealt }}">
{{ end }}
{{ end }}{{ end }}
{{ else }}
<!-- Twitter Summary Card -->
<!-- Aspect ratio 1:1, minimum dimension 144x144 -->
......@@ -34,10 +45,19 @@
{{ if .Params.Image }}
<!-- If image present -->
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Params.Image }}">
<meta property="og:image:alt" content="{{ .Params.imageAlt }}">
<meta property="og:image:alt" content="{{ .Params.imagealt }}">
<!-- width & height to ensure shares of new URLs include image -->
<meta property="og:image:width" content="624">
<meta property="og:image:height" content="352">
{{ else if eq .Type "photos" }}
{{ with .Resources }}
{{ with .GetMatch "{*.*,*.jpg,*.png,*.jpeg}" }}{{ $photo := .Resize "624x352" }}
{{ with $photo }}
<meta property="og:image" content="{{ .Permalink }}">
<meta property="og:image:width" content="624">
<meta property="og:image:height" content="352">
{{ end }}
{{ end }}{{ end }}
{{ else }}
<!-- If no image, show logo. Make it square, 200px minimum -->
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Site.Params.publisherLogo }}">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment