ScottDimond

Fixed. https://www.will-myers.com/articles/perfect-anchor-links-in-squarespace

Hello, I'm using anchor links as described here: https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links They appear to work but the landing text is not visible. It appears to me that the page jump works and is probably positioned the landing text at the very top of the browser window but the site header hides the landing text. The result is that the landing text is not seen and the visitor ends up looking at page content that is several lines down from where I want it to be. How can I have these jumps account for the size of the site header and have the landing text appear just under the site header? Thanks

nvm. Gave up waiting and will try jump ids in the section above

Hello, I hope I can explain this well enough to get an answer. I have a live page that contains multiple panoramic images, one after the other, each as a slideshow reels and it works very well. Here is the live page: https://www.scottdimond.com/gigapixel The number of images is getting to be fairly large and that could mean a visitor has to do lots of scrolling to find an image they are interested in. I created a test page to experiment with putting a navigation gallery of thumbnails at the start of the page and it is: https://www.scottdimond.com/gigapixel-copy-testing What you will see on the test page is that I inserted a simple grid that will have thumbnails of all the images on the page (right now, just the first two thumbnails represent images on the page with working links). The idea is that the click through link on each thumbnails takes the visitor to the specific image on the page that is represented by the thumbnail. The click through link for each thumbnail photo is properly formatted like this: https://www.scottdimond.com/gigapixel-copy-testing/#SD_220911_1481T as to jump to the location on the page where the large image of the photo is positioned. The problem is that I can't seem to find a way to associate the jump link with each photo. What I did was add a section just in front of a photo and add code to it like this: <p id="SD_220911_1481T"><SD_220911_1481T/p>. It works but it presents two problems; 1) it just adds more unnecessary white space and 2) if I move the photos up and down the page, I will have to move the sections that sits in front of them as well, which is just a recipe for disaster. Right now on the live page I can use the up or down arrows on the section to move a photo up the page or down the page. And if I had the jump link associated with the photo and not with the section before it, I could rearrange the photos on the pages as much as I wanted and still have the links associated with the thumbnails position the visitor to the correct photo. Btw, I added text the the current sections that contain code like <p id="SD_220911_1481T"><SD_220911_1481T/p> just so I could see what image the code relates to, in case I have to move that section and the photo up or down the page as pairs. But ideally, if I could associate the jump link with the photo, everything would be wonderful and these undesirable sections that only hold the jump link code would be unnecessary. So, how to I go about associating something like <p id="SD_220911_1481T"><SD_220911_1481T/p> with each of the photos on the page, so I can have the click through links on each thumbnail photo (like https://www.scottdimond.com/gigapixel-copy-testing/#SD_220911_1481T&nbsp) work? And one final question, when working with a test page as I'm now, if I actually got everything working, is there a simple way to swap pages so the test one becomes the live one? I would hate to have to remember all the things I did on the test page to get it to work and then apply all of them to the live page. Thanks, Scott

Hello @tuanphan, Yes, OK but do what with the link address? How does that help? Are you suggesting that for a photo elsewhere on the site that I associate it with a fully qualified web address and not a page? Scott

Site URL: https://scottdimond.squarespace.com/ Password: letmein On my main page I have a slideshow:full. I want to set it up so if the user clicks on one of the photos going by in the slideshow, they are taken to the specific gallery that contains that photo. I can edit a photo on the main page, click on the gear icon beside link and then select page. Clicking on search, I can see all the pages I have including one called galleries. But I cannot refine the page to a specific gallery within galleries. For example, these navigation exists "/galleries/panoramics" or "/galleries/prairie-abandonment-2" but I can find no way to associated one of those with a photo on the main page. I seem to be only able to link the photo to the entire gallery, which will then display various collections within. I want to direct the user to the specific collection with galleries. How can I do this? My only selection is Galleries. How to I select one of these: Thanks

@creedon The images where the watermark appears in the center are any in these galleries but only in the lightbox, so you need to click on the image to see it: https://scottdimond.squarespace.com/galleries The image in particular is in this gallery and you will see the watermark nicely positioned in the bottom middle: https://scottdimond.squarespace.com/galleries/illuminated-abandonment?itemId=6o8ovlxrfy4iiy0a4tc03nxrko4y7u

@creedon It was in the original post but maybe not so obvious 🙂 >pw: letmein

@creedon thanks for the reply. Interesting. I had coded this: /* Watermark in Lightbox */ .gallery-lightbox-item-wrapper{ position: relative!important} .gallery-lightbox-item-wrapper:after{ content: " "; display: block; background-image: url(https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png)!important; background-size: contain; position: absolute; width: 100px; height: 40px; center: 0; bottom: 0; opacity: .2 } and it did result in what I wanted, which was this watermark at the bottom and right in the middle: so that is why I just thought center: 0; was working. If there is no support for center in CSS, I'm not sure why it is doing what I want in the above case. But anyway, that is exactly want I want because on slideshows the images can be cut off and neither the far left nor far right of the image may appear, so having a watermark out (hard left or right) there does not really help - as shown with the first image on this page: https://scottdimond.squarespace.com/gigapixel Thanks for your help, Scott

Site URL: https://scottdimond.squarespace.com/ Hello, Can someone tell me why center: 0; is not working in the code below with a .gallery-reel. It acts as if I had left: 0; coded. In fact, if I code right: 0; that works. I just cannot get center to work. Thanks btw, I just noticed that center: 0; is also not working for .gallery-fullscreen-slideshow. pw: letmein /* Watermark in fullscreen slideshow real - gigapixel */ .gallery-reel-item-wrapper{ position: relative!important} .gallery-reel-item-wrapper:after{ content: " "; display: block; background-image: url(https://static1.squarespace.com/static/61a2a7b00b6008246ee8fe57/t/61a3af940246c70937ff9e59/1638117268613/500px+DIMOND+white_logo_transparent.png)!important; background-size: contain; position: absolute; width: 100px; height: 40px; center: 0; bottom: 0; opacity: .5 }

@tuanphan Thanks, that fixed it. Now on to the next issue. I cannot determine how to change the sizing of the navigation that appears at the bottom of a page view within a Portfolio (see below the text beside < & >). The font is huge compared to the rest of the page. Changing all the various Header sizes seem to do nothing for these. Where can their font size be adjusted? Thanks

Site URL: https://scottdimond.squarespace.com/ Hello, How do I stop these (see sample below) text overlays from happening? The site looks fine on a 27" 5120x2880 large screen but on other computers (e.g. laptops), my header 4 text seems to overlay itself. Even setting the page width max to 1000px does not solve the problem and does not seem to do much at all. In a full screen browser on a Mac BookPro with screen size of 2560x1600 the text overlay is happening. If I set the header 4 text size even smaller, on a large display you would need a magnifying glass to read the text. Thanks, Scott pw letmein

Hello @tuanphan, This forum topic seems to be exactly what I was looking for - getting captions appearing in lightbox and not in the gallery grid view. I added the code you supplied in a few posts to Settings/Advanced/Code Injection/Header and yes, the caption now appears in Lightbox. Ya! Thanks. But the captions still appear in the Gallery view (Grid Masonry). I did see you provided some additional code to someone that was also asking how to remove the captions from the grid view but that code looked to be page specific and did nothing for me. I'm just starting out and working on getting one gallery working perfectly and then plan to duplicate that one finished gallery multiple times and populate those others with different photos, so I'm looking for some code that will remove the caption from the grid view for all galleries on the site. The one gallery that is a work in progress is: scottdimond.squarespace.com/landscape/aurora Password: letmein As you will see, all the test images have captions ("Image x description"), captions are on, they appear in lightbox, but also, undesirably, they also appear in the grid view. Thanks very much for your help, Scott btw, this is the code I read that should remove captions in grid view but does not work for me. I'm not sure what the collection-"hex code" does and if it is unique to a site/gallery/page/etc. /* Filmography caption */ body#collection-5e388895b9b4566c6962ec61 figcaption.gallery-caption.gallery-caption-grid-masonry { display: none; }