Hello, friends! I’m still a newbie in GoHugo syntax, and sorry if my question is dummy type.
I’m making a website for hotels booking. I want to use shortcodes, as reusable components. Can I accept shortcode values from content? For example:
< hotels >
<div class="hotels-block">
<div class="name">hotels.name = "{{ hotels.name }}"</div>
<div class="image">hotels.image = "<img src={{ hotels.image }}>"</div>
</div>
< /hotels >
---
Or code without divs (simpler to understand)
< hotels >
hotels.name = "{{ hotels.name }}"
hotels.image = "<img src={{ hotels.image }}>"
< /hotels >
My idea is to use shortcodes to set the necessary layout for my page. Then within my page (markdown), I want to use shortcode, where I pass values, and my layout through shortcode appears.
Here is example content file:
--- hotels-pattaya.md
< hotels >
hotels.name = "Hilton"
hotels.image = "../image/hotel1.png"
< /hotels >
Is it possible to build something like that? To make and use shortcode as reusable components.
You want positional and named parameters.
Here is a working example:
<!--
Inside Double Brackets:
fancybox path="path" file="file" caption="caption" gallery="gallery"
fancybox "path" "file" "caption" "gallery"
# of Params: 2-4
Positional or Named
position 0, name: path
Can pass in the following values:
title: will use /img/LinkTitle as the path
date: will use /img/Year/Month as the path
/path/to/img: can pass in explicit path to the image
position 1, name: file
Name of the file including the file extension
position 2, name: caption
Text for the caption of the image
position 3, name: gallery
Name of the gallery the image should be included in
-->
{{ $numOfParams := len .Params}}
{{ if and (ge $numOfParams 2) (le $numOfParams 4) }}
{{ if .IsNamedParams }}
{{ $.Scratch.Set "path" (.Get "path") }}
{{ $.Scratch.Set "file" (.Get "file") }}
{{ $.Scratch.Set "caption" (.Get "caption") }}
{{ $.Scratch.Set "gallery" (.Get "gallery") }}
{{ else }}
{{ $.Scratch.Set "path" (.Get 0) }}
{{ $.Scratch.Set "file" (.Get 1) }}
{{ if ge $numOfParams 3 }}
{{ $.Scratch.Set "caption" (.Get 2) }}
{{ else }}
{{ $.Scratch.Set "caption" "" }}
{{ end }}
{{ if ge $numOfParams 4 }}
{{ $.Scratch.Set "gallery" (.Get 3) }}
{{ else }}
{{ $.Scratch.Set "gallery" ""}}
{{ end }}
{{ end }}
{{ $.Scratch.Set "structType" "shortcode" }}
{{ $path := $.Scratch.Get "path" }}
{{ if eq $path "date" }}
{{ $.Scratch.Set "path" "/img/" }}
{{ $.Scratch.Add "path" (.Page.Date.Format "2006/01") }}
{{ end }}
{{ $path := $.Scratch.Get "path" }}
{{ $file := $.Scratch.Get "file" }}
{{ $caption := $.Scratch.Get "caption" }}
{{ $gallery := $.Scratch.Get "gallery" }}
<figure>
<a data-fancybox="{{ $gallery }}" href="{{ path.Join $path $file | relURL }}" data-caption="{{ $caption }}"><img src="{{ path.Join $path $file | relURL }}"></a>
<figcaption>{{ $caption }}</figcaption>
</figure>
{{ end }}
Thanks a lot! Now I know, how to setup variables for my shortcode file. Let me please one more question? Sir of sirs, men of men, please one more question.
How I can pass values to these variables from my content file?
My final shortcode file access variables, something like that (I skipped all coding above for a simpler view):
<figure>
<a data-fancybox="{{ $gallery }}" href="{{ relURL }}" data-caption="{{ $caption }}"><img src="{{ relURL }}"></a>
<figcaption>{{ $caption }}</figcaption>
</figure>
And how I can pass those values from my content file? I’m able to do something like that?
< fancybox >
$gallery = "some value"
$caption = "caption text"
etc?
< /fancybox >
In the top of my example.
{{ fancybox path="path" file="file" caption="caption" gallery="gallery" }}
Or
{{ fancybox "path" "file" "caption" "gallery" }}
system
Closed
April 5, 2022, 3:46pm
6
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.