GrahamG

On 7/4/2023 at 4:52 AM, tuanphan said:

If target desktop only, use this code

<style>
  .header-display-desktop img {
  	content: url(https://static1.squarespace.com/static/5fd925449f6d8f67d97815cb/t/6043b664c343a45fe3d1e965/1615050340420/Graham-Green-white-cropped-150.png);
  }
</style>

 

Perfect! Thank you so much!

4 hours ago, tuanphan said:

Actually you can replace that code with this to change to new logo. The code will apply for both desktop + mobile

<style>
  header#header img {
  	content: url(https://static1.squarespace.com/static/5fd925449f6d8f67d97815cb/t/6043b664c343a45fe3d1e965/1615050340420/Graham-Green-white-cropped-150.png);
  }
</style>

 

This works great, unfortunately, I have a mobile-specific logo so it breaks mobile. I could have sworn that was not the case with the original code, but looking at it now, I could be wrong.

With an image in the background, I need the logo on my homepage to be white, I had added some custom code to achieve this but it no longer works. Not sure what happened, perhaps an update from Squarespace.
This is the code I currently have:
 

<script>
 window.onload = function() {
   document.querySelectorAll('.header-title-logo img')[0].src = 'https://static1.squarespace.com/static/5fd925449f6d8f67d97815cb/t/6043b664c343a45fe3d1e965/1615050340420/Graham-Green-white-cropped-150.png';
 };
</script>

Hoping someone can point me in the right direction to resolve this issue.

I didn't, I removed the item from the homepage because it looked so bad.

Site URL: https://grahamgreenphotography.com/

When I try adding a product to my homepage I get a massive image which takes up the entire page. It looks terrible (as you can see from the attached screenshot), I can't imagine anyone wanting an image of that size. I've not been able to find a way to control the size of the image, the only control available is to turn image display on/off.

Can anyone suggest a workaround/solution for this?

Thanks in advance

On 10/14/2021 at 3:14 AM, tuanphan said:

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: black;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

 

This works for me, how do I make the navigation arrows white, the black ones are hard to see in my use case.

On 1/28/2021 at 9:38 PM, derricksrandomviews said:

 

I think that the conception is that squarespace works like one big hard drive and stores images in a standard fashion like many website hosting companies or like you would for yourself on your own device. That is not the way it works. Let me paraphrase how they do it.

When you upload an image, Squarespace stores multiple sizes. Each size version is assigned a specific static URL so browsers can reload the images more quickly each time someone revisits a page. This helps your site’s performance globally, improves page loading times, and helps your ranking in Google, which uses page speed as a factor in search results. 

If you right-click an image or other file and open it in a new tab, you'll see its URL in your browser's address bar. These URLs start with images.squarespace-cdn.com, static.squarespace.com, or static1.squarespace.com followed by a string of random characters and the format. For example, the 1000 pixels-wide version of your image will have format=1000w at the end. The format changes based on the size of the browser viewing your site. File URLs can't be customized. 

That is all achievable with the addition of file management, with a hybrid of "traditional" file management and the current method of handling files. It adds complexity in terms of the systems that manage the files, but really only when a file is modified. A process would need to watch for modification of the source file, which would the kick off the same systems that currently does the image resizing when an image is uploaded.