Jump to content

Bio page using summary block - 7.0

Recommended Posts

Site URL: https://www.nativeland.org/circle-of-kin

I am trying to create a mobile-friendly team bio page in which all photos are displayed in a grid without titles but not detailed bio text, and where users can select bio images to view all the individual bio text.

Here's the page: https://www.nativeland.org/circle-of-kin

I'm using Bryant and 7.0, with a Gallery Page that has been inserted on this page using a Summary Block.

Currently, on a desktop browser you can click on the photo and on hover get the text overlaid on the photos. That's fine, though I'd prefer the text not be overlaid over the photo. On tablet or mobile, however, there is only a tiny dot in the bottom right corner you can select to reveal the hover text, and it's so small most users won't ever find it and rather see a huge photo gallery.

Also, when you are on the bio page if you select the title you go into the gallery page, which I don't want.

Ideally, selecting the image and the title would go to the same place: a lightbox-type environment in which the photo appears larger and centered but not full-screen (as is currently the case), and where the text automatically appears below no matter what, with or without hover.

Any suggestions would be much appreciated. Thanks!

Link to comment
  • Replies 9
  • Views 1.1k
  • Created
  • Last Reply
  • 2 weeks later...
On 5/11/2021 at 4:07 AM, yo-mate-yo said:

Hey there, thank you for your response.  Unfortunately, this doesn’t seem to work on my site... nothing seems to change. Any idea why or what I might do to tweak the code?

Thanks!

Try this code

/* Always show hover text */
@media screen and (max-width:900px) {
.sqs-lightbox-meta.overlay-description-visible {
    bottom: 0 !important;
	opacity: 1 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

✦✦
Co-founder Hundred Studio 👋

Link to comment
20 hours ago, CraigN said:

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

You need to use JavaScript to achieve this. Can you share link to gallery? Which plan do/will you use?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/15/2021 at 12:35 AM, CraigN said:

Yeah no problem @tuanphan,
https://sphere-saxophone-dbsb.squarespace.com/world-development-people-not-projects
Pass: mci21hs

It'll be on a commerce plan most likely. We've already been using some custom plugins etc.

Thanks!

Add to Last line in Code Injection Footer

<script>
  var _0x2a7e=['append','ready','1RJrltI','3319ovhlOz','1KneMVr','854613oQgxUQ','1006471LEvZsj','4127469CFajRU','each','1068209VWSbJg','1oyihNW','<div\x20class=\x22lightbox-caption\x22>','.gallery-lightbox-list\x20.gallery-lightbox-item','img','find','207671zQUYko','995077PvzlQc','alt','</div>','287GdCQAi'];function _0x2dfe(_0x55be93,_0x3377c6){_0x55be93=_0x55be93-0x1eb;var _0x2a7eec=_0x2a7e[_0x55be93];return _0x2a7eec;}var _0x18b263=_0x2dfe;(function(_0x47cc5d,_0x525c24){var _0x2c6413=_0x2dfe;while(!![]){try{var _0x580ae7=parseInt(_0x2c6413(0x1f7))*parseInt(_0x2c6413(0x1fa))+-parseInt(_0x2c6413(0x1fb))*-parseInt(_0x2c6413(0x1eb))+-parseInt(_0x2c6413(0x1f0))+parseInt(_0x2c6413(0x1f1))+parseInt(_0x2c6413(0x1f9))*parseInt(_0x2c6413(0x1fe))+parseInt(_0x2c6413(0x1f4))*parseInt(_0x2c6413(0x1f8))+-parseInt(_0x2c6413(0x1fc));if(_0x580ae7===_0x525c24)break;else _0x47cc5d['push'](_0x47cc5d['shift']());}catch(_0x363f60){_0x47cc5d['push'](_0x47cc5d['shift']());}}}(_0x2a7e,0x84457),jQuery(document)[_0x18b263(0x1f6)](function(_0x491546){var _0xdc40ac=_0x18b263;_0x491546(_0xdc40ac(0x1ed))[_0xdc40ac(0x1fd)](function(){var _0x29e934=_0xdc40ac,_0x3770c7=_0x491546(this)[_0x29e934(0x1ef)](_0x29e934(0x1ee))['attr'](_0x29e934(0x1f2));console['log'](_0x3770c7),_0x491546(this)[_0x29e934(0x1f5)](_0x29e934(0x1ec)+_0x3770c7+_0x29e934(0x1f3));});}));
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/13/2021 at 9:40 PM, CraigN said:

I'd also like to create something similar but on 7.1.

The above doesn't seem to work.

I created a gallery section with images and descriptions, so on selecting an image and viewing it in lightbox it would be great to show the description. Either with the ability to style the lightbox or simply to display the description on hover.

Thanks!

Here a working snippet with css and js 

<style>
.gallery-lightbox-item-src {
  overflow: visible;
}
.gallery-lightbox-item-src .lightbox-caption {
  bottom: 0;
}
 .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
   background: #fffafa;
   padding: 10px;
}
<style>
<script>
 $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});  
</script>

image.thumb.png.dbd11d4e6e8fec82da5f6e34f9e81d4f.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Thank you @tuanphan and @bangank36, both of these work!

However, I've found @bangank36 your solution allows me to style the caption better, yet I'm struggling to get it to work right on mobile. 

Ideally if I could specify height and enable scroll to make the best use of space when the lightbox is used?

I've been trying this:
 

@media screen and (max-width: 799px) {
  .lightbox-caption {
    width: 85% !important;
    height: 90px !important;
    overflow: scroll !important;
  }
}

Though doesn't seem to work, no scroll. And does not show up on iPhone safari mobile?

✦✦
Co-founder Hundred Studio 👋

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.