Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity
hextra/exampleSite/content/docs/guide/shortcodes/cards.md
Remy Sheppard c799160e86
feat: add native image processing to cards (#63) 
* Add native image processing to cards

* feat: Image processing options, markdown subtitles

* fixing a type

* Public Domain Images

* image height fix

* Smaller Image

* Removed fullwidth param

* Smaller image from unsplash

* Replaced static image as well

* Update single.html

* Update list.html

* Update list.html

* Update single.html

* Update list.html

* Update single.html

* Update cards.md

* Update cards.md

---------

Co-authored-by: Xin <xin@imfing.com>
2023-09-19 00:04:48 +01:00

2.7 KiB
Raw Blame History

title linkTitle
Cards Component Cards

Example

{{< cards >}} {{< card link="../callout" title="Callout" icon="warning" >}} {{< card link="/" title="No Icon" >}} {{< /cards >}}

{{< cards >}} {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}} {{< card link="/" title="Local Image" image="/images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}} {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}} {{< /cards >}}

Usage

{{</* cards */>}}
  {{</* card link="../callout" title="Callout" icon="warning" */>}}
  {{</* card link="/" title="No Icon" */>}}
{{</* /cards */>}}

{{</* cards */>}}
  {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
  {{</* card link="/" title="Local Image" image="/images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
  {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
{{</* /cards */>}}

Card Parameters

Parameter Description
link URL (internal or external).
title Title heading for the card.
subtitle Subtitle heading (supports Markdown).
icon Name of the icon.

Image Card

Additionally, the card supports adding image and processing through these parameters:

Parameter Description
image Specifies the image URL for the card.
method Sets Hugo's image processing method.
options Configures Hugo's image processing options.

Card supports three kinds of images:

  1. Remote image: the full URL in the image parameter.
  2. Static image: use the relative path in Hugo's static/ directory.
  3. Processed image: use the relative path in Hugo's assets/ directory.

Hextra auto-detects if image processing is needed during build and applies the options parameter or default settings (Resize, 800x, Quality 80, WebP Format). It currently supports these method: Resize, Fit, Fill and Crop.

For more on Hugo's built in image processing commands, methods, and options see their Image Processing Documentation.