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

Wexley: How do I add image captions?

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 alexmotz
Link to guide, fix code formatting

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 1

Here is the CSS I used to show title and description in slideshow view, add it to the Custom CSS Editor:


.collection-type-gallery #slideshowWrapper .image-description {
 display:block;
 color:black;
 background-color:transparent;
 text-align:center;
 top:-10%;
}

Edited by fishOrb

Share this post


Link to post
  • 1

I wish this worked:


.collection-type-gallery #slideshowWrapper .image-description {
 display:block;
 color:black;
 background-color:transparent;
 text-align:center;
 top:-10%;
}

Edited by Ari

Share this post


Link to post
  • 1

Nice one alexmotz - that works! Only problem is that it covers the lower part of the image. On videos you lose the controls.

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 0

Thanks anyways.I do have another question if I may!

Is there a way to center the grid of images with split menu navigation and have the grid of images cropped square. Right now the images are left aligned

Share this post


Link to post
  • 0

This didn’t work for me, @fishOrb can you confirm how you got it working? What’s the URL of your site so I can take a look?

Edited by dubbs

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Same here... need the captions on Wexley. Also, the Clickthrough URL does not work on Wexley. I need the clickthrough to take visitors from the image to the same item in my store.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Can this be used with the Avenue Template as well. I moved away from Waxley template. I did try it with Avenue, but it simply will not work.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 0

Also looking for a way to add captions/descriptions to images in my gallery on Wexley. Is there another portfolio template that allows this?

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!!!!

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...