CarolynTara Posted January 30, 2021 Share Posted January 30, 2021 Site URL: https://www.carolyntaraoneil.com Is there any way to preserve the original size of an image when using as homepage banner? My site is https://www.carolyntaraoneil.com, and you can see that Squarespace keeps zooming in, ruining the image entirely by cropping the edges off. I'm in version 7.0, Sonny template (Brine family), and I don't seem to have the ability to edit css. Thank you. Link to comment
creedon Posted January 30, 2021 Share Posted January 30, 2021 If you want to continue to use the parallax feature I would say no. That feature is doing what it needs to create the effect and display as much of the image it can without cutting off to much of one dimension or the other ( h, w ). You could lose the effect and try with a regular image block at the top of the page. What happens when you go to Design > Custom CSS? Do you see something like the following? Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CarolynTara Posted January 30, 2021 Author Share Posted January 30, 2021 Thanks for the reply. When I go to that CSS page, the white box at the bottom (where you have your code) is blank. As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. I don't think this template has the ability to add an image block to the homepage. Link to comment
derricksrandomviews Posted January 30, 2021 Share Posted January 30, 2021 Creedon was asking about the panel, unless you have used code it will be blank at the bottom. And if you don't use a banner thumbnail image, you can move move that image to an image block. I have two sites using the same template family. Link to comment
CarolynTara Posted January 30, 2021 Author Share Posted January 30, 2021 Well, other than the (blank) white box, it looks exactly the same as Creedon's picture. Is there a way to solve this with css? You're right, I figured out how to add an image block, thanks for the tip. But that doesn't seem to work any better -- the fit is just as awkward as using the banner. Any other suggestions? Link to comment
creedon Posted January 30, 2021 Share Posted January 30, 2021 3 hours ago, CarolynTara said: As for parallax, I can disable it, but that doesn't change the appearance of the image at all -- it's still cropped. Both parallax and background images will be cropped. My question about the parallax was more if you were married to having that feature enabled for that page and that image. I think what you want can be achieved using an image block and some CSS. This first image is from your site. This second image is from my test site using an image block and CSS. You'll notice that the sides are not cropped. I'm only part way to seeing if a fully working effect can be achieved. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CarolynTara Posted January 30, 2021 Author Share Posted January 30, 2021 Yes, that is just what I'm trying to achieve! Neither the sides nor the bottom are cropped in your version. Howe did you get there? Thank you for working on this. Link to comment
creedon Posted January 30, 2021 Share Posted January 30, 2021 1 minute ago, CarolynTara said: Howe did you get there? As I said I'm not there yet but so far it is going pretty good. Dealing with mobile is next. The basic concept is to use an image block. Then manipulate it to be full bleed. Plus a number of other tweaks. I'll take a crack at the mobile tomorrow. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted January 30, 2021 Share Posted January 30, 2021 I would try this effect on a test index page first. Once your test index page set up on the first page of the index add an image block, upload your image, and select poster for design. Put your name in the title. Add a code block above the image block. Enter the following in the code block. <style> .Index-page:first-child .Index-page-content { padding-left : 0; padding-right : 0; } .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper { font-size : 9.875vw; } .Index-page:first-child .sqs-block-image .design-layout-poster .image-title p { color : #084d96; font-family : eds-market-main-script; letter-spacing : 0.1em; } @media screen and ( max-width : 480px) { .Index-page:first-child .sqs-block-image .design-layout-poster .image-title-wrapper { font-size : 15vw; } } </style> Click the APPLY button and SAVE the page. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
CarolynTara Posted January 31, 2021 Author Share Posted January 31, 2021 Thank you so much for helping! What I ended up doing is editing the image in photoshop to add a white rectangle at the top and bottom. Squarespace seemed to recognize this as part of the image (just adding a "border" in PS didn't work). So the portion of the image that's cut off at top and bottom is just the extra whitespace. It looks pretty much like what I was going for now. I appreciate all the help! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.