CODEWITHSUNDEEP
csssquarespace
zkhoffmann
zkhoffmann

Reputation: 3

Targetting Individual Gallery Items - Squarespace Flatiron Template

I am currently using the Flatiron Template in Squarespace 6. Each image in the gallery currently displays the image, a title, and -view- under it. I am looking to change -view- to a different name (a city to be specific) that is unique to each gallery item.

The source code for one of the grid items is this:

<script>
    Y.use('squarespace-ui-base', function(Y) {
      Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
    });
  </script>

  <!-- Main Grid -->
  <div id="grid" data-collection-id="53ebab59e4b0c8271c405596">


    <div class="item">
      <a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3"   >
        <div class="wrapper">
          <div class="project-title">
            <h2>DIESEL POP-UP</h2>
            <h3>&mdash; view &mdash;</h3>
          </div>
        </div>

          <img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg"  data-load="false" />
          <noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>

      </a>
    </div>

I have tried using this in the custom CSS section (just to attempt at targeting one item) but it has only effected the page that the image links to, not the image itself.

.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
  background-color: red;

}

Is there a code that can target each individual element?

Upvotes: 0

Views: 2616

Answers (2)

user5216565
user5216565

Reputation: 11

Go to: Page > Settings > Advanced > Header injection (Index page)

Then paste the following:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $(".item:nth-child(1) h3").text("1st item");
    $(".item:nth-child(2) h3").text("2nd item");
    $(".item:nth-child(3) h3").text("3rd item");
    $(".item:nth-child(4) h3").text("4th item");
});
</script>

Cool. Now you can change the text in the quotations (1st, 2nd, 3rd, 4th item) to whatever text you want to replace 'view'. If you have more than 4 galleries in the index, you can copy a line and paste it below, but just make sure to increase the nth-child item from (4) to (5).

Hope that helps!

Upvotes: 1

Thesis
Thesis

Reputation: 296

Thanks for adding the additional data. Unfortunately you cannot do this. Changes in SquareSpace are global changes. You can make a cosmetic change to all galleries but you cannot target a specific gallery by ID. Squarespace object IDs are dynamic and session based. If you target a specific object ID in your CSS, once you refresh the page the ID will change and the CSS will no longer be valid.

However if there is a scenario where you have individual galleries on separate pages then you can work around the global change by inserting the CSS at the "page" level under settings and not a the site level that calls the object category (not the object ID).

Also changing the content of a label is not a css change. That is an HTML change. In Squarespace you cannot modify/hack the actual HTML in the templated versions.

Upvotes: 0

Related Questions