Squarespace HELP
Out of context: Reply #2
- Started
- Last post
- 3 Responses
- ridg00261
The short answer is **yes**, but it requires a bit of a "choose your own adventure" approach depending on how much custom coding you want to do.
The code you shared uses **UIkit** (a front-end framework), which is quite different from Squarespace’s native architecture. To get that exact look—a slideshow with a custom counter, a thumbnail grid overlay, and specific navigation icons—you have three main paths:
---
## 1. The "Native-ish" Path (Easiest)
Squarespace has a built-in **Gallery Section** (specifically the "Gallery Slideshow: Full") that handles the basics: full-width images, arrows, and auto-play.* **Pros:** Fast, responsive, and easy to update.
* **Cons:** It won't have the "Grid/Thumbnail" icon or the specific "1 / 14" counter layout without custom CSS.
* **How:** Add a Gallery Section -> Choose Slideshow -> Full. You can then use **Custom CSS** to style the arrows and text overlays to match your reference.## 2. The Custom Code Block (Closest Match)
If you want the *exact* functionality of that UIkit slideshow, you can drop the code into a **Code Block**.* **Pros:** You get the exact UI and features (the modal grid, the specific transitions).
* **Cons:** Squarespace doesn't load UIkit by default. You would need to link the UIkit CSS and Javascript in your **Settings > Advanced > Code Injection**.
* **Crucial Step:** You’d need to ensure the `data-src` links in your code point to images already uploaded to your Squarespace library or an external host.## 3. Third-Party Plugins (The "Middle" Way)
There are creators in the Squarespace community (like *Squarewheel* or *Ghost Plugins*) who sell "Lightboxed Gallery" or "Advanced Slideshow" plugins.* **Pros:** Provides that professional "architectural portfolio" feel with features like thumbnail toggles and counters without you having to write the Javascript from scratch.
---
### Key Technical Hurdles to Watch For:
* **FontAwesome Icons:** Your code uses classes like `fa-sharp fa-solid fa-chevron-left`. For these to appear, you must install the FontAwesome kit in your site's `<head>`.
* **Asset Hosting:** In your snippet, the images are hosted on a WordPress site (`mergearchitects.com`). If you move to Squarespace, you should upload those images to Squarespace's Asset Library to avoid "hotlinking" issues or broken links if the old site goes down.
* **Z-Index:** Squarespace headers and footers can sometimes overlap custom code blocks. You’ll likely need a few lines of CSS to ensure your "fullscreen" or "modal" elements stay on top.**The Verdict:** If you love the UIkit aesthetic (which is very clean and popular for architects), I’d recommend using a **Code Block** and injecting the UIkit library. It's the only way to get that specific "Grid View" toggle inside the slideshow.
Does that help narrow down your strategy, or were you hoping to avoid using custom code?