Partials on Hugolify

Address

Mon, 01 Jan 0001 00:00:00 +0000

Arguments

card Boolean
Set true to add card class

direction Boolean
Set true to add a direction link to Google Map

address Map
Object of address values

Usage

{{ partial "commons/address" $map }}

Example

Usage

{{ $address := (dict
 "street" "24 Rue de Commandant Guilbaud"
 "zipcode" "75016"
 "city" "Paris"
 "country" "France"
 ) }}
{{ $args := (dict
 "card" true
 "direction" true
 "address" $address
 ) }}
{{ partial "commons/address" $args }}

HTML rendered

<address class="address">
 <div>
 <p>24 Rue de Commandant Guilbaud</p>
 <p>75016 Paris</p>
 <p>France</p>
 <a class="direction" href="https://www.google.fr/maps/dir//24 Rue de Commandant Guilbaud 75016 Paris France" target="_blank" title="How to go? - external link">How to go?</a>
 </div>
</address>

Commons file — hugolify-theme

Carousel

Mon, 01 Jan 0001 00:00:00 +0000

Arguments

context Map
Page context

partial String
Partial to load to each slide

Usage

{{ partial "commons/carousel" $args }}

Example

A carousel of logos (block logos)

{{ $args := (dict
 "context" . 
 "partial" "blocks/templates/logos/logo.html" 
 ) }}
{{ partial "commons/carousel" $args }}

CTA

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "url" "https://www.hugolify.io/"
 "text" "Hugolify button"
 "blank" true
 ) }}
{{ partial "commons/cta" $args }}

HTML rendered

<a class="btn" href="https://www.hugolify.io/" target="_blank" rel="noreferrer noopener" title="Hugolify button - external link">Hugolify button</a>

Datas

url: "" // Button href
text: "" // Button text
blank: false // boolean, true to add target="_blank" (optional)
class: "" // Add additional class (optional)
title: "" // Add title attribute (optional)
hreflang: "" // Add hreflang attribute (optional)

Commons file — hugolify-theme

Date

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "date" "2006-01-02T15:04:05Z07:00"
 ) }}
{{ partial "commons/date" $args }}

HTML rendered

<p class="date"><time datetime="2006-01-02T15:04:05Z07:00">Monday, February 2, 2006</time></p>

Datas

date: ""
format: "" // default is ":date_full" https://gohugo.io/functions/time/format/
itemprop: false // or https://schema.org/Date

File

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "file" "videos/example-file.mp4"
 ) }}
{{ partial "commons/file" $args }}

HTML rendered

<a href="videos/example-file.mp4" download class="file">
 <span>
 <b>Example file</b>
 <abbr>MP4</abbr>
 15<abbr title="Megabytes">MB</abbr>
 </span>
</a>

Datas

file: "" // path file (required)
title: "" // custom title 
download: false // add download attribute to link, default is true

Commons file — hugolify-theme

Image

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "src" $src_image
 "alt" $alt_text
 "desktop" $desktop_size
 "mobile" $mobile_size
 ) }}
{{ partial "commons/image" $args }}

HTML rendered

<picture>
 <source srcset="" type="image/webp" media="(min-width: 577px)" />
 <source srcset="" type="image/webp" media="(max-width: 576px)" />
 <source srcset="" type="image/jpg" media="(max-width: 576px)" />
 <img src="" alt="" width="" height="" />
</picture>

Datas

src: "" // Image’s URL, required
alt: "" // Alternative text for a11y
desktop: "" // width x height of desktop image, required
mobile: "" // width x height of mobile image
lazy: true // set false if above the fold, default true
class: "" // class to <img>
itemprop: "" // add a Schema.org information

Available for

Commons file — hugolify-theme

Map

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "location" (slice (dict "coordinates" "[44.8425666,-0.5737107]" "coordinates" "[45.8425666,1.5937107]"))
 ) }}
{{ partial "commons/map.html" $args }}

HTML rendered

<div
 class="map js-map"
 data-markers="[{&quot;coordinates&quot;:[44.8425666,-0.5737107]},{&quot;coordinates&quot;:[45.8425666,1.5937107]}]"
></div>

Datas

location: [] // array of markers
marker_hidden: false // boolean (optional)
zoom: "" // int (optional)

Price

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "price" 100
 "discount" "10%"
 "frenquency" "/month"
 ) }}
{{ partial "commons/price" $args }}

HTML rendered

<p class="princing">90€ <del>100€</del> <span>-10%</span> <i>/month</i></p>

Datas

price: "" // Float price, required
discount: "" // Percent or value to discount
frequency: "" // If you have subscription and you want 
itemprop: false // boolean to add itemprop="price" content="{price}"

Commons file — hugolify-theme

Text

Mon, 01 Jan 0001 00:00:00 +0000

Usage

{{ $args := (dict
 "text" "Lorem ipsum"
 ) }}
{{ partial "commons/text" $args }}

HTML rendered

<div class="text">
 <p>Lorem ipsum</p>
</div>

Datas

text: ""
class: "" // default is text

Commons file — hugolify-theme

Time

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "date" "2006-01-02T15:04:05Z07:00"
 "format" "2006"
 "itemprop" "datePublished"
 ) }}
{{ partial "commons/time" $args }}

HTML rendered

<time datetime="2006-01-02T15:04:05Z07:00" itemprop="datePublished">2006</time>

Datas

date: ""
format: "" // default is 2006, https://gohugo.io/functions/time/format/
itemprop: false // or https://schema.org/Date

Commons file — hugolify-theme

Video

Mon, 01 Jan 0001 00:00:00 +0000

Example

Usage

{{ $args := (dict
 "mp4" $src_mp4_video
 "webm" $src_webm_video
 "controls" true
 ) }}
{{ partial "commons/video" $args }}

HTML rendered

<video class="js-video is-lazy" controls muted playsinline>
 <source data-src="" type="video/webm" />
 <source data-src="" type="video/mp4" />
</video>

Datas

mp4: "" // MP4 video’s URL, required
webm: "" // WEBM video’s URL, required
autoplay: false // to set autoplay video or not
controls: false // to add native controls video
loop: false // to set loop video or not

Commons file — hugolify-theme

Partials on Hugolify

Address

Arguments

Usage

Example

Usage

HTML rendered

Related link

Carousel

Arguments

Usage

Example

Related links

CTA

Example

Usage

HTML rendered

Datas

Related link

Date

Example

Usage

HTML rendered

Datas

Related link

File

Example

Usage

HTML rendered

Datas

Related link

Image

Example

Usage

HTML rendered

Datas

Available for

Related link

Map

Example

Usage

HTML rendered

Datas

Related links

Price

Example

Usage

HTML rendered

Datas

Related link

Text

Usage

HTML rendered

Datas

Related link

Time

Example

Usage

HTML rendered

Datas

Related link

Toc

Usage

Related link

Video

Example

Usage

HTML rendered

Datas

Related link