Multiple Basic Grid Blogs with Different Aspect Ratios?

Hi everyone,

I'm just wondering if it's possible to have multiple basic grid blogs with different aspect ratios in 7.1? The default is, if Blog 1 is set to 3:2, then Blog 2 and Blog 3 will also have a 3:2 ratio. However, for example I want Blog 1 to be 3:2, Blog 2 to be 3:4 vertical and Blog 3 to be 16:9. Is it possible? Is there any coding I can inject into individual blog headers to alter the aspect ratio crop?

Thanks!

Can you share link to all blog pages? We can check easier.

On 10/10/2020 at 8:32 PM, tuanphan said:

Can you share link to all blog pages? We can check easier.

Here is Blog 1; https://thedesignemotive.com/homes

And Blog 2; https://thedesignemotive.com/stories

From my quick testing Blog 3 16:9 shouldn't be a problem. The problem comes in, as you may have guessed, when you have multiple blogs using the same Layout. In the case of your first two blogs which are using Basic Grid Blog Layout. If you make a change for that Layout it translates to all blogs using that Layout.

Now I haven't tested the following deeply so we are experimenting and there are caveats.

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Page Settings > Advanced > Page Header Code Injection for blog 2 (The Design Emotive < /stories >).

<script>

  $( ( ) => {
  
    /*
    
      change The Design Emotive < /stories > from 2:3 Standard (Vertical) to
      3:4 Three-Four (Vertical)
      
      */
      
    $( 'body' )
    
      .addClass ( 'tweak-blog-basic-grid-image-aspect-ratio-34-three-four-vertical' )
      
      .removeClass ( 'tweak-blog-basic-grid-image-aspect-ratio-23-standard-vertical' );
      
    } );
    
  </script>

This is for a v7.1 site.

Now here is a big caveat. When you apply this code Preview mode doesn't know and will still show you as using the 2:3 Standard (Vertical) Aspect Ratio. So this is something you have to remember. I also did no testing for any of the other settings related to the Basic Grid Blog Layout. Things like padding and such. If you need those customized then we'd need to dig some more.

Let us know how it goes.

I amj ust running into this issue. I have a podcast for which the cover art is 1:1 and I am launching a YouTube channel for which the thumbnails are 16:9. It is incredibly mind boggling to me that I cannot set these two blogs to have Basic Grid layouts with different thumbnail sizes.

Why are blog settings like this global when everything else in 7.1 has been converted to much more granular settings?

On 1/5/2021 at 2:38 AM, kevinpatrickrobbins said:

I amj ust running into this issue. I have a podcast for which the cover art is 1:1 and I am launching a YouTube channel for which the thumbnails are 16:9. It is incredibly mind boggling to me that I cannot set these two blogs to have Basic Grid layouts with different thumbnail sizes.

Why are blog settings like this global when everything else in 7.1 has been converted to much more granular settings?

Did you solve?

Hi, 

I'm also having this issue - I just created a new blog page, but if I select a different formats - I have a basic grid on my live page but want masonry on my other one.

Has anyone cracked this?

On 1/11/2021 at 5:05 PM, Livia_Sole said:

Hi, 

I'm also having this issue - I just created a new blog page, but if I select a different formats - I have a basic grid on my live page but want masonry on my other one.

Has anyone cracked this?

You can choose masonry first, then share page where you want grid, we can give code to change masonry to grid.

19 hours ago, tuanphan said:

You can choose masonry first, then share page where you want grid, we can give code to change masonry to grid.

Yes thanks,

I need the code for Masonry. My current blog page has a grid layaout but i'd like the new one to have a Masonry layout. The website it periodictableofveg.com and the blog page I need to edit is "Veg People" - but it's currently private. Let me know if you need anything else!

Thanks so much

@Livia_Sole

I think @tuanphan is suggesting that you need to select Masonry for your blog formats and then with some CSS other blogs can be turned into grid format.

I don't know if it works the other way around.

Please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Yes. I think Masonry >> Grid will be easier.

Grid >> Masonry, I think it is very difficult ☹️

On 1/14/2021 at 12:56 AM, creedon said:

@Livia_Sole

I think @tuanphan is suggesting that you need to select Masonry for your blog formats and then with some CSS other blogs can be turned into grid format.

I don't know if it works the other way around.

Please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

My site is already live and a have visitors, so I can't just put it on private and password protect it. Is there another way?

On 1/14/2021 at 3:02 AM, tuanphan said:

Yes. I think Masonry >> Grid will be easier.

Grid >> Masonry, I think it is very difficult ☹️

The basic grid blog is live and has 90+ pages linked to it - its essential there remain in the grid format for design reasons. It's a 4 column blog. 

Can I go from grid 4 column blog and create a grid 2 column blog without messing up the original 4 column? I would have different metadata display as well.

Let me know if this is possible!

Thanks so much

17 hours ago, Livia_Sole said:

My site is already live and a have visitors, so I can't just put it on private and password protect it. Is there another way?

You can duplicate site & share its url. We can check there. If we can give the code, then you can do on main site.

17 hours ago, Livia_Sole said:

The basic grid blog is live and has 90+ pages linked to it - its essential there remain in the grid format for design reasons. It's a 4 column blog. 

Can I go from grid 4 column blog and create a grid 2 column blog without messing up the original 4 column? I would have different metadata display as well.

Let me know if this is possible!

Thanks so much

Yes. You can create an another page

16 hours ago, tuanphan said:

You can duplicate site & share its url. We can check there. If we can give the code, then you can do on main site.

Hi @tuanphan

Ok, duplicate website URL is here. Pass: PTOVadmin1

The homepage is the current 4 column grid blog. 

The "Veg People" is the blog I would like to make a 2 column grid blog (instead of a 4 column like the home page) with different metadata and information displayed.

Can you access it?

Thanks!!

On 1/17/2021 at 5:55 AM, Livia_Sole said:

My site is already live and a have visitors, so I can't just put it on private and password protect it. Is there another way?

If your site is live then there is no need for a site-wide password. I assume at the time I wrote my post with that request your site was private and I was asking for you to give us helpers a way to help you.

On 1/18/2021 at 11:48 PM, Livia_Sole said:

Hi @tuanphan

Ok, duplicate website URL is here. Pass: PTOVadmin1

The homepage is the current 4 column grid blog. 

The "Veg People" is the blog I would like to make a 2 column grid blog (instead of a 4 column like the home page) with different metadata and information displayed.

Can you access it?

Thanks!!

 

Hi @tuanphan can you still help? Thanks so much!

Sorry. I'm overloaded. I will check again in the next week.

Hello everyone. I found this annoying too. seems frustrating that the basic grid style is site wide. Is there a feature request logged with Squarespace?

Following up the idea in this thread, I looked at the code and you can convert the standard masonry blog layout to a fixed grid using Custom CSS only. no script required, so good for us plebs not on the pro version.

Go To Design > Custom CSS. Add the following in. this will override the Masonry layout (desktop view only) and fix it to a grid.

@media screen and (min-width: 768px) {
  
  div#BlogMasonryContainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-auto-rows: min-content;
    column-gap: 19px;
    row-gap: 23px;
    height:auto !important;
  }

  div#BlogMasonryContainer article {
    transform: none !important;
    position: relative !important;
    width:auto !important;
  }

}

What this does is (for desktop only) override squarespace's manual setting of the individual articles heights and widths. 

The majority of the properties you edit will work just fine, but you will need to define the grid size yourself.

• grid-template-rows: replace the 3 with the number of columns you want.
• column-gap is what squarespace label as horizontal spacing
• row-gap is vertical-spacing

I haven't tested it completely, just rattled it off tonight when I found this thread because I'm only just trying out 7.1 on a test, so if you find any little bugs I'm sure we can edit the script accordingly.

Obviously, this is a hack and will affect all masonry-layout blogs, but it will give you one extra style to play with.

Hope this helps someone. Let me know if it works for you guys

Here's another alternative which allows you to make some style changes to individual blogs. this means that you can use multiple basic blog styles and override individual settings.

• Create your blog page
• Edit the blog page and insert a blank section at the end or the beginning and set its size to the smallest possible
• insert a Code block (this works on non-pro subscriptions as its just CSS)
• make sure the language is set to HTML
• make sure the display source check box is cleared
• put the code below in to override the grid styles. same as my other answer, change the repeat value and the row-gap.

<style>
@media screen and (min-width: 768px) {
  .blog-basic-grid {
    grid-template-columns: repeat(4, minmax(0px,1fr)) !important;
    row-gap: 20px !important;
    column-gap: 20px !important;
  }
}

.tweak-blog-basic-grid-image-aspect-ratio-32-standard .blog-basic-grid .image-wrapper {
    padding-bottom: 50%;
}
</style>

this will allow you to have one basic blog setup as a 3 column layout and one as a four column layout.

I'm not sure if we can override the aspect ratios, I assume its possible but squarespace do a lot of absolute width and height calculations so not always easy to override. I'll have a look now and edit this if the aspect ratios  of the pictures can be changed as per the OPs original request

EDIT: overriding aspects of thumbnails is a little tougher, but can be done, but the image focal point positioning is set quite manually by squarespace's code so it will be a little off if you start playing with the image wrappers size. 

To change the size you need to override the tweak class for the default aspect ratio you've picked. so, if your "standard" layout is set to 3:2, you can override the class that has 32 in it to change it to a different percentage. e.g. 50% would be 2:1

It's not perfect, but might get you somewhere

There is a workaround for this.  Say you have two blog pages, one you want grid and the other masonry, or just different aspect ratios. Put both blogs in the unlinked section of your site. Create two new blank pages, one for blog 1 and the other for blog 2, and put a summary block on each page, depending on the number of posts you may need more than one block on a page. . You can set each summary block page to pull from the blog you want, page 1 for blog 1, page 2 for blog 2. You can then set the summary blocks on one page for any layout you want without effecting the blocks on the other page. You can even have one block on the page layed out different from the other blocks on the same page.  This will not require any code. 

Hi Derrick, thanks for that. yes, it's certainly a workaround that will help some people.

However that approach loses some core blog-like features like pagination if you've got 20+ articles for example, so was just trying to offer offering a solution in line with what the OP asked for.

Good to have multiple options to work around the problem!

True summary blocks have no paginaton, however you can have 30 posts in one summary  block and string blocks together on the same page as many as you want. So I have one super scrolling blog post page so to speak with 70 posts and I filtered out seven posts from my actual blog page and they have a page of their own and do not appear on the other summary page. This may not be what you want but the option is there. 

my random views

It really would be helpful if Squarespace would allow individual formatting for each blog, rather than making everything universal. Or at least if you could select individual formatting over universal. I use one blog page for our events (as it provides way more flexibility as an event calendar, then the event pages), but I don't want to see author on my blog of event listings. Then I have a blog of articles and I want the author, author bio etc. But I would like both blogs to be formatted as 1:1 grid style. Is there any way to take masonry and have it align like grid?