Is it possible to get values for shortcodes from content? Something like react components does

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. :wink:

{{ fancybox path="path" file="file" caption="caption" gallery="gallery" }}

Or

{{ fancybox "path" "file" "caption" "gallery" }} 

Big thanks to you!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.