Easiest way to get labels on web gallery thumbnail images?

Enthusiast ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

I have a client with about 65 things that I need to be identified (by filename) in thumbnail view.

I don't think there's a way to do this in the Web tab / output (if there is, please let me know) so I'm wondering what the easiest way to modify the HMTL might by to be able to automate this, perhaps in Dreamweaver or something.

 

Or use a different gallery maker altogether?

 

thanks

TOPICS
macOS

Views

48

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 01, 2022 Feb 01, 2022

Copy link to clipboard

Copied

This is probably done most easily with the Classic gallery. The code it produces is a bit outdated, but still works.

Export the gallery, and then open index.html in a plain text editor. I used Notepad2 on Windows, there is probably a Mac equivalent. Do not use Word or similar. Dreamweaver is not required.

Insert this line in the correct location for each thumbnail. Replace "filename" with the actual filename.

Adjust margin, font-size and color to taste, save the file, then open the file in a browser to check.

<p style="margin-top: 10px; font-size: 80%; color: black;">filename</p>

Here's the context (third line from the bottom):

<div class="thumbnail borderTopLeft" onmouseover="window.gridOn( this.parentNode, 'ID49651009_thumb' );" onmouseout="window.gridOff( this.parentNode );" onclick="window.location.href='content/_DSF6501_large.html'">
            <div class="itemNumber">1</div>
            <a href="content/_DSF6501_large.html" onclick="return needThumbImgLink;">
            <div style="margin-left:15px; margin-top:31px;">
                                <img src="content/images/thumb/_DSF6501.jpg" id="ID49651009_thumb" alt="" class="thumb" />
            <p style="margin-top: 10px; font-size: 80%; color: black;">_DSF6501</p>
                              </div>
            </a> </div>

 

Save and close the file, and the result should look something like this.

There may be online solutions that do this out of the box, even automated, but it's not something I'm familiar with. I hand code my own galleries in Dreamweaver.

 

image_2022-02-01_210726.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Feb 02, 2022 Feb 02, 2022

Copy link to clipboard

Copied

LATEST

Thanks Per.

 

I can certainly edit by hand, but maybe a dedicated code editor of some type can help automate this.

 

One that I used something like 22 years ago (iView Media Pro) did this 🙂

 

Ah, nostalgia....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines