Photograffix
Member-
Posts
13 -
Joined
-
Last visited
Personal Information
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Photograffix's Achievements
-
Wisam reacted to a post in a topic: Gallery Caption workarounds for 7.1?
-
In order to get the captions to show you need to add the JS code as per this comment https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?do=findComment&comment=333248 To change your CSS to match your site styling for the lightbox caption, you will need to add this to your custom CSS .gallery-item-description { font-family: orpheus-pro; font-weight: 400; font-style: normal; letter-spacing: 0em; text-transform: none; line-height: 1.6em; font-size: 14px; color: white; }
- 341 replies
-
Hi @Wisam - The URL you provided doesn't exist. Let us know which page you want us to check and which code you have injected.
- 341 replies
-
Photograffix reacted to a post in a topic: New Auto content blocks/lists equal height?
-
Photograffix reacted to a post in a topic: I want my images to shrink when they are displayed on a mobile phone
-
@Rah971 Can you share the site URL and password?
-
tuanphan reacted to a post in a topic: Gallery Caption workarounds for 7.1?
-
Cannot add a customized font for the life of me
Photograffix replied to amsperle's topic in Fonts, colors and images
-
Photograffix reacted to a post in a topic: Cannot add a customized font for the life of me
-
Cannot add a customized font for the life of me
Photograffix replied to amsperle's topic in Fonts, colors and images
Hi @amsperle I checked your site amsperle.com and inspected the code; the code you quoted in your post is missing. It so looks like it hasn't been injected - so check your Custom CSS and add the font-face code again and click "Save" The good news is that I tested your font-face code, and the URL for the font is working. Let me know if you get it working. -
Hi 👋 I have added a button to toggle the display of the captions for the masonry gallery using the following code. <script> $(function(){ $('#block-yui_3_17_2_1_1686230394275_3985 a').on('click', function(event){ event.preventDefault(); $('.gallery-caption').toggle(); if ($('#block-yui_3_17_2_1_1686230394275_3985 a').text() == 'Hide Captions') { $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Show Captions') } else { $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Hide Captions') } }) $('.gallery-caption').hide(); $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Show Captions'); }) </script> The toggle works, but I need to re-initialize the masonry grid to allow the captions to occupy space between the items. Does anyone know the code that will achieve this? It must be used in the Squarespace code already, as the masonry grid will re-initialise if you change the browser's width.
-
@tuanphan & @brandon, I developed a fix to add HTML tags to the gallery item description. In the description for the photo, I use spanClose, spanDes and spanID, which the JS below then replaces with </span>, <span class="comment-desc"> and <span class="comment-image-id"> For example, the following description text Makgadikgadi Meerkat spanDes A family of meerkats, Makgadikgadi Pans, Botswana. spanClose spanID Image ID: WBL-Makgadikgadi-Meerkats-140121045120 spanClose becomes Makgadikgadi Meerkat <span class="comment-desc"> A family of meerkats, Makgadikgadi Pans, Botswana. </span> <span class="comment-image-id"> Image ID: WBL-Makgadikgadi-Meerkats-140121045120 </span> You can then target the new classes with CSS., eg. .comment-desc{ display:block; //forces new line } Script to add to the footer <script> document.addEventListener("DOMContentLoaded", function() { var descriptions = document.getElementsByClassName("gallery-item-description"); for (var i = 0; i < descriptions.length; i++) { descriptions[i].innerHTML = descriptions[i].innerText.replace('spanDes', '<span class="comment-desc">').replaceAll('spanID', '<span class="comment-image-id">').replaceAll('spanClose', '<span>'); } }); </script>
- 341 replies
-
Photograffix started following brandon
-
@tuanphan @brandon I've got this working and displaying the captions 🙌 , but the JS code strips out any HTML tags in the description. I add HTML to the description for extra styling and paragraph spacing e.g. Makgadikgadi Meerkat <span class="comment-desc">A family of meerkats, Makgadikgadi Pans, Botswana.</span> <span class="comment-image-id">Image ID: WBL-Makgadikgadi-Meerkats-140121045120</span> I've looked at @brandon's JS, but I am unsure how to update it to maintain the HTML. Here is an example page: https://wildlife.photograffix.co.uk/birds?itemId=g0tle8zyd74qkwo7j8i03b4vqj71ud On this page, the caption should display as the attached image if the HTML tags remain in place. Can you offer any help, please? Thanks Marco
- 341 replies
-
Photograffix reacted to a post in a topic: disabling lightbox on mobile only (product page)
-
Photograffix reacted to a post in a topic: Masonry Grid to display one column on mobile only?
-
Photograffix reacted to a post in a topic: Different size Product (images)
-
Photograffix reacted to a post in a topic: Different size Product (images)