featuredImage shortcode added, image front-matter used as default value of meta-image

{{< featuredImage >}}
This commit is contained in:
zzossig 2020-02-25 00:34:45 +09:00
parent e32e230331
commit b071b05f35
5 changed files with 47 additions and 8 deletions

View File

@ -0,0 +1,13 @@
.featured-image {
width: 100%;
object-fit: cover;
&--wrapper {
width: 100%;
height: 100%;
@include flexbox();
@include align-items(center);
@include justify-content(center);
}
}

View File

@ -78,6 +78,7 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
@import 'components/ie';
@import 'components/tab';
@import 'components/button';
@import 'components/featuredImage';
@import 'pages/404';
@import 'pages/about';

View File

@ -18,13 +18,24 @@
<meta property="og:url" content="{{ .Permalink | absLangURL }}">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:description" content="{{ $.Param "description" }}">
{{ with $.Param "meta_image" }}
<meta property="og:image" content="{{ . | absURL }}">
<meta property="og:image:url" content="{{ . | absURL }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:app:name:iphone" content="{{ $.Site.Title }}">
<meta property="twitter:title" content="{{ $.Param "title" }}">
<meta property="twitter:description" content="{{ $.Param "description" }}">
{{ if $.Param "meta_image" }}
{{ with $.Param "meta_image" }}
<meta property="og:image" content="{{ . | absURL }}">
<meta property="og:image:url" content="{{ . | absURL }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:app:name:iphone" content="{{ $.Site.Title }}">
<meta property="twitter:title" content="{{ $.Param "title" }}">
<meta property="twitter:description" content="{{ $.Param "description" }}">
{{ end }}
{{ else if $.Param "image" }}
{{ with $.Param "image" }}
<meta property="og:image" content="{{ . | absURL }}">
<meta property="og:image:url" content="{{ . | absURL }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:app:name:iphone" content="{{ $.Site.Title }}">
<meta property="twitter:title" content="{{ $.Param "title" }}">
<meta property="twitter:description" content="{{ $.Param "description" }}">
{{ end }}
{{ end }}
{{ hugo.Generator }}
<meta name="msapplication-TileColor" content="{{ $.Scratch.Get "themeTitleColor" | default "#fff" }}">

View File

@ -0,0 +1,14 @@
{{ $imgSrc := false }}
{{ $params := $.Page.Params }}
{{ if $params.image }}
{{ $imgSrc = $params.image }}
{{ else if $params.featured_image }}
{{ $imgSrc = (print "images/" $params.featured_image) }}
{{ end }}
{{ if $imgSrc }}
<div class="featured-image__wrapper">
<img src="{{ $imgSrc | relURL }}" alt="{{ (.Get "alt") | default "Featured Image" }}" class="featured-image" style="width: {{ with (.Get "width") }}{{ . }}px{{ end }};height: {{ with (.Get "height") }}{{ . }}px{{ end }};">
</div>
{{ end }}