Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Display Image Title & Description in Gallery Page


cwilhelmi

Question

Site URL: https://www.christopherwilhelmiphoto.com/reptiles-amphibians-insects

Hello,

In my website I have gallery pages showing photos. When hovering the cursor on top of each photo you will see the title of each photo (which is the name of the animal and the location it was photographed, both in one row). I am trying to have the name of the animal in the first row and the location it was photographed in the second row. I tried having the location as Description instead of Title but it doesn't work.

If you take a look at my website (https://www.christopherwilhelmiphoto.com/reptiles-amphibians-insects) you will see what I mean with the first and second photos. If you hover the cursor over the first photo (the yellow frog: name in Title and location in Description) you will only see its name, but if you click on it (and see the slideshow) you will see the location next to its name. In the second photo (green frog: name and location in Title) everything appears in the same row.

Can anyone please help me?

Thanks!

Chris

 

Link to comment
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

7 answers to this question

Recommended Posts

  • 0

Hi,

Step 1. Edit title to this

Quote

Yellow Tree Frog <em>Tambopata NR, Peru</em>

Step 2. Let me know. We will test some code for image in gallery & slideshow.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
1 hour ago, tuanphan said:

Hi,

Step 1. Edit title to this

Step 2. Let me know. We will test some code for image in gallery & slideshow.

Hi,

I changed the title of the image to what you suggested and deleted the description in the image. Now I see everything still in one line but the Location in italics.

After doing that, when I enter again to the image settings, the '<em>' part is gone (see screenshot).

Is there anything I can do to have more control over the text that shows up when hovering? Like displaying it in two rows, or making the font a bit bigger, or remove the bold of the Location?

Thanks!

Chris

screenshot.JPG

Link to comment
  • 0
25 minutes ago, sorca_marian said:

Hello,

You can add


<br>

before


<em>

to display the title and description in a different row.

thank you! that solved my first question 🙂

do you know how i can change font, font size, and alignment??

Thanks!

Chris

Link to comment
  • 0

Sure.

Add the code in the code injection of the page

<style>
#thumbList .thumb-title {
    font-size : 25px;
}
</style>

If you want different styles for the two text, wrap the first text in a

<span></span>

Then 

#thumbList .thumb-title span {
 /* CSS HERE FOR TITLE */
}


and 
 

#thumbList .thumb-title em {
 /* CSS HERE FOR LOCATION */
}

 

Link to comment
  • 0
1 hour ago, sorca_marian said:

Sure.

Add the code in the code injection of the page


<style>
#thumbList .thumb-title {
    font-size : 25px;
}
</style>

If you want different styles for the two text, wrap the first text in a


<span></span>

Then 


#thumbList .thumb-title span {
 /* CSS HERE FOR TITLE */
}


and 
 


#thumbList .thumb-title em {
 /* CSS HERE FOR LOCATION */
}

 

Thank you this has been super helpful! I can work it out now. Main problem is I have like 100 photos so need to change each description one by one. Any idea if there is a faster way that applies to all images in a specific page?

Link to comment
  • 0

A faster approach is to write some JavaScript but that would take me like 1-2 hours.

I can be hired on Upwork.

Please see my signature below.

Edited by sorca_marian
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...