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