Squarespace does not offer an accordion with the option to upload images. Probably feature versions will have that but for now we need a workaround.
Since I am passionate UI guy, who really likes to be creative in finding solutions and workarounds when the feature is not present, I want to propose to you my solution for the accordion.
The steps are the following:
- You add a simple text in the carousel item editor and you add a bold styling on it
- In the second step you add a simple link, but the link(url) will point towards an image not an html or php. For now there is no option to add an image, well maybe Chuck Norris could do it though
- The third step is to add your image from the file menu(supposing that you already uploaded it):
- The fourth and final step involves some coding(javascript). In the code injections menu on top (if you have a pro subscription – Update: Pro means business plan or above) you can add a script tag in the footer panel with the following script:
Now that you know the steps, I will also insert here the full code for you to copy-paste it and provide you some explanations.
<script>
document.querySelectorAll('.accordion-item__description').forEach((item) => {
[...item.querySelectorAll('a')].forEach((link) => {
if(link.querySelector('strong')) {
const imgSrc = link.href;
const img = document.createElement('img');
img.src = imgSrc;
img.alt = link.querySelector('strong').innerText;
link.replaceWith(img);
}
})
});
</script>Update: You don’t need the […item.querySelectorAll(‘a’)] you could just use item.querySelectorAll(‘a’) because Nodelist now supports forEach method in a lot’s of browsers.
If(link.querySelector(‘strong’))
Here we check if there is a strong tag inside the link, to differentiate from normal links. Since links in Squarespace accordion or bolded anyway, puttin an extra strong on the text will serve only as a marker/flag that tells the script that a link with a strong tag inside means that it needs to be converted into an image.
After this we create the link with createElement(‘img’), we add the alt attribute with the text that we added in the strong tag link.querySelector(‘strong’).innerText.
Link.replaceWith(img);
Finally we just replace the original link with the created <img alt=”…” /> tag.
For further explanations watch the video below:
I hope this article helped you in any way and please subscribe if you don’t want to miss new ui workarounds.
Hi there,
Thank you so much for posting this for this is exactly what I was looking for.
I am total -100% knowledge with this, and I have lost you on Step 4, for I do not see the Code Injection on Top at all. Can you kindly enlighten me? THANK YOU!!
Thank you for your comment. The Injections menu I believe is not available on Personal plan(not sure what plan are you using) only above this plan. This means Starting from Business plan and above you can add custom CSS and Injections of scripts.
You can check here what is included in your plan.
https://www.squarespace.com/pricing
Thank you very much for your reply. The account is on a business plan, and I have found where the Code Injection is: Setting > Advance > Code Injection. Everything is working perfect! Now, I am going to digest your explanation of how all this works!
THANK YOU THANK YOU THANK YOU SOOOO MUCH! XOXOX
I am very glad that you found the Code Injection. I hope the video also was useful for you !
Hi,
Thank you so much for this, super helpful. On Web, this works great, but on a mobile phone when I open the accordion the photo is cut off and there is no way to scroll to see the other half of it. Do you know of a workaround?
Thank you!
The images are added in the HTML without any size limitation. But you can add in the Custom CSS panel this code:
.accordion-item__description img {
max-width: 100%;
}
Thank you so much!
Fantastic workaround, thank you! Before I upgrade to a business plan, can you tell me if this would work for videos too? And maybe even support a thumbnail image that visitors could click on to see the video?
Actually this does not work for anything else then images but the good news is that I wrote another article in the past about a different script that I wrote, that covers images, videos, titles, lists, tables, all this in accordion. I will attach soon also video explanation for that article. https://www.ui-workarounds.com/boosting-your-squarespace-accordion-with-videos-images-tables-lists-and-titles/
Hey Jozsef, thanks for this. I got it to work on my site. It looks great, however it only loads the image after I refresh the page. I have a feeling it’s because of AJAX loading, however I would like to keep it enabled. Is there a workaround for this? Thanks 🙂
Sorry Joszef. I just figured it out. For other readers, I used –
window.Squarespace.onInitialize(Y, function() {
// do stuff
});
I am glad that you figured it out. Though it usually should work without any fix of this kind after you save the modifications and the page reloads, but it does not show up in the preview mode(before saving the page modifications). Thank you Tom, for you comment, I am always glad to read comments from readers.
Hello, thank you for the code! however, on my page the image is HUGE
is there a way to shrink it?? i tried using the CSS you gave to others but no luck.
Thank you!
Hi. So you managed to add this code into the custom CSS panel in top-left corner and it still does not work?
.accordion-item__description img {
max-width: 100%;
}
Hello!
Thank you so much for this, it added an image to my site. However, the image is HUGE and i tried using the CSS you commented for others.
Thank you!
This is SO helpful. But now I have another problem – I’ve included an icon with this code but also need the written name of the course inked beside it. Right now the icon and copy align on the bottom but is there a way to centre align them side by side instead?
So the content would look like []—— instead of []_____ ?
Hi. This is the code:
.accordion-items-container img {vertical-align: middle;
}
Thank you!!