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

Wexley: How do I add image captions?


yyy_joe

Question

  • Answers 28
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 5

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;
}


Edited by Guest
Link to guide, fix code formatting
Link to comment
  • 2

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
  • 1

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
  • 0

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
  • 0

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;
}

Edited by fishOrb
Link to comment
  • 0

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
  • 0

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;
}

Edited by PaulBe
Link to comment
  • 0

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
  • 0

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.

Edited by roy
Link to comment
  • 0

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
Guest
This topic is now closed to further replies.

×
×
  • Create New...