Qapla
asked 5 years ago

Hi,
Please, how can I display the captions and descriptions of images in timeline mode? Thank you

5 Answers
DominicStaff
answered 5 years ago

Please let me know the position that you want to show the caption.

Qapla
answered 5 years ago

Hi Dominic
I’m sorry i didn’t see your reply before! I don’t know precisely where to display the legend but I only want my visitors can see them. Roll over would be a nice way. Or, just below in very small font. Thank you 

DominicStaff
answered 5 years ago

You can add the following code to the Dashboard > Customize > Additional CSS.

.timeline .hentry .entry-thumbnail {
position: relative;
}
.timeline .hentry .entry-thumbnail .image-caption {
position: absolute;
bottom: 2px;
margin: 0;
font-style: italic;
text-align: center;
left: 0;
font-size: 12px;
right: 0;
}

Then open the content.php file and replace the following code: 

<div class="entry-thumbnail">
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
</div>

With the following code:

<div class="entry-thumbnail">
      <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
      <p class="image-caption"><?php the_post_thumbnail_caption();?></p>
</div>
Qapla
answered 5 years ago

Thank you very much Dominic, that’s absolutely perfect!
However, it would be even better if the caption could appears only when we slide the cursor on the image… Possible ? Thanks

Dominic Staff
replied 5 years ago

You can try the following code:
.timeline .hentry .entry-thumbnail .image-caption { display: none;}
.timeline .hentry .entry-thumbnail:hover .image-caption { display: block;}

Qapla
answered 5 years ago

Great! Thank you

Powered by DW Question & Answer Pro