Photograffix
-
Posts
13 -
Joined
-
Last visited
Reputation Activity
-
Photograffix got a reaction from Wisam in 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; }
-
Photograffix reacted to christyprice in New Auto content blocks/lists equal height?
Just wanted to update this post - Squarespace rolled out an update and you no longer need a code solution here. In the auto layout (list) section, just go to Edit Content > Design > Size & Space. Scroll to the bottom and there is now the option to make each item the same height under Position:
-
Photograffix reacted to paul2009 in I want my images to shrink when they are displayed on a mobile phone
It is likely to be cropped for mobile devices, so you'll probably want to add some custom CSS to fix the height so the entire word is visible. If you'd like help with this, please post a working link (a “URL”) to the site. This will allow us to see the issue and test solutions. If you are unsure how to do this, my advice in How to Post a Forum Question provides some detail.
Did this help? Please give feedback by clicking an icon below ⬇️
-
Photograffix got a reaction from tuanphan in Gallery Caption workarounds for 7.1?
@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>
-
Photograffix reacted to JayVanDyke in Cannot add a customized font for the life of me
is this not it?
-
Photograffix reacted to tuanphan in disabling lightbox on mobile only (product page)
Add to Design > Custom CSS
/* Disable lightbox mobile */ @media screen and (max-width:991px) { .ProductItem-gallery-slides { pointer-events: none; } }
-
Photograffix reacted to tuanphan in Masonry Grid to display one column on mobile only?
Hi. Add to Design > Custom CSS
/* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 0 !important; padding-right: 0 !important; } }
-
Photograffix reacted to ThisJustin in Different size Product (images)
Hi, I think I found a better solution:
.ProductItem-gallery-slides-item-image { object-fit:contain!important; } It's insane to me that Squarespace doesn't just have an "Original Aspect Ratio" option for product details pages. Kind of a dealbreaker for photographers.
-
Photograffix reacted to JessBailey in Different size Product (images)
Hi @tuanphan - just thought I would post my question here too, as I wasn't sure you would see it on the other thread... This thread really seems to be exactly what I am searching for.. If you could help that would be amazing. Here is my original question:
I sell stock photos and art that are both vertical and horizontal and it would be amazing if the products in Squarespace could show either orientation depending on the product itself!
I have emailed support about this, as now that I am thinking of it, it seems rather silly - given they have themes for artists and photographers! And I image this would suit a lot of other people....
My site is www.jessbailey.com.au and the stock photos on this page are both vertical and horizontal, but they all get cropped to one style only for the shop view and the product view... https://www.jessbailey.com.au/stock-photos
-
Photograffix reacted to Comfort in image height in masonry grid
Artists & designers want to be in creative control over how their work is presented. Some of these (in my eyes) very obvious and basic principles have yet to be implemented by Squarespace for 7.1.
Anyways, the image blocks are full bleed. For a moment I was hopeful it's possible to add the original image as a background and use a transparent png in front of it to keep a height, but the background looks cropped. DIdn't spend much time on it so you could try yourself.
-
Photograffix reacted to Badlandswolves in make portfolio page grid layout masonry ?
Hi, Is there a way to make the portfolio main grid Masonry?
Standard options only allow fixed ratio's. since ther is no more option to connect galleries to summary blocks
this would fix a lot. Thank you.