Adding a camera icon to Image blocks to show photo credits

Use this snappy code to add a camera icon to images on your site where you want to add an image or photo credit. As a user hovers over the icon, the credit will appear.

---

Add to Custom CSS

Copy this code and paste into Custom CSS. This can be found in Website Tools > Custom CSS

/* General styling for the camera icon */
.custom-camera-icon {
  width: 18px; /* Adjust this size if needed */
  height: 18px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  background-image: url(https://static1.squarespace.com/static/668ed89f40f0871a9f1bbfbc/t/66fbb00660759f238f2a5d58/1727770630863/photo-camera.png); /* Replace with your custom camera image URL */
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
}

/* Tooltip styling */
.photo-credit-tooltip {
  display: none;
  position: absolute;
  bottom: 50px;
  right: 0; /* Align tooltip with the icon */
  background: #000;
  color: #fff;
  padding: 8px;
  border-radius: 5px;
  font-size: 12px;
  z-index: 20;
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words if needed */
  max-width: 200px; /* Set a maximum width for the tooltip */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

/* Tooltip appears when hovering over the custom camera icon */
.custom-camera-icon:hover + .photo-credit-tooltip {
  display: block;
}

/* Prevent tooltip from going off screen */
.photo-credit-tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px; /* Create a small arrow pointing down */
  border-color: #000 transparent transparent transparent;
  top: 100%; /* Position the arrow just below the tooltip */
  right: 10px;
}

/* Adjust tooltip when near the screen edges */
@media (max-width: 768px) {
  .photo-credit-tooltip {
    right: auto;
    left: 10px; /* Push the tooltip inward for smaller screens */
    max-width: 90%; /* Ensure tooltip doesn’t exceed the viewport width */
  }
}

---

Add to Code Injection Footer

<!-- Camera icon for photo credits -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Select all image blocks that contain images with alt text
  document.querySelectorAll('.image-block img[alt]').forEach(function(imgElement) {
    // Find the closest image block container
    const imageBlock = imgElement.closest('.image-block');

    // Check if the image has alt text
    if (imgElement.alt && imgElement.alt.trim() !== "") {
      // Remove any existing custom camera icons
      const existingIcons = imageBlock.querySelectorAll('.custom-camera-icon');
      existingIcons.forEach(icon => icon.remove());

      // Create a unique camera icon element
      const cameraIcon = document.createElement('div');
      cameraIcon.classList.add('custom-camera-icon');

      // Create a tooltip element for the photo credit
      const tooltip = document.createElement('div');
      tooltip.classList.add('photo-credit-tooltip');
      tooltip.innerText = imgElement.alt;

      // Append the camera icon and tooltip to the image block
      imageBlock.appendChild(cameraIcon);
      imageBlock.appendChild(tooltip);
    }
  });
});
</script>

---

Add photo credit text

Within the image block settings add your photo credit in the ‘Image alt text’ field.