Steve48

Thank you for responding

I would like users (not admins) to be able to upload images to a gallery or slideshow.  Is this possible?

Then if a user clicked on an image it would link to a page  that had a copy of the same image but users would be able to add comments to this page. Is this feasible. I am trying to mimic meetup functionality for a photography group of which I am a member.

I want a script for pages that have slideshow galleries. the site is https://www.theartofphotographyus.net/

A typical gallery page is https://www.theartofphotographyus.net/galleries/transcendental

If a page has a gallery there will be only one on  the page..

Any gallery image, but usually the first or the last may have an asterisk in the caption.

On load, or when an image is selected, if the caption has an "*" I want a footer block to display, otherwise not.

After about ten iterations with chat gpt I arrived at the script  (placed in the footer) below. Unfortunately, it didn't work. The footer is displayed for images without captions.

I have a different script that disables the block if a page doesn't have a gallery. Please advise. Thank you

<script>
//Get the block element by its ID 
  var block = document.getElementById("block-yui_3_17_2_1_1691321700096_2268");

// Hide the block by default 
  block.style.display = "none";

// Get the slideshow element on the page 
  var slideshow = document.querySelector(".gallery-slideshow");

// Define the checkCaption function 
  function checkCaption() { // Get all the images in the slideshow 
    var images = slideshow.querySelectorAll(".slide img");

// Loop through each image
for (var i = 0; i < images.length; i++) {
  // Get the current image
  var image = images[i];

  // Get the caption of the current image 
  var caption = image.nextElementSibling;

  // Check if the caption contains an asterisk 
  if (caption.textContent.includes("*")) { 
    // Show the block if it does 
    block.style.display = "block"; 
    // Break out of the loop
    break;
  } else { 
    // Hide the block if it doesn’t 
    block.style.display = "none"; 
  } 
}


}

// Add a click event listener to the slideshow 
  slideshow.addEventListener("click", function() { 
    // Get the active image in the slideshow 
    var image = this.querySelector(".slide.active img");

// Get the caption of the active image 
var caption = image.nextElementSibling;

// Check if the caption contains an asterisk 
if (caption.textContent.includes("*")) { 
  // Show the block if it does 
  block.style.display = "block"; 
} else { 
  // Hide the block if it doesn’t 
  block.style.display = "none"; 
}


});

// Add a load event listener to the window object that checks if the current page has a slideshow or not, and calls the checkCaption function or hides the block accordingly

window.addEventListener("load", function() {
  // Check if the current page has a slideshow or not

if (document.querySelector(".gallery-slideshow")) {

// If it does, call the checkCaption function 
checkCaption(); 

} else { // If it doesn’t, hide the block 
  block.style.display = "none"; }

});
</script>

I got this with the help of Chat GPT3. It worked after a few tweaks

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var galleryContentWrapper = document.querySelector('.gallery-caption-wrapper');
    var blockId = '#block-yui_3_17_2_1_1691321700096_2268'; // Replace 'xxx' with the actual identifier of the block

    if (galleryContentWrapper) {
      var footerBlock = document.querySelector(blockId);
      if (footerBlock) {
        footerBlock.style.display = 'block'; // Show the block in the footer
      }
    } else {
      // If the gallery-content-wrapper element is not present, you can hide the block or handle it as needed
      // For example, to hide the block:
      var footerBlock = document.querySelector(blockId);
      if (footerBlock) {
        footerBlock.style.display = 'none';
      }
    }
  });
</script>

I have a code block in the footer #block-yui_3_17_2_1_1691321700096_2268

This is the code block:

<div style="text-align: center;">
  <span class="asterisk">*</span>
  <span class="video-text">Click on image to see a short video</span>
</div>

I only want to display this on pages that have galleries. When I examine  the gallery pages one tag that could be used to identify them is gallery-content-wrapper

I think this would require javascript code injection. Can someone suggest a script that would do this? Thank you.

I have same question

Small text is vertically aligned in edit mode but not when published. I simultaneously selected all 3 small text boxes and vertically aligned them. In the middle text box I made sure to check the align to top arrow. I've tried re[lacing the text boxes. Not sure what to do next. TIA