---
title: 'Theme shortcodes'
date: 2025-02-14T14:38:33+02:00
draft: false
type: 'blog'
tags: 
  - adritian
  - guide
---

Shortcodes are a convenient [functionality of Hugo](https://gohugo.io/content-management/shortcodes/), allowing you to embed templates or layouts within other content.

Some of the example built-in shortcodes are Instagram posts, YouTube videos, QR codes, etc. You can find [the full list in the official docs](https://gohugo.io/content-management/shortcodes/#embedded).

The theme provides custom shortcodes to allow you to customize your landing page as you want:

- `toc`: Generates a styled table of contents from page headings.
- `education-list`: Displays a list of educational qualifications.
- `experience-list`: Shows a list of professional experiences.
- `platform-links`: Embeds links to various platforms with icons.
- `newsletter-section`: Adds a section for newsletter subscription.
- `link`: Creates a hyperlink with an icon.
- `experience-section`: Inserts a detailed experience section.
- `contact-section`: Adds a contact information section, with a customizable form and information.
- `client-and-work-section`: Displays a section for clients and work.
- `about-section`: About section, with image, buttons for call to action and image.
- `testimonial-section`: Adds references from customers, colleagues, etc.
- `showcase`: two-column block with a full-width image to the left, and a text snippet to the right. Great for a call to action or introduction of the person (assuming it's a personal website).
- `text-section`: utility shortcode used to render text in some parts of the theme where it would otherwise be full-width, appearing "too floaty". See [the github issue #260 for context](https://github.com/zetxek/adritian-free-hugo-theme/issues/260).
- `spacer`: Adds vertical spacing before the next element.

The shortcodes can be customized with different arguments:

- `toc`: Automatically generates a table of contents from the page's headings (H2, H3, etc.)
  - `heading`: Custom heading text for the table of contents. Defaults to "Table of Contents".
  - `showHeading`: Boolean value to show or hide the heading. Defaults to true.
  - `class`: Custom CSS class for styling. Defaults to "table-of-contents".
  - **Features**:
    - Only displays if the page contains headings
    - Supports nested heading levels with proper indentation
    - Responsive design with dark mode support
    - Smooth scrolling to sections
    - Clean, modern styling with hover effects
  - **Usage Examples**:
    - `{{</* toc */>}}`: Basic table of contents with default settings
    - `{{</* toc heading="Contents" */>}}`: Custom heading
    - `{{</* toc showHeading=false */>}}`: Hide the heading
    - `{{</* toc class="sidebar-toc" */>}}`: Custom CSS class
    - `{{</* toc heading="Article Contents" class="custom-toc" */>}}`: Multiple parameters

- `education-list`:
  - `title`: The title of the education section.
  - `items`: A list of educational qualifications, they're provided by the `education` content type pages. From each, the `year`, `university`, and `degree` will be used.  
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `experience-list`:
  - `title`: The title of the experience section (optional). When provided, an h2 heading is added above the list.
  - `padding`: Controls whether the section has padding. Set to "true" by default.
  - `items`: A list of professional experiences, coming from the `experience` content type. For each of them, the `companyLogo`, `duration`, `jobTitle`, `location`, and `Content` are used.
  - **Note**: On mobile devices, a separator line is automatically added between experience entries for better readability.
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `platform-links`:
  - `platforms`: A container to place social links inside. Usually you'll want to use it with a list of `link` nested (see below) 
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `link`: links to social platforms (facebook, linkedin, etc)
  - `url`: The URL for the hyperlink.
  - `icon`: The icon to display with the link.
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `newsletter-section`:
  - **Form Configuration**:
    - `form_action`: The URL where the newsletter form data will be submitted. Falls back to site data configuration (typically set in data/homepage.yaml).
    - `form_method`: The HTTP method for form submission (typically "POST" or "GET"). Falls back to site data configuration.
  - **Section Content**:
    - `newsletter_title`: Sets the main heading/title for the newsletter section. Falls back to i18n value "newsletter_title".
    - `newsletter_placeholder`: Placeholder text displayed in the email input field. Falls back to i18n value "newsletter_placeholder".
    - `newsletter_button`: Text displayed on the subscription button. Falls back to i18n value "newsletter_button".
  - **Response Messages**:
    - `newsletter_success_message`: Message displayed to users after successful subscription. Falls back to i18n value "newsletter_success_message".
    - `newsletter_error_message`: Message displayed to users if subscription fails. Falls back to i18n value "newsletter_error_message".
    - `newsletter_note`: Small text/disclaimer shown below the form (typically mentions privacy policy). Falls back to i18n value "newsletter_note".
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `experience-section`:
  - `title`: The title of the experience section.
  - `experiences`: A detailed list of experiences, coming from the `experience` content type pages.
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `contact-section`:
  - `title`: Sets the main heading/title for the contact section. Falls back to the i18n value "contact_title" if not provided.
  - **Form Configuration**:
    - `form_action`: The URL where the form data will be submitted. Commonly used with services like Formspree. Falls back to site data configuration.
    - `form_method`: The HTTP method for form submission (typically "POST" or "GET"). Falls back to site data configuration.
  - **Form Field Placeholders**:
    - `contact_form_name`: Placeholder text for the name input field. Falls back to i18n value.
    - `contact_form_email`: Placeholder text for the email input field. Falls back to i18n value.
    - `contact_form_phone`: Placeholder text for the phone input field. Falls back to i18n value.
    - `contact_form_message`: Placeholder text for the message textarea. Falls back to i18n value.
    - `contact_form_rows`: Number of rows for the message textarea. Defaults to 2 if not specified.
    - `contact_button`: Text for the form submission button. Falls back to i18n value.
  - **Contact Information**:
    - `contact_phone_title`: Heading for the phone contact section. Falls back to i18n value.
    - `contact_phone_number`: Phone number to display. Falls back to i18n value.
    - `contact_email_title`: Heading for the email contact section. Falls back to i18n value.
    - `contact_email_email`: Email address to display. Falls back to i18n value.
    - `contact_address_title`: Heading for the address section. Falls back to i18n value.
    - `contact_address_address`: Physical address or location information. Falls back to i18n value.
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `client-and-work-section`: this shortcode doesn't use as many arguments - as much of the content comes from other content pages.
  - `title`: The title of the client and work section.
  - `clients`: A list of clients, coming from the `client` content type (each with `title`, `link`, `logo`)
  - `projects`: A list of projects, coming from the `project` content type (each with `title`, `content`, `button.URL`, `button.btnText`, `button.icon`, `image`).
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `about-section`:
  - Content Arguments
    - `intro_title` - Sets the main heading/title for the about section. Falls back to the title from site data if not provided.

    - `intro_description` - Contains the HTML content or description text for the about section. Falls back to the content from site data if not provided.

    - `imgSrc` - Specifies the path to the image displayed in the about section. Falls back to the image defined in site data if not provided.

    - `imgWidth` - Specifies the width for the image.

    - `imgHeight` - Specifies the height for the image.

    - `imgScale` - Specifies the scale used for the image (for example, `0.5` if the high resolution image is double the size of the smaller one) This is only considered if neither imgWidth nor imgHeight is used.

    - `v_align` - Controls the vertical alignment of the text content relative to the image. Accepts "center" (default), "top", or "bottom".
    - `text_align` - **Deprecated**: Use `v_align` instead. Maintains backwards compatibility.
    - `h_align` - Controls the horizontal alignment of the text content. Accepts "left" (default), "center", or "right".
    
    **Alignment Examples**:
    - `v_align="center" h_align="left"` - Text vertically centered, left-aligned (default)
    - `v_align="top" h_align="center"` - Text at top, horizontally centered
    - `v_align="bottom" h_align="right"` - Text at bottom, right-aligned

    - Primary Button Arguments
      - `button1_enable` - Boolean value to show or hide the primary button. Defaults to the value from site data.

      - `button1_icon` - icon class to display before the button text. Falls back to the icon from site data.

      - `button1_url` - Target URL for the primary button. Falls back to the URL from site data.

      - `button1_text` - Text label to display on the primary button. Falls back to the text from site data.

    - Secondary Button Arguments
      - `button2_enable` - Boolean value to show or hide the secondary button. Defaults to the value from site data.

      - `button2_icon` - FontAwesome or icon class to display before the button text. Falls back to the icon from site data.

      - `button2_url` - Target URL for the secondary button. Falls back to the URL from site data.

      - `button2_text` - Text label to display on the secondary button. Falls back to the text from site data.

  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

  - `testimonial-section`:
    - `title`: The title of the testimonial section.
    - `testimonials`: A list of testimonials, provided by the `testimonial` content type pages. The partial dynamically pulls content from pages with type "testimonial". Each testimonial page should include:
      - `Content`: The main testimonial text (the actual quote)
      - Meta Information:
        - `name`: The name of the person giving the testimonial
        - `position`: The job title or role of the person giving the testimonial
        - `image.src`: Path to the image of the testimonial author
    - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `showcase`: 
  - **Content Arguments**:
    - `title`: Sets the main heading/title for the showcase section. Falls back to the i18n value "showcase_title".
    - `subtitle`: Sets the subtitle text that appears below the main heading. Falls back to the i18n value "showcase_subtitle".
    - `description`: Contains the HTML content or description text for the showcase section. Falls back to the i18n value "showcase_description".
  - **Button Configuration**:
    - `button_text`: Text label to display on the button. If not provided or set to false, the button will not be displayed.
    - `button_icon`: Icon class to display before the button text. Falls back to the icon from site data.
    - `button_url`: Target URL for the button. Falls back to the URL from site data.
  - **Image Configuration**:
    - `imgSrc`: Specifies the path to the image displayed in the showcase section. Falls back to the image defined in site data.
    - `imgWidth` - Specifies the width for the image.
    - `imgHeight` - Specifies the height for the image.
    - `imgScale` - Specifies the scale used for the image (for example, `0.5` if the high resolution image is double the size of the smaller one) This is only considered if neither imgWidth nor imgHeight is used.
  - **Social Media**:
    - `social_links`: Array of social media platform links to display at the bottom of the showcase. Each item should have a URL and icon property.
  - **Responsive Behavior**:
    - The showcase uses a two-column layout on desktop devices (≥768px) and stacks columns vertically on mobile devices, with the image appearing above the text content.
  - **Inner Content**:
    - The shortcode can also accept inner content that will be rendered in a separate div with class "inner-content".
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `text-section`: 
  - **Content Arguments**:
    - `title`: Sets the main heading/title for the text section (optional).
    - `subtitle`: Sets the subtitle text that appears below the main heading (optional).
  - **Layout Options**:
    - `padding`: Controls whether the section has padding. Set to "true" by default.
    - `centered`: When set to "true", adds flexbox classes to center the content both horizontally and vertically. Set to "false" by default.
  - **Inner Content**:
    - The shortcode accepts markdown-formatted inner content that will be rendered in the text section.
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

- `spacer`: 
  - **Size Options**:
    - `size`: Controls the amount of vertical spacing. Accepts "small", "medium" (default), "large", or "xlarge".
  - **Usage Examples**:
    - `{{</* spacer */>}}`: Adds medium spacing (default)
    - `{{</* spacer size="small" */>}}`: Adds minimal spacing
    - `{{</* spacer size="large" */>}}`: Adds substantial spacing
    - `{{</* spacer size="xlarge" */>}}`: Adds maximum spacing
  - `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.

You can see them in effect in:
- [the homepage](/) [`(see source)`](https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/home.md).
- [the CV page](/cv) [`(see source)`](https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/cv.md).
