TashaDobie Posted February 25, 2021 Share Posted February 25, 2021 Hey Guys, I'm looking for a way to best present my portfolio websites by adding a scrolling image block. See example attached. Does anyone know how to do this? Thanks, Tasha Screen Recording 2021-02-25 at 15.01.14.mov Link to comment
tuanphan Posted March 1, 2021 Share Posted March 1, 2021 Hi. Can you upload it to Youtube/Video then share url again? TashaDobie 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TashaDobie Posted July 20, 2021 Author Share Posted July 20, 2021 Sorry it's taken so long - but here is the video link - Link to comment
tuanphan Posted July 21, 2021 Share Posted July 21, 2021 16 hours ago, TashaDobie said: Sorry it's taken so long - but here is the video link - You will use this on standard page or product page? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TashaDobie Posted July 21, 2021 Author Share Posted July 21, 2021 (edited) @tuanphanOn a standard page Edited July 21, 2021 by TashaDobie Link to comment
iamdavehart Posted August 14, 2021 Share Posted August 14, 2021 sure, you can do this. the key is to control the image container's height and then set its overflow to auto. first way, upload an image to somewhere on your site and get the url for it. (maybe have an unlisted or disabled gallery page). now add a code block and put the following code in. this is for 900px high, but edit as you see fit. <div style="width:100%;height:900px;overflow:auto;"> <img src="https://your-very-tall-image-url-here" width="100%" /> </div> This is probably quite a good way if your image isn't hosted on squarespace, or you want a lot of control over the embedding because you can put whatever you want in it. second way is to put an inline image in as you normally would, then find out the block id for that image. You can do this easily with the Squarespace Id Finder chrome extension, otherwise you need to find the block id in the page source. add the following css (either to your custom css in the design section, or wrap it in <style> blocks and put it in a code block on the page). #block-yui_3_17_2_1_1628966659965_3735 { height:400px; overflow-y:auto; overflow-x:hidden; padding:0; } put your own block id in obviously. change the height to whatever you want. This way is neat because the upload of the image is easier, as its right in the page. got to find the block id though. You might want to think about whether this is a good interaction on mobile though. might end up with double scrollbars. if that's the case then wrap whatever css you put in inside a media query so it only happens on wider screens @media screen and (min-size:768px) { #block-yui_3_17_2_1_1628966659965_3735 { height:400px; overflow-y:auto; overflow-x:hidden; padding:0; } } here's an example: ilseS, TashaDobie, BriannaTBP and 1 other 1 2 1 Dave Hart. Software/Technology Consultant living in London Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment