smdreyer

Thanks Tuan! Steve

Tuan, Thanks! Works great. If you go to www.stevedreyer.com and click on the Asia Collection and then the first image (Terra Cotta Warriors) you'll see the Title and one line of Description. All others don't have the description. I changed the code to -40px (from -30px) in order to see both on the desktop. Not urgent, but it would be great if I had control over the Title font (all caps is the default), the description font (looks bold) and the amount of space between the title and the description lines under the Lightbox image. Thanks so much for your help on this. I think others will benefit too, if they don't like the mouse-over default of the Lightbox function!! Steve

Tuan, Thanks. I set it up as available with a password. URL: https://armadillo-trout-neel.squarespace.com/ or directly to the page, here: https://armadillo-trout-neel.squarespace.com/images PW: tuantest This is a temporary site and it will only be there for a couple of days (it's a trial). Thanks, Steve

Tuan, I created a new temporary site using Avenue (same as my production site at stevedreyer.com. Here's the URL of the temporary site. Click on "images" in the menu. It's set up for a lightbox with a title for the images. https://armadillo-trout-neel.squarespace.com/config/design/custom-css I pasted the code that was provided in this thread (no other code is in the CSS window). See the code and the error message. So this has nothing to do with my over 400 lines of CSS in my production site. Here's the code and then a screenshot of the whole CSS. Code: /* move title under image lightbox */ .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background-color: transparent !important; padding: 0px !important; bottom: -30px !Important; } .sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide img { top: -30px !important; } .yui3-lightbox2 .sqs-lightbox-meta * { color: black !important; text-align: center; } Screen Shot with Error Msg:

Tuan, The current code is this - from the above thread. I copied it and placed it in the CSS: /* move title under image lightbox */ .yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background-color: transparent !important; padding: 0px !important; bottom: -30px !Important; } .sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide img { top: -30px !important; } .yui3-lightbox2 .sqs-lightbox-meta * { color: black !important; text-align: center; }

It's the complete code - the error msg just over wrote the remainder. I tried this several times. Steve

Tuan, Not sure why, but the code results in a syntax error. See attached.

It would be fine if it's always there for each image in the lightbox (not on hover) - either the description or the title or both for each image. It would be great if the font is customizable, but if it's black I'll make sure the background of the screen is white). Centered to the image cell, UNDER the image (not over it). This would need it to work on mobile and iPad in both portrait and landscape orientation, and I wouldn't want the "dot" to appear in the lower right, which is the default for lightbox images with title/descriptions. As a minimum, I'd be happy with it looking like this (not a Squarespace site). http://farber.com/collections/new-york-mood.php#gallery-28 Thanks, Steve

It would be fine if it's always there for each image in the lightbox (not on hover) - either the description or the title or both for each image. It would be great if the font is customizable, but if it's black I'll make sure the background of the screen is white). Centered to the image cell, UNDER the image (not over it). This would need it to work on mobile and iPad in both portrait and landscape orientation, and I wouldn't want the "dot" to appear in the lower right, which is the default for lightbox images with title/descriptions. As a minimum, I'd be happy with it looking like this (not a Squarespace site). http://farber.com/collections/new-york-mood.php#gallery-28 Thanks, Steve

Hi Tuan, Sure, here's the link to the site. www.stevedreyer.com. Enter it and go to Collections in the menu. All the "collections" (except for New York City) use the Lightbox function. Try "Paris" as an example or the others that use the Lightbox where each image has a Title that currently appears on mouse-over. I'd like either the Title and/or the image description centered UNDER the Lightbox image on desktop, mobile and iPad. Preferably with control over the font - but that's not the most important thing. Thanks for trying.... Steve

Tuan, I'd like to be able to have the lightbox on desktop and mobile to work as in this posting, where the title and/or the description is UNDER the image (not overlayed). It looks great with what was done for 7.1, but I am using Avenue in 7.0 (business plan). Thanks, Steve

Tuan, Got it, yes - looks good. Thank you! Steve

Thanks Tuan! I added the code, with these results. 1- It does work on the iPhone in vertical position. 2- It does not work on the phone if in horizontal position. 3- It does not work on the iPad in both positions. Maybe a modification to the code for 2 and 3? Appreciate it. Steve

Hi Tuan, Thanks for the reply. Yes, that's what I wanted to do because (as you know) you can't pinch-zoom on mobile when you enable the lightbox. So I only wanted the index thumbnails to show on the phone and to eliminate clicking on one - which would otherwise bring up the lightbox. In the meantime, I did a workaround. You can see the difference on my site at www.stevedreyer.com (do so with mobile). 1- Go to "Collections" then "Urbanscapes". This is how it originally worked. When you click on that you get index thumbnail images on the phone, with their titles. If you click on any image there it goes to the lightbox. I have the title of that image there, but cannot pinch-zoom to make it larger (which is what most people would do!). 2- Workaround: In the Collection index (again on mobile), go to "New York City" (this is my workaround). The thumbnails are stacked on mobile and desktop without the lightbox feature turned on. You cannot click on the thumbnail image on the phone, BUT, you can pinch-zoom. That's what I requested in my question, because it's enough to see the thumbnails on the phone. HOWEVER, in order to do that I had to change the page for desktop (no thumbnails, no lightbox). But I think that's better than not having pinch-zoom with lightbox on mobile. HOPE THIS MAKES SENSE. PLEASE NOTE: I need to get this done for an exhibit, but will hold off for a while until you or someone has a chance to look into the question. But ultimately, I may need to change my pages (including Urbanscapes) to the way I'm doing it with New York City. This may be valuable to others, so I still think it's worth investigating. Thanks. Steve

I'd like to disable the lightbox but ONLY on mobile. I have it set up now to show the lightbox on desktop and mobile (the default when you select lightbox for a page in an index in Avenue). I'm okay with it on desktop because visitors generally won't pinch zoom, but I don't like the lack of pinch-zoom on mobile (like mostly everyone using Squarespace). So I am okay just seeing the images stacked with their titles on mobile so they can be scrolled and pinch-zoomed. Site: www.stevedreyer.com. On mobile, tap Collections, then NYC to see what I mean. Thanks.

Tuan, I appreciate the help. I thought I'd give you all the requirements in one response, so that you don't get many smaller responses - hope that is okay! Four things follow: (1) Your code worked with regard to multiple lines (thanks!). I made a slight change to move the description closer (up) to the image with this - which I think works for me: /*length of text under images per Tuan and moving text closer to image (margin-top) - was margin-top 0px*/ .sqs-gallery-block-slideshow.sqs-gallery-block-show-meta .sqs-active-slide .meta { position: relative; margin-top: -10px !important; } (2) If possible, I'd like the text centered (all lines) to the width of the image cell so that it's in the same location for all slides (see below). You can look at the way it is now at www.stevedreyer.com/slidetest. It would be great if it was like the following. I think it would look better as the slides change. Here's an example with one of the images to explain this (shows bottom portion of image). It should be the same of course on mobile. BY THE WAY, I found another site that works exactly as I'd prefer it. It's not Squarespace, but it looks great on desktop and mobile: https://www.staleywise.com/artists/herbert-matter/selected-works?view=slider#3 3) For some reason the text lines (if 2 or 3) start to move into the footer area - especially on iPhone, but also on different size desktop/laptop screens. It would probably be better if the whole slideshow section pushed the existing footer down, rather than overlaying it. But it's fine if I only have one line of text - which is what I was testing when you looked. (4) Lastly, I think. on the iPhone the arrows are right at the edge of the screen. Ideally the arrows should be a little further away from the largest width image (and stay there for all images), BUT also leave a little room away from the sides of the iPhone screen edge (even if the image cell needs to be narrowed). Tuan, I know there's a lot here. I appreciate the help! I think your solution might be beneficial to anyone wishing to properly add text under slideshow images, which I believe should have been possible as a Squarespace feature.

Tuan - thanks very much. Is there a way to center the description/title under the image cell. And maybe start the first line a little higher? Thanks!

Yes, that works for images that only have 2 lines of text in the description. The third example (Image 3 above) has 3 lines of description, and I think the first one is pushed up onto the image display (which you wouldn't see). I added a 4th image, with the following in the title and description fields. Check it out on desktop and mobile. Note, it's now good with your code for the width (THX), but needs more code to take care of number of lines (Title and Description) that all need to be UNDER the images.

Hi Tuan, The test page is www.stevedreyer.com/slidetest. Requirement is this (for all images in the slideshow - both horizontal and vertical): 1- Up to 3 lines of text (more if possible) from the Squarespace description field of the images. 2- First line of description should start at the same position, regardless of number of lines. 3- The width of the description field spans to the width of the image cell. 4- No pushing parts of the description up into image (see below). The following describes what's in the "description" field in Squarespace for each image, and what happens. Image 1 description (1 line of text): Okay on laptop, wraps on mobile. Empire State, Looking North Image 2 description (2 lines of text): Wraps on mobile and laptop. First line pushes up into text. The San Remo Limited Edition of 20 Image 3 description (3 lines of text). Wraps on mobile, first line pushes up into image so you can't see it. Empire State Building Limited Edition of 20 Inquire Here THANKS! Steve

Tuan, An idea. See this test page. It is a slideshow of 2 images. You can scroll back and forth with the arrows or click the thumbnails. However, in order to do this I placed the images on a transparent background (larger than the image size) in Photoshop, leaving some transparency below the image portion and using the text tool to place the titles, image numbers, etc. www.stevedreyer.com/slidetest And then saving the images as PNG so that my page background color doesn't matter. This works well - although I shouldn't have to do it this way - BUT, I can live with it. NOW, the question. If I have a page with a grid of images (thumbnails), how can I click on one and have it go directly to the right spot in the slideshow. Then, once there, the user can scroll back and forth on the images and see the correct titles, page image numbers, etc. I know I can have a regular slideshow and have the title/description below each image, but it doesn't show well on mobile because the text of the description wraps (the description area is not as wide as the image width). Note that my template is Avenue in 7.0. If you go to this page and click on any thumbnail, you'll see how I want it to work. It's a site that doesn't use Squarespace. https://www.cavaliergalleries.com/artist/David_Burdeny/types/photography Please let me know what you think, including the advisability of using PNG files. Thanks!

Tuan, Thanks - I'm okay on #2. I really don't see any way to do what I want - even though other services have the functionality built into their products. So I've been looking for workarounds - which don't seem to be possible to do without coding. Artlogic is one service that has functionality and layouts that would be okay. Here's the workflow, include one of those standard layouts, and one way I tried to do something similar. THIS IS DETAILED - SORRY, BUT I DON'T SEE ANY WAY TO EXPLAIN THIS BETTER, SO I'VE DONE SOME WORK TO EXPLAIN IT as you'll see. First to the Artlogic example, then my workaround. 1- Website URL: https://www.irastehmann.com/ 2- Click on the "artists" link in the top menu (which would be something like "Black and White" for my site. 3- On the "Artists" page, click, for example, Robert Capa. This would be one of my black and white "Collections", like "New York City" or "Paris" etc. 4- Now, on the Robert Capa page (https://www.irastehmann.com/artists/31-robert-capa/series/other-works/) you'll see thumbnails of the his images, with text below. 5- If you click on one of the thumbnails, let's say, the third one "Omaha Beach...". that will bring you to a page, nicely formatted, that can be scrolled using the ARROWS to go back and forth to the previous or next image on the thumbnail page (#4 above). The problem with Squarespace doing this is that you have to code a "previous" and "next button to go to physical ages. This is why I came up with the "desired workflow" in my posting. While I was waiting (hoping) for a solution, I came up with this (which you can look at): 1- Go to www.stevedreyer.com/black-and-white. (IMPT: the New York City link is the only one currently working for this demo). 2- Click on New York City (you'll get thumbnails similar to the Robert Capa example above (#4). 3- Click on the "Misty Morning" thumbnail. You'll get a page similar to Robert Capa example above (#5). 4- When you get to the Misty Morning page, you'll see "previous", "next" and "thumbnail" links to get to the pages for the previous and next images, including going back to all thumbnails for New York City. NOTE: what I did works like the Artlogic scenario, but I have to create separate pages and be very careful about the previous/next links on EVERY page. It's cumbersome, time consuming, and prone to mistakes. This is why I was looking for the scenario in my workflow posting. I hope this makes sense. Thanks!

Last check on this - anyone? Thanks.

Just checking once again. Maybe this is too difficult to do with Squarespace. Any response (pro or con) would be appreciated. Thanks, Steve

Anyone able to answer this? Thanks.

Thanks Ziggy. It does work, although it was originally too close to the side borders of the iPhone 13. I changed the left/right to 38px instead and it works better for me when I hold it vertically. Thoughts? Appreciate the help.