Custom Functionalities

This section documents the custom utility functions available across the theme. These functions help standardize tasks like spacing, rendering image tags, and setting target link attributes.

---

🖼️ generate_image_tag()

This function dynamically generates an <img> HTML tag (or <figure> with <figcaption>) from either an ACF image field or a featured image ID. It supports lazy loading, responsive images, SVGs, and custom data-* attributes.

📌 Key Features

• Works with ACF image arrays and attachment IDs.
• Supports custom CSS classes, lazy loading, and decoding strategies.
• Can output <figure> wrappers with captions.
• Responsive with srcset, sizes, and placeholder support.
• Accepts dataAttributes as an associative array.

🧾 Usage Example

<?php if ($quote_logo): ?>
    <?php
        $image_tag_args = array(
            'image' => $quote_logo,
            'sizes' => '135px',
            'class' => 'g--card-05__ft-items__media-wrapper__media',
            'isLazy' => true,
            'showAspectRatio' => true,
            'decodingAsync' => true,
            'fetchPriority' => false,
            'addFigcaption' => false,
        );
    ?>
    <figure class="g--card-05__ft-items__media-wrapper">
        <?php generate_image_tag($image_tag_args); ?>
    </figure>
<?php endif; ?>

🖼️ render_wp_image()

This function is an updated and enhanced version of generate_image_tag(). It dynamically generates an <img> HTML tag (or <figure> with <figcaption>) from various image sources, including ACF image fields, attachment IDs, theme file URLs, and arbitrary URLs. It supports a wide range of features and customization options.

📌 Key Features

• Works with ACF image arrays, attachment IDs, theme file URLs, and arbitrary URLs
• Supports lazy loading, responsive images (srcset/sizes), aspect ratio, and SVGs
• Allows specifying custom classes, decoding, fetch priority, and data attributes
• Can output <figure> wrappers with captions
• Provides smart defaults and handles edge cases gracefully

🔧 Parameters

The render_wp_image() function accepts an associative array of parameters:

• image (required): The image source, which can be an ACF image array, attachment ID, theme file URL, or arbitrary URL.
• sizes (optional): A string specifying the sizes attribute for responsive images. Required when providing multiple image sources.
• class (optional): Custom CSS class(es) to add to the <img> tag.
• lazyClass (optional): Custom CSS class for lazy loading. Defaults to 'g--lazy-01'.
• isLazy (optional): Whether to enable lazy loading. Defaults to true.
• showAspectRatio (optional): Whether to set the aspect-ratio CSS property. Defaults to true.
• decoding (optional): The decoding attribute for the <img> tag. Can be 'auto', 'sync', or 'async'. Defaults to 'async'.
• fetchPriority (optional): The fetchpriority attribute for the <img> tag. Can be 'high', 'low', or 'auto'. Defaults to 'auto'.
• dataAttributes (optional): An associative array of custom data-* attributes to add to the <img> tag.
• addFigcaption (optional): Whether to wrap the <img> tag in a <figure> with a <figcaption>. Defaults to false.
• figureClass (optional): Custom CSS class for the <figure> wrapper. Defaults to 'media-wrapper'.
• width (optional): Explicitly set the width attribute of the <img> tag.
• height (optional): Explicitly set the height attribute of the <img> tag.

🧾 Usage Examples

1. ACF image with responsive srcset and sizes:

render_wp_image([
  'image' => get_field('img'),
  'sizes' => '(max-width: 810px) 95vw, 50vw',
  'class' => 'g--media',
]);

2. LCP (no lazy loading) image from attachment ID:

render_wp_image([
  'image'         => $attachment_id,
  'isLazy'        => false,
  'fetchPriority' => 'high',
  'decoding'      => 'async',
  'sizes'         => 'large',
  'class'         => 'c-hero__img',
]);

3. Theme file URL (single variant, no srcset or sizes):

render_wp_image([
  'image'  => get_theme_file_uri('/public/hero.webp'),
  'class'  => 'c-hero__img',
  'width'  => 1920,
  'height' => 1080,
]);

4. SVG with fixed dimensions:

render_wp_image([
  'image'         => get_theme_file_uri('/icons/logo.svg'),
  'width'         => 180,
  'height'        => 40,
  'decoding'      => 'auto',
  'fetchPriority' => 'low',
]);

5. Figure with figcaption (from attachment with caption):

render_wp_image([
  'image'         => $attachment_id,
  'sizes'         => 'medium',
  'addFigcaption' => true,
  'figureClass'   => 'media-wrapper',
]);

6. Force aspect-ratio when source dimensions are missing:

render_wp_image([
  'image'           => get_field('img'),
  'width'           => 1200,
  'height'          => 800,
  'showAspectRatio' => true,
]);

---

📐 get_spacing()

This function maps semantic spacing names (like top-large, bottom-small) to utility class combinations that apply padding on desktop and tablet viewports. This is a custom ACF field created by Terra.

🧾 Example Input/Output

$spacing = get_spacing($module['section_spacing']);

If the $module['section_spacing'] value is 'top-large-bottom-small', the function returns:

f--pt-15 f--pt-tablets-10 f--pb-5 f--pb-tablets-4

This helps enforce consistent spacing design tokens across the theme.

---

🔗 get_target_link()

Returns a fully-formed target attribute string for anchor tags, including:

• target="_blank" or _self
• rel="noopener noreferrer" (for external links)
• aria-label for accessibility

🧾 Example Usage

<a href="https://example.com" <?php echo get_target_link(true, 'Example Link'); ?>>
    Example Link
</a>

📋 Output

target='_blank' rel='noopener noreferrer' aria-label='Example Link, opens a new window'

---

These helper functions are part of our shared library and are meant to improve consistency, accessibility, and maintainability in all theme development work.

---

🆔 get_page_id_by_title()

This function returns the WordPress page ID for a given page title.

🧾 Example Usage

$page_id = get_page_id_by_title('Contact');

This is useful when you need to programmatically reference a page without hardcoding its ID.

📋 Output

Returns an int representing the post ID of the matching page. If no page is found, it will return null.

---

Video

---