advice for captions between desktop and mobile

[alasdair17]

Hi,

I'm designing my father's photography website which features hundreds of images, and I'm looking for an efficient way to handle captions for both desktop and mobile layouts. All the images are on element grids.

Currently, the setup requires me to:

• Add captions in the element grid under "Edit Lightbox Caption" (for desktop, where captions appear only in the lightbox).

• Turn off sync, create a separate mobile layout, and add captions again in the element grid under "Edit Caption" (for mobile, where captions appear beneath the images since the lightbox is disabled).

This process of adding captions twice is very time-consuming. Is there a more efficient way to add captions just once so they show:

• In the lightbox on desktop.

• Beneath the images on mobile (non-lightbox mode)?

Any advice would be greatly appreciated!

Here's the link to the website for reference: alandimmick.com.

Cheers,

Alasdair

[felix_rabe]

@alasdair17 This is a great idea to handle lightbox captions on mobile. maybe @arminunruh has already integrated an feature like "show caption beneath image on mobile" when the lightbox is turned off on mobile?

Another way would be to get into lightbox settings and set "Image File Caption" as the Default Caption for the Lightbox. You can then give your Image in the Media Section a Description that will be used as Lightbox caption. The following code that goes into Custom CSS/HTML in the Head section will do the rest.

<script>
function addCaptionsForMobile() {
    // Check if the HTML tag has the class "phone-size"
    if (jQuery("html").hasClass("phone-size")) {
        // Select all divs with the class 'img' that have a data-lightbox-caption attribute
        jQuery(".img[data-lightbox-caption]").each(function() {
            var $div = jQuery(this);
            var captionHTML = $div.attr("data-lightbox-caption");
            
            if (captionHTML) {
                // Check if the caption is already appended to avoid duplication
                if ($div.find(".custom-caption").length === 0) {
                    // Create a new element for the caption and add it to the div
                    var $caption = jQuery('<div class="custom-caption"></div>').html(captionHTML);
                    $div.append($caption);
                }
            }
        });
    } else {
        // Remove captions if switching to a non-mobile layout
        jQuery(".custom-caption").remove();
    }
}

// Run the function when a new page is shown
window.laytheme.on("newpageshown", function() {
    addCaptionsForMobile();
});

// Add a resize listener to recheck the layout on window resize
jQuery(window).on("resize", function() {
    addCaptionsForMobile();
});
</script>

[alasdair17]

Hi @felix_rabe,

Wow, thanks so much! This works amazingly well, I really appreciate it!

It’s perfect for displaying the photograph’s title. However, I also need to include the photo’s reference code beneath the title. These images are part of an archive, and each photograph has a unique reference code. Ideally, the caption would have two lines:

• Title of the photograph (in a larger font on the first line)
• 1234-5678 (in a smaller font on the second line)

I just tried to use a <br> there to separate the caption into two lines which works, but I wonder if there’s a better way to achieve this?

Additionally, is it possible to assign a class to the second line, so the reference code can have a smaller font size?

I hope this all makes sense! Thanks again for your help, hugely appreciated!

Cheers,

Alasdair

[felix_rabe]

@alasdair17 it seems you can use <span class="my-class">Second Row</span> and add a custom css style for this class.

For example:

.my-class{
font-size: .8rem;
}

[alasdair17]

@felix_rabe Perfect, thank you so much again!