Image Functions Documentation

Overview

The theme provides several functions for handling images with responsive and retina support. These functions generate HTML markup for images with appropriate source sets and attributes.

These are used for image display throughout the site both in the themes, and in presentation related plugins.

Benefits

Picture Element Benefits

The <picture> element markup generated by these functions provides several advantages:

  • Responsive Images: Automatically serves different image sizes based on viewport width
  • Retina Support: Delivers high-resolution images to retina displays while serving standard resolution to regular displays
  • Performance: Optimizes bandwidth usage by serving appropriately sized images
  • Art Direction: Allows for different image crops or compositions at different breakpoints
  • Browser Optimization: Modern browsers can preload the most appropriate image source

Background Imageset Benefits

The background imageset CSS provides:

  • Retina Support: Automatically serves high-resolution images on retina displays
  • Fallback Support: Includes standard background-image for older browsers
  • Vendor Prefixing: Includes -webkit-image-set for broader browser compatibility
  • Performance: Optimizes image delivery based on device capabilities
  • Maintainability: Centralized image size management through WordPress

Functions

jc_get_image()

Generates HTML markup for an image with responsive and retina support.

function jc_get_image(
    int $image_id,
    string $size,
    bool $show_credits = false,
    int $mobile_image_id = 0,
    string $mobile_size = 'mobile',
    int $medium_image_id = 0,
    string $medium_size = 'intermediate'
): string

Parameters

  • $image_id: WordPress attachment ID of the image
  • $size: Image size to use (e.g., ‘background-image’, ‘feature-image’)
  • $show_credits: Whether to display image credits
  • $mobile_image_id: Optional mobile-specific image ID
  • $mobile_size: Size for mobile image (default: ‘mobile’)
  • $medium_image_id: Optional medium-sized image ID
  • $medium_size: Size for medium image (default: ‘intermediate’)

Example Output 

<picture itemprop="image">
    <source media="(max-width: 640px)" width="640" height="480" srcset="mobile-image.jpg 1x, mobile-image@2x.jpg 2x" alt="Mobile image description" itemprop="contentUrl">
    <source media="(min-width: 641px) and (max-width: 1024px)" width="1024" height="768" srcset="medium-image.jpg 1x, medium-image@2x.jpg 2x" alt="Medium image description" itemprop="contentUrl">
    <img src="default-image.jpg" srcset="default-image.jpg 1x, default-image@2x.jpg 2x" alt="Image description" itemprop="contentUrl">
</picture>

jc_image()

Echoes the output of jc_get_image(). This is a convenience function that directly outputs the HTML.

function jc_image(
    int $image_id,
    string $size,
    bool $show_credits = false,
    int $mobile_image_id = 0,
    string $mobile_size = 'mobile',
    int $medium_image_id = 0,
    string $medium_size = 'intermediate'
): void

jc_get_background_imageset()

Generates CSS for a background image with retina support.

function jc_get_background_imageset(
    int $image_id,
    string $size
): string

Example Output 

background-image: url(default-image.jpg);
background-image: -webkit-image-set(
    url(default-image.jpg) 1x,
    url(default-image@2x.jpg) 2x
);
background-image: image-set(
    url(default-image.jpg) 1x,
    url(default-image@2x.jpg) 2x
);

Usage Examples

Basic Image Display 

// Display a regular image
jc_image($image_id, 'feature-image');

// Get image HTML for custom use
$image_html = jc_get_image($image_id, 'feature-image');

Responsive Image with Mobile Variant 

// Display image with mobile-specific version
jc_image(
    $image_id,
    'background-image',
    false,
    $mobile_image_id
);

Background Image with Retina Support 

// Get CSS for background image
$background_css = jc_get_background_imageset($image_id, 'background-image');
echo '<div style="' . $background_css . '">Content</div>';

Available Image Sizes

The theme defines several image sizes for different use cases:

Size Name Dimensions Retina Dimensions
background-image 2560x1420 5120x2840
feature-image 1240x634 2480x1268
cover-image 387x468 774x936
mobile 640px width 1280px width
intermediate 1024px width 2048px width

Additional sizes are defined in functions.php.

Usage Examples

Product Category Banner

In woocommerce/archive-product.php, the jc_get_image function is used to display a banner image for product categories:

// Get banner image IDs from term meta
$banner_image_id = get_term_meta( $term_id, 'jc_term_banner_image_id', true );
$mobile_image_id = get_term_meta( $term_id, 'jc_term_mobile_image_id', true );

// Determine background size based on term meta
$background_size = get_term_meta( $term_id, 'jc_term_banner_proportional', 1 ) 
    ? 'background-proportional' 
    : 'background-image';

// Display the banner image with mobile support
printf( '<div class="image">%1$s</div>', 
    jc_get_image( $banner_image_id, $background_size, false, $mobile_image_id )
);

Feature Article Banner

In template-parts/content-single-feature.php, the jc_image function is used to display feature article banners:

if ( $image = get_post_meta( get_the_ID(), '_sj_banner_image_id', true ) ) {
    $color = get_post_meta( get_the_ID(), '_sj_banner_credits_color', true );
    printf( '<div class="banner entry-header-asset %s">', $color ? $color : '' );
    jc_image( get_post_meta( get_the_ID(), '_sj_banner_image_id', true ), 'feature-image', true );
    printf( '</div>' );
}

Cover Issue Display

In template-parts/content-cover-issue.php, the jc_image function is used to display magazine covers:

<div class="image-mount">
    <a href="<?php echo get_permalink()?>">
        <?php
        if ( function_exists( 'jc_image') ) {
            jc_image( get_post_thumbnail_id(), 'cover-image' );
        } else {
            $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'cover-image' );
            printf( '<img src="%s" itemprop="image" />', $image[0] );
        }
        ?>
    </a>
</div>

Background Imageset in Slider

In inc/template-tags.php, the jc_get_background_imageset function is used within a slider implementation:

function jc_slider( $slides, $size = "background-image", $thumbs = false, $autoplay = false, $delay = "6000" ) {
    // ... setup code ...
    
    foreach ( $slides as $slide ) {
        $image_set = jc_get_background_imageset( $slide['slide_id'], $size );
        printf( '<div class="carousel-cell" style="background-position: %1$s %2$s; %3$s">', 
            $horizontal_offset, 
            $vertical_offset, 
            $image_set 
        );
    }
}

These examples demonstrate how the image functions are used in different contexts throughout the theme, from product categories to article features and magazine covers.