instagram_simple.html (3056B)
1 {{- $pc := .Page.Site.Config.Privacy.Instagram -}}
2 {{- $sc := .Page.Site.Config.Services.Instagram -}}
3 {{- if not $pc.Disable -}}
4 {{ $accessToken := site.Config.Services.Instagram.AccessToken }}
5 {{- if not $accessToken -}}
6 {{- erroridf "error-missing-instagram-accesstoken" "instagram shortcode: Missing config value for services.instagram.accessToken. This can be set in config.toml, but it is recommended to configure this via the HUGO_SERVICES_INSTAGRAM_ACCESSTOKEN OS environment variable. If you are using a Client Access Token, remember that you must combine it with your App ID using a pipe symbol (<APPID>|<CLIENTTOKEN>) otherwise the request will fail." -}}
7 {{- else -}}
8 {{- $id := .Get 0 -}}
9 {{- $headers := dict "Authorization" (printf "Bearer %s" $accessToken) -}}
10 {{- $item := getJSON "https://graph.facebook.com/v8.0/instagram_oembed/?url=https://instagram.com/p/" $id "/&maxwidth=640&omitscript=true" $headers -}}
11 {{- $class1 := "__h_instagram" -}}
12 {{- $class2 := "s_instagram_simple" -}}
13 {{- $hideCaption := (eq (.Get 1) "hidecaption") -}}
14 {{ with $item }}
15 {{- $mediaURL := printf "https://instagram.com/p/%s/" $id | safeURL -}}
16 {{- if not $sc.DisableInlineCSS -}}
17 {{ template "__h_simple_instagram_css" $ }}
18 {{- end -}}
19 <div class="{{ $class1 }} {{ $class2 }} card" style="max-width: {{ $item.thumbnail_width }}px">
20 <div class="card-header">
21 <a href="{{ $item.author_url | safeURL }}" class="card-link">
22 {{ $item.author_name }}
23 </a>
24 </div>
25 <a href="{{ $mediaURL }}" rel="noopener" target="_blank">
26 <img class="card-img-top img-fluid" src="{{ $item.thumbnail_url }}" width="{{ $item.thumbnail_width }}" height="{{ $item.thumbnail_height }}" alt="Instagram Image">
27 </a>
28 <div class="card-body">
29 {{ if not $hideCaption }}
30 <p class="card-text">
31 <a href="{{ $item.author_url | safeURL }}" class="card-link">
32 {{ $item.author_name }}
33 </a>
34 {{ $item.title}}
35 </p>
36 {{ end }}
37 <a href="{{ $item.author_url | safeURL }}" class="card-link">
38 View More on Instagram
39 </a>
40 </div>
41 </div>
42 {{ end }}
43 {{- end -}}
44 {{- end -}}
45
46 {{ define "__h_simple_instagram_css" }}
47 {{ if not (.Page.Scratch.Get "__h_simple_instagram_css") }}
48 {{/* Only include once */}}
49 {{ .Page.Scratch.Set "__h_simple_instagram_css" true }}
50 <style type="text/css">
51 .__h_instagram.card {
52 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
53 font-size: 14px;
54 border: 1px solid rgb(219, 219, 219);
55 padding: 0;
56 margin-top: 30px;
57 }
58 .__h_instagram.card .card-header, .__h_instagram.card .card-body {
59 padding: 10px 10px 10px;
60 }
61 .__h_instagram.card img {
62 width: 100%;
63 height: auto;
64 }
65 </style>
66 {{ end }}
67 {{ end }}