Skip to content

Commit

Permalink
Simplify social images and add ability to set per-page images
Browse files Browse the repository at this point in the history
- Removes the homepage summary layout in favor of the larger image card (makes it more consistent with other pages)
- Reuses new thumbnails for Webpack, Parcel, and Vite guides to add their new social images
  • Loading branch information
mdo committed Jul 21, 2022
1 parent edf9c40 commit 22d3cb5
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 5 deletions.
1 change: 1 addition & 0 deletions site/content/docs/5.2/getting-started/parcel.md
Expand Up @@ -4,6 +4,7 @@ title: "Bootstrap & Parcel"
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel.
group: getting-started
toc: true
thumbnail: guides/bootstrap-parcel@2x.png
---

<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt="">
Expand Down
1 change: 1 addition & 0 deletions site/content/docs/5.2/getting-started/vite.md
Expand Up @@ -4,6 +4,7 @@ title: "Bootstrap & Vite"
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
group: getting-started
toc: true
thumbnail: guides/bootstrap-vite@2x.png
---

<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt="">
Expand Down
1 change: 1 addition & 0 deletions site/content/docs/5.2/getting-started/webpack.md
Expand Up @@ -4,6 +4,7 @@ title: "Bootstrap & Webpack"
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack.
group: getting-started
toc: true
thumbnail: guides/bootstrap-webpack@2x.png
---

<img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt="">
Expand Down
18 changes: 13 additions & 5 deletions site/layouts/partials/social.html
@@ -1,17 +1,25 @@
{{ "<!-- Twitter -->" | safeHTML }}
<meta name="twitter:card" content="{{ if .IsHome }}summary_large_image{{ else }}summary{{ end }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
<meta name="twitter:title" content="{{ .Title | markdownify }}">
<meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
<meta name="twitter:image" content="{{ if .IsHome }}{{ .Site.Params.social_logo_path | absURL }}{{ else }}{{ .Site.Params.social_image_path | absURL }}{{ end }}">

{{ "<!-- Facebook -->" | safeHTML }}
{{ if .Page.Params.thumbnail }}
<meta name="twitter:image" content="/docs/{{ .Site.Params.docs_version }}/assets/img/{{ .Page.Params.thumbnail }}">
{{ else }}
<meta name="twitter:image" content="{{ .Site.Params.social_image_path | absURL }}">
{{ end }}

<meta property="og:url" content="{{ .Permalink }}">
<meta property="og:title" content="{{ .Title | markdownify }}">
<meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:image" content="{{ .Site.Params.social_image_path | absURL }}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1000">
<meta property="og:image:height" content="500">

{{ if .Page.Params.thumbnail }}
<meta property="og:image" content="/docs/{{ .Site.Params.docs_version }}/assets/img/{{ .Page.Params.thumbnail }}">
{{ else }}
<meta property="og:image" content="{{ .Site.Params.social_image_path | absURL }}">
{{ end }}

0 comments on commit 22d3cb5

Please sign in to comment.