Jump to content

Wexley: How do I add image captions?

Recommended Posts

  • 1 month later...
  • Replies 28
  • Created
  • Last Reply
  • 1 month later...

Surely this most be possible? I have played with CSS hacks but nothing works very well. SquareSpace guys can you confirm how to do this? Surely it most be possible - why would we be able to add pic titles and captions if we cant display them in the gallery?

Link to comment

Dubbs - Make sure your website data is cleared from your browser to force the revised CSS file to be downloaded - without doing this you will not see the change right away. (i use a secondary browser so i can clear the cache without affecting my main browser when playing around with the CSS file).

It took me some trial and error with the CSS settings to figure out how to get the text not to overlap the image. Your settings may be different than mine, I've done some other CSS formatting on my site.

My site is www.fishorb.com

Link to comment
  • 3 weeks later...

Ari, please try the CSS below, which is revised from my original answer.

I’m sorry, but I think the top:-10% was moving the description outside the enclosing container, which hides it again. Chances are you will want to add some formatting back in, but see if this shows the descriptions first.


.collection-type-gallery #slideshowWrapper .image-description {
 display:block;
}

Link to comment

Thanks for giving a hand with this.

I tried it, but not luck. I was hoping I would see the text somewhere on the page and then format it as you said. The template i'm using is avenue and gallery is set as slideshow with thumbnails.

I really wish this worked, I cant' tell how important it is

Link to comment
  • 3 weeks later...

Try this code, add it to the Custom CSS Editor. The Wexley slideshow responsive, so it moves around as you resize the window. I added a semi-transparent white background beneath them for when they overlap the images.


.collection-type-gallery #slideshowWrapper .image-description {
 display: block;
 color: black;
 background-color: #fff;
 text-align: center;
 position: absolute;
 bottom: 14px;
 opacity: .8;
 padding-top: 10px;
 height: 50px;
}


Link to comment
  • 3 weeks later...

I tweaked the code to place it up the top of the image (and to not obstruct video controls). Still, I wish I could have this not on top of the image. I don't know how to code that.


.collection-type-gallery #slideshowWrapper .image-description {
 display: block;
 color: black;
 background-color: #fff;
 text-align: center;
 position: absolute;
 top: -5px;
 opacity: .6;
 padding-top: 8px;
 height: 20px;
}

Link to comment
  • 3 weeks later...

Alexmotz, your CSS code works great on the desktop, however on my iPad and iPhone the captions of all the images get rendered on top of each other at the bottom of the last picture. Any ideas how to fix that?

tnx

Link to comment
  • 8 months later...
  • 1 year later...

WTF?! How can Squarespace have not fixed this?

In order to build any kind of portfolio site, one needs to be able to title, label, caption images in the slideshow with a line of text that sits beneath the image. Open any website, book, newspaper and will see it so simple and clear beneath every image. I cannot believe this is so hard to do.

Link to comment
  • 2 months later...

Hi - has anybody solved how to avoid the type overrun on the last image on a mobile device? Its kinda a deal breaker for a photography template. I may try to pay to get a solution coded for this. Let me know if anyone is interested?

Link to comment
  • 3 months later...

Hey guys! I know all of these comments were a while back. I've recently been working on my website-also wanting photo descriptions. I decided a way around it was to create a new page "Portfolio Descriptions" and link the title of the Description (in my case the name of my client) directly back to the picture. Its not the most professional look- but it is effective!I hope this helps some of you out!!!!

Link to comment
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.