I can make use of the following code, {{< youtube hvWSg6NblSU >}} to embed the YouTube video in hugo website, where hvWSg6NblSU is the value in following url: https://www.youtube.com/watch?v=hvWSg6NblSU
Instead of embedding a single video, I want to embed the following playlist: https://www.youtube.com/playlist?list=PLDe3_HhjV1foHQbtGpdo0FSmsMrVykuKJ
Question: Is there a way I can embed the above playlist. Basically I am trying to make a page using hugo which will show the playlist on YouTube.
In the following link: https://naresh-chaurasia.github.io/talk2naresh/course/python-kids/, I have a single YouTube video but want to add link to entire playlist using hugo. Is it possible.
Although I can create a hyperlink to the playlist, but I want to display the YouTube playlist.
Thanks.
It is not supported by the built-in youtube shortcode.
What you can do is create a new youtube shortcode for playlists.
Steps
Create: /layouts/shortcodes/youtubepl.html
In that file place the following: (based on the built-in youtube shortcode)
{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
{{- if not $pc.Disable -}}
{{- $ytHost := cond $pc.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" -}}
{{- $id := .Get "id" | default (.Get 0) -}}
{{- $class := .Get "class" | default (.Get 1) -}}
{{- $title := .Get "title" | default "YouTube Video" }}
<div {{ with $class }}class="{{ . }}"{{ else }}style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"{{ end }}>
<iframe src="https://{{ $ytHost }}/embed/videoseries?list={{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}&autoplay=1{{ end }}{{ end }}" {{ if not $class }}style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" {{ end }}allowfullscreen title="{{ $title }}"></iframe>
</div>
{{ end -}}
(aside: If you prefer to have a different shortcode name, simply change the filename. For example, if you prefer to use {{< ytplaylist >}} change the shortcode filename to ytplaylist.html.)
Usage
Usage is the same as the built-in {{< youtube >}} shortcode, just use the new shortcode name like so: {{< youtubepl id="ID-HERE" >}} or {{< youtubepl ID-HERE >}}.
Instead of the video ID, you'll use the playlist ID.
Related
I am trying to write a {{< gallery >}} shortcode that will either generate a gallery with all the images in a directory you define, the contents you define via .Inner, or simply all the image resources related to the page. Here are the forms I'm trying to support:
{{< gallery dir="/gallery/alaska/" />}} - specified directory
{{< gallery >}} {{< figure src="image1.jpg" >}} {{< /gallery >}} - specified inner content
{{< gallery >}} - use all the image resources
I can process the first two, but it is not clear to me how to determine if there nothing in the .Inner variable so I can process form 3 above. I would expect to do something like the following:
{{- with (.Get "dir") -}}
// do stuff with the specified directory (works fine)
{{- else -}}
{{- if .Inner }}
{{ .Inner }} // Always executes
{{- else -}}
// do stuff related to resources in this page
{{- end }}
{{- end }}
How do I detect the bare shortcode with no arguments nor inner content?
The key to making this work is to use an empty tag in the form of <tag/> so that there is inner content but it is empty.
This means the following code works if you use {{< gallery />}} as your shortcode:
{{ with (.Get "dir") }}
// do stuff with the directory
{{ else }}
{{ with .Inner }}
{{ . }}
{{ else }}
// do stuff related to this page
{{ end }}
{{ end }}
I'm using Hugo to make a website, and I want to show a clickable comma separated list of all the tags of a page.
I can simply show all tags like this:
Tags: {{ delimit .Params.tags ", " }}
However, then the tags aren't clickable. I can make them clickable by using range:
Tags:
{{ range .Params.tags }}
<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>{{ . | humanize }}</a>,
{{ end }}
But then I have a trailing comma that's not supposed to be there.
I had this fix where I wrap the comma in a css class unlessLast and then hide it using css:
.unlessLast:last-child {
display: none;
}
But I was wondering if there is a nice way of not even generating the trailing comma with Hugo.
So, how do I remove this comma properly?
I figured something out, where instead of a trailing , I add one in front of each element, but hide the first one. Checking if an element is the first one is easy:
{{ range $i, $e := .Params.tags -}}
{{- if $i -}}, {{ end -}}
<a href='{{ "/tags/" | relLangURL }}{{ . | urlize }}'>{{ $e | humanize }}</a>
{{- end -}}
Try this statement on li layout, this will show as a separate list with a link
{{ range $key, $value := .Params.categories }}
{{if ne $value "null"}}
<span class="tag-style-1">{{ $value }}</span>
{{end}}
{{ end }}
I have this workaround:
<strong>{{ Tags: }}</strong>
{{ range $key, $value := .Params.tags }}
{{ $value }}{{ if ne $key (sub (len $.Params.tags) 1) }}, {{ else }}{{ end }}
{{ end }}
Code explanation:
The comma for the last element will be skipped, this is, asking if the loop haven't reached the last element {{ if ne $key (sub (len $.Params.tags) 1) }}, until not, the comma will be printed. Note that here we're using the global operator $ to reach the global context for .Params.tags and avoid the context of the range loop <- This is important.
A more short approach could be this:
<strong>{{ Tags: }}</strong>
{{ range $key, $value := .Params.tags }}
{{ if $key }}, {{ end }}{{ $value }}
{{ end }}
Code explanation:
Hugo will be treat 0 as false, then, it will not print the comma for the first element and will be printed for the rest, behind the tag (ej: tag1 ,tag2 ,tag3). The problem of this approach is that the comma will be urlized too.
I have a site with a bunch of static pages, plus a blog, in Hugo.
On the front page, I'd like to create short links to the three most recent blog posts (but not to any possibly recently modified static page). The blog posts are all in directory blog/.
I'm failing to figure out the syntax for this. So far, I have:
{{- range (.Paginate ( first 3 .Pages.ByDate )).Pages }}
<li>{{ .Title }}</li>
{{- end}}
but I need to also filter by directory blog/. This is in my layouts/index.html template.
I'm using Hugo 0.74.3 and this is my solution:
{{ range ( where .Site.RegularPages "Type" "posts" | first 3 ) }}
<li>{{ .Title }}</li>
{{end}}
Note that blog posts with draft: true in their frontmatter are not included.
I started by just iterating over .Site.RegularPages without the where to figure it out
{{ range .Site.RegularPages }}
<h2>{{ . }}</h2>
{{end}}
Hugo is tricky to get the filtering working, but this may work for you
{{ range ( first 3 ( where .Site.Pages "Type" "blog" ).ByDate ) }}
<li>{{ .Title }}</li>
{{ end }}
I am trying to resize an image in Hugo (not using HTML / CSS), which is apparently available in the v 0.32 update. Beneath the "Image Processing" heading at the link in the last sentence, the following "Resize" method is described:
Resize to the given dimension, {{ $logo.Resize "200x" }} will resize to 200 pixels wide and preserve the aspect ratio. Use {{ $logo.Resize "200x100" }} to control both height and width.
I'm having some trouble implementing this in my Hugo site. In particular, I am using a .md file, and am trying to add an image which is stored somewhere else in the site's source files.
For example, here's how I would add the (not-resized) image in the .md file:
How could I add this same file, resized to 50x50 pixels, using the resize method in the v0.32 release?
Using my newer version of Hugo (v0.53) I had to adapt the answer by JoostS a bit:
Created a page bundle
Modified the shortcode to look like this at the start:
{{ $original := .Page.Resources.GetMatch (print "images/" (.Get 0) "*") }}
You can not use it like this (in markdown). Resizing only works on resources. A resource is a file in the resource directory or a file in a page bundle. To access resources in markdown you will have to use a shortcode.
Note that you can define the static dir as the resources directory. Once you do that, you can just use the static directory and write something like:
(.Site.Resources.GetMatch "_media/images/pdf.png").Resize "50x50"
However, you should access this through a shortcode, like Talves did. I simplified his code a little for extra readability:
{{< imgresize "_media/images/pdf.png" >}}
Calling this shortcode (layouts/shortcodes/imgresize.html):
{{ $image := (.Site.Resources.GetMatch (.Get 0)).Resize "50x50" }}
<img src="{{ $image.RelPermalink }}">
As of 2022, if all you need is displaying the image in a different size, maybe Hugo’s Built-in "figure" Shortcode would do?
{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}
You will need to make sure you have included your images within the content of your page usually at the level of the page itself unless you reference them using the answer I link in the note below.
NOTE: You can access resources from an outside section as in this answer
Write a shortcode
layouts/shortcodes/imgresize.html
{{ $original := .Page.Resources.GetByPrefix (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ $image := .Scratch.Get "image" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
[Alternative] Shortcode accessing resource under content/media section
{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "section" "media" }}
{{ $original := .Resources.GetByPrefix $imagename }}
{{ with ($original.Resize $options) }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}
{{ end }}
Call the shortcode from within the markdown of the page.
{{< imgresize pdf "50x50" >}}
pdf refers to the image by its name prefix to get the resource.
Using a sub folder page to access the resources
In the next example shortcode you must have a page at the same level as your images. Include an index.md at the same level (example: content/media/logos/index.md)
add layouts/shortcodes/logo-resize.html
{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "page" "media/logos/index.md" }}
{{ $original := .Resources.GetByPrefix $imagename }}
{{ with ($original.Resize $options) }}
<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
{{ end }}
{{ end }}
Call the shortcode
{{< logo-resize pdf "50x50" >}}
GitHub Example
If you're using Page Bundles you can reference any file in the page's folder, whether or not it is declared in front matter:
.
|- This is the Page (a folder)
|- index.md
|- photo1.jpg
\- photo2.jpg
INside index.md
{{< imgresize photo1.jpg "350x350" "Alternate Text" >}}
The shortcode (same as #Talves but uses GetMatch and Fit, and includes alternate text for image.)
{{ $original := .Page.Resources.GetMatch (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ $image := .Scratch.Get "image" }}
{{ $title := .Get 2 }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $title }}">
UPDATE! There is a new and better way: render hooks!
Create a render hook
For images in the markdown, you can use a ‘render hook’. This is a file that describes/overrides how markdown images are handled. To use the above approach in the render hook you should create the following file:
/layouts/_default/_markup/render-image.html
… and put this logic inside:
{{ if (resources.GetMatch .Destination) }}
<img src="
{{ ((resources.GetMatch .Destination).Fit `600x600 jpg Smart q50`).RelPermalink | safeURL }}
" alt="{{ .Text }}" />
{{ end }}
Note that we use ‘.Destination’ for the source of the original image and ‘.Text’ for the alt text defined in the markdown. Once you added the render hook all images in your Hugo project can and will be resized.
More info can be found at Hugo Codex and in the official docs.
This snippet works wonderfully on Hugo:
{{ if and (or .IsPage .IsSection) .Site.Params.contentCommitsURL }}
{{ $File := .File }}
{{ $Site := .Site }}
{{with $File.Path }}
Link to API call
{{ end }}
{{ end }}
With,
[Params]
contentCommitsURL = https://api.github.com/repos/csitauthority/CSITauthority.github.io/commits?path=HUGO/content/
it is able to beautifully generate the following link
Link to API call
in the layout html file.
Problem Description
The URL is generated. Now I'm pulling hairs trying to figure out how to concatenate the commands { $Site.Params.contentCommitsURL }}{{ replace $File.Dir "\\" "/" }}{{ $File.LogicalName }} in a page variable such as {{ $url }}
For instance:
{{ $url := {{ $Site.Params.contentCommitsURL }}{{ replace $File.Dir "\\" "/" }}{{ $File.LogicalName }} }}
does not work
but the following does:
{{ $url := "https://api.github.com/repos/csitauthority/CSITauthority.github.io/commits?path=HUGO/content/post/vlan-101.md"}}
I want to be able to do something like this:
{{ $url := $Site.Params.contentCommitsURL + (replace $File.Dir "\\" "/") + $File.LogicalName }}
^Obviously, that doesn't work. I want to know what does.
On the Hugo discourse forum, someone hinted a solution and I was able to come up with the following.
{{ if and (or .IsPage .IsSection) .Site.Params.contentCommitsURL }}
{{ $File := .File }}
{{ $Site := .Site }}
{{with $File.Path }}
{{ $fileDir := replace $File.Dir "\\" "/"}}
{{ $url := $File.LogicalName | printf "%s%s" $fileDir | printf "%s%s" $Site.Params.contentCommitsURL }}
{{ $.Scratch.Set "url" $url }}
{{ end }}
{{ end }}
Where I want it to appear, I use the Scratch function like this:
{{ $url := $.Scratch.Get "url"}}
{{ range getJSON $url }}
<div style="display:inline-block; width:40px;"><a href="{{.author.html_url}}" target="_blank">
<img src="{{.author.avatar_url}}" alt="{{.author.login}}" text="{{.author.login}}" class="inline" width="40" height="40" style="height: 40px;height: 40px; vertical-align:middle; margin: 0 auto;"></a>
</div>
{{ end }}
The code is self-explanatory so I won't bother with a verbose description. Instead, I'd like to bring your focus on the implementation. You'll notice that the Scratch function has been used.
The hugo documentation says this:
Variables defined inside if conditionals and similar are not visible on the outside.
(see this issue)
It's a workaround that involves storing the value temporarily. here's more on scratch
Limitations
As of this moment, I feel this code is not complete. It works but, it shows the author based on commits. So multiple commits will generate the same author multiple times. I bring this limitation to your notice, to develop a creative solution. I'll update this answer when I get a satisfactory answer. Meanwhile, feel free to suggest.
here's my original answer on hugo discourse.