Wexley: How do I add image captions?

Can I add image captions? If no, would this be easily possible with some one-time CSS tweaking, by a just-better-than-newbie?

Thanks!Joe

Yeah, I need the same thing - captions on the images, Wexley template.

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

Is there a way to turn off the thumbnails

Ari, I do not know of a way, but check out this thread and see if this is what you need:

http://answers.squarespace.com/questions/1884/way-to-skip-the-grid-in-gallery-and-go-straight-into-viewing-mode

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

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?

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?

Ari - I am not a web designer, but i suspect what you want to do can be done with CSS... sorry i can't be of more help.

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

This is crazy. We can't add captions to the images? why not?

I wish this worked:

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

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

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

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.

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

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

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

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.

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

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

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.

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?

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!!!!

@Jimbob: have you found any solution for the mobile issue?