LFyel101

Ok, nevermind, i've realised I can inject the script into the specific blog sections rather than the overall site!

Site URL: https://parrot-hibiscus-33rc.squarespace.com Hi Folks, pw: homack101 I'm used a bit of code I found on here to prepend my blog pages with a "back to" link. However my site is going to be using multiple blogs, and I need the "back to" links to be different on them both. One is going back to a people section and one is for an actual blog. https://parrot-hibiscus-33rc.squarespace.com/people/blog-post-title-one-nnsty-hd5zl on this section I've got it working fine, however for this section, https://parrot-hibiscus-33rc.squarespace.com/blog/blog-post-title-one-238h5 I want it to say "Back to Insights" this is the code I am using... <script> jQuery(document).ready(function($) { $('<section id="back-to" class="Index-page"><div class="sqs-block-button button-block Index-page-content"><div class="sqs-block-button-container--center"><p class="sqsrte-small preFade fadeIn"><a href="/" class="sqs-block-">← Back to People</a></p></div></div></section>').insertBefore(".blog-item-top-wrapper"); }); </script> Is it possible to alter this so that it relates to the specific URLs, rather than just all blogs on the site? thanks! Laura

Trying to create a counter for my slideshow gallery which changes number in relation to what image the slideshow is currently on. Initially had it working by creating a counter that changes when the arrows are clicked, but sometimes you can click the page and the image will not change (however the counter which detects the clicks will!) I wondered if anyone had any luck creating gallery pagination by getting the index of the image currently on display, however this level of javascript is a bit over my head. Any help would be greatly appreciated! If anyone had any plug ins to recommend rather than my own shonky javascript that would be greatly appreciated! I've created the counter by adding a code block below the image and inserting the following script. <p class="counter"></p> <script> let imageNumber = 1 const counter = document.querySelector("p.counter") const nextButton = document.querySelector("a.next") const prevButton = document.querySelector("a.previous") const image = document.querySelectorAll(".thumb-image").length const galleryContainer = document.querySelector(".sqs-block-gallery") const imageSingle = document.querySelector(".thumb-image") let newCurrent = imageSingle.tabIndex const updateSection = function (){ counter.innerHTML = `${imageNumber} / ${image}` } const nextFunction = function (){ imageNumber = imageNumber + 1 if ( imageNumber > image ) { imageNumber = 1 } } const prevFunction = function (){ imageNumber = imageNumber - 1 if ( imageNumber < 1 ) { imageNumber = image } } updateSection() nextButton.addEventListener("click", function (){ nextFunction() updateSection() }) imageSingle.addEventListener("click", function (){ nextFunction() updateSection() }) prevButton.addEventListener("click", function (){ prevFunction() updateSection() }) </script>

Hi @tuanphan, Its injected into the site header but I can remove so you can have a proper look! thank you!

<script> // Changes the format of date on summary items var myObj = document.getElementsByClassName('summary-metadata-item--date'); var options = { year: 'numeric', month: 'long', day: 'numeric'}; for (var i = 0; i < myObj.length; ++i) { var item = myObj[i]; var date = new Date(item.innerHTML); item.innerHTML = date.toLocaleDateString('en-GB', options); } </script> Hi Folks, Wondering if anyone can help, I've used the above code to get UK format dates on my summary blocks for events, but this doesn't work with events that have a date range rather than a single date. Wondering if anyone can help me get it working as its beyond my JS skills! It just shows "invalid date" for thumbnails that have an event spanning more than one date Any advice appreciated

Hi there, i'm trying to have a fixed element scrolling down the page, but i want it to scroll a little first before it sticks. Its working fine on the first section of the page, but as soon as a new section starts the position sticky stops working. Does anyone have any thoughts? I'd like it to stay fixed all the way to the bottom. code I am using... Any help greatly appreciated! /*class applied to my image in my code block*/ .sticky { width: 9vw; height: 9vw; z-index: 1; position: absolute; right: 0 !important; transform: translateY(34px)!important; } /*class applied to code block itself*/ #block-yui_3_17_2_1_1623840361986_4088 { position: sticky; top: 0; z-index: 1; } <!-- within my custom code block --> <div id="logo" class="sticky"> <img src="https://static1.squarespace.com/static/60c07faed502261d79b77ba9/t/60c9d5fdf2f4804c9b8d1e98/1623840253861/TCG+roundel+black-01.png"></div>

Hi folks, wondering if anyone can help. I'm trying to use javascript to add some custom code to a filtered view of events on squarespace (so a filtered view of a category). (what i'm trying to do eventually is to add in some extra links above the "filtering by" text. ) I thought i'd do an initial test to see if I could get some code applied to the page (i.e just changing the background colour of the block). But it seems like something is happening when I try to apply the code to this page. My code is super simple (see below)... <script> const filteredView = document.querySelectorAll("div.sqs-events-collection-list") filteredView.style.backgroundColor = '#000000' </script> However, when I check the console, everything I try to set just keeps coming up as "undefined". Does anyone know if there's something that blocks scripts on category pages? or perhaps there's something i'm missing! i've tried adding the script to both the footer and header injection... any help or advice appreciated!

Hi Paul, Thanks for your response. The client (an art gallery) needs to be able to display their archive of past events so that they can show the breadth and history of their programme, and also so they can feature previous works that have happened at the gallery. Unfortunately I can't share the website in development on a public forum. I have tried the lazy summaries plug in, and it doesn't seem to be compatible with past events in its original form. I have emailed the developer however to see if there is any way to get this working. But thanks for your advice with this!

Thanks for this, this is useful! I think we are going to test the lazy summaries approach and see how this works for what we need. It's good to know the archive blocks are there as a possible solution. Although it seems like the archive blocks don't let you apply selections to narrow down what you're showing, unless i'm missing something! For example to only show past events, or to show an archive of specific date ranges (so if the archive block exceeded 100 events, we could start a new one). I suppose one way round that would be to start a new events page to select the archive from once the previous one reached 100? Just thinking out loud now!

I'm currently scouring the internet to try and find a solution to my problem. I am producing a website for a client that needs to be able to display a high number of past events (so more than the 30 past events limit). Has anyone found a good solution to this? So far my only possible solution seems to be to use a summary block in leiu of an events page, and use something like this lazy summaries plug in or similar https://www.squarewebsites.org/squarespace-plugins/lazy-summaries If anyone has found a solution to this problem that works with a plug in or a bit of custom code, it would be great if they could share!