Customize Image Gallery Text for 1 image

Options
Bruce_McCaughan
Bruce_McCaughan Member Posts: 130 Learner
in Ask a Question

In the Photo Gallery editor, we can select where the text aligns with the 9 position grid thingy.
Can anyone enlighten me/help with the css required to get just one of the images to render its text in a different position/alignment?
By default, my gallery is set with content to display from the center/middle position. But for one image, I would like the text to be positioned bottom-center.

Thanks if anyone can help.

Best Answer

  • ScottyStrehlow
    ScottyStrehlow Member Posts: 315 Duda Staff
    Answer ✓
    Options

    Hi @Bruce_McCaughan!

    I did get an answer from our Tech team. It does involve a few steps.

    • First, you'll need to inspect the photo gallery with the browser dev tools (right click the gallery > inspect)
    • Then go through the gallery's HTML until you find the specific image they want to change the text position for. You will need to expand the lines of HTML until you find the specific Span element that contains the "caption-inner" class.
    • In the screenshot below, you can see how the image highlights in the editor view when you hover over the line of HTML in the dev tools.
    • Right-click the line of HTML > Copy Selector, then go to the Photo Gallery and edit HTML/CSS. Switch to the CSS, paste the selector, and add justify-content: flex-end !important.
    2024-01-09_11-35-05.png

    I hope that works for you!

Categories