How can I make the portfolio grid display as the "alternating side by side blog"?

Hi!

I would like my portfolio to use the  "alternating side by side blog" appearance with the image on one side and the title of the project on the other. I could not find a way to do that. 

Can you please help me?

21 minutes ago, JLBali said:

Hi!

I would like my portfolio to use the  "alternating side by side blog" appearance with the image on one side and the title of the project on the other. I could not find a way to do that. 

Can you please help me?

Can you share your URL site so I can take a look?

You're welcome to start with this Custom CSS, it may not work perfectly:

.portfolio-grid-basic {
  grid-template-columns:1fr;
}
.portfolio-grid-basic .grid-item .grid-image {
  width:50%;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image {
  padding-bottom: 50%;
}
.portfolio-grid-basic .grid-item:nth-child(odd) {
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
}
.portfolio-grid-basic .grid-item:nth-child(even) {
  flex-direction: row-reverse;
  align-items:center;
  justify-content: space-between;
}

Let me know when you've added it, and how it looks, and we can try and adjust it.

Hi!

the url is https://www.justlistedbali.com/

I tried to insert this code in the design css field, but it is not showing the images... could you please help me again? thank you!

.portfolio-grid-basic {
  grid-template-columns:1fr;
}
.portfolio-grid-basic .grid-item .grid-image {
  width:50%;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image {
  padding-bottom: 50%;
}
.portfolio-grid-basic .grid-item:nth-child(odd) {
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
}
.portfolio-grid-basic .grid-item:nth-child(even) {
  flex-direction: row-reverse;
  align-items:center;
  justify-content: space-between;
}

What page are you trying to apply this to?

It is the portfolio page "Bali" - https://www.justlistedbali.com/bali

It doesn't look like you have thumbnail images for these, I see the code there correctly, but it contains no thumbnail image.

You are totally right somehow they were taken off when I inserted the code. Now you can see the images. I modified the proportions and now somehow it is not aligned anymore. I was wondering if you could help me make it more similar to the blog on the text side (aligned to the left and with the learn more button). I attach two screenshot

 Try this:

.portfolio-grid-basic {
  grid-template-columns: 1fr;
}
.portfolio-grid-basic .grid-item .grid-image {
  width: 50%;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image {
  padding-bottom: 50%;
}
.portfolio-grid-basic .grid-item:nth-child(odd) {
  flex-direction: row;
  align-items: center;
  margin-left: 6vw;
}
.portfolio-grid-basic .grid-item:nth-child(even) {
  flex-direction: row-reverse;
  align-items: center;
  margin-right: 6vw;
}

Give me a thumbs up if this was helpful! 

Not yet there, now the title is too near to the picture and it is too small, I also changed something in you code to adjust spacing. Let me know if it is correct!

.portfolio-grid-basic {
  grid-template-columns: 1fr;
}
.portfolio-grid-basic .grid-item .grid-image {
  width: 60%;
  margin-bottom:10vw;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image {
  padding-bottom: 50%;
}
.portfolio-grid-basic .grid-item:nth-child(odd) {
  flex-direction: row;
  align-items: center;
  margin-right: 6vw;
}
.portfolio-grid-basic .grid-item:nth-child(even) {
  flex-direction: row-reverse;
  align-items: center;
  margin-left: 6vw;
}

To change the position of the text next to the image, change the margin-right: 6vw; and margin-left: 6vw; to higher VW values, maybe start at 10vw and increase or decrease to suit your design.

No, unfortunately it does not wrok, it just moves the whole column left or right but does not modify the space between text and photo.

Try this:

.portfolio-grid-basic {
  grid-template-columns: 1fr;
}
.portfolio-grid-basic .grid-item .grid-image {
  width: 60%;
  margin-bottom:10vw;
}
.tweak-portfolio-grid-basic-image-aspect-ratio-11-square .portfolio-grid-basic .grid-image {
  padding-bottom: 50%;
}
.portfolio-grid-basic .grid-item:nth-child(odd) {
  flex-direction: row;
  align-items: center;
  margin-right: 4vw;
  .portfolio-text {
    margin-left:4vw;
  }
}
.portfolio-grid-basic .grid-item:nth-child(even) {
  flex-direction: row-reverse;
  align-items: center;
  margin-left: 4vw;
  .portfolio-text {
    margin-right:4vw;
  }
}

Perfect it works! Thank you SO much for your help!

Happy to help! Can you mark my post as the solution and give a thumbs up? Thanks!

@Ziggy, can you help me also, please! I tried to apply your code to my case, but failed. 

I want to display my blog posts pulled in the summary block with 'alternating side by side' design. 
Here, on the Home page, is my summary block, under 'Legutóbbi projektjeink': https://broccoli-kumquat-bs8a.squarespace.com/ (pass: atnif)

And I want to give it the same look as the blog page here: https://broccoli-kumquat-bs8a.squarespace.com/hu/projektek

Can you help me, please?

Thanks in advance

@antasz The code I provided was for a portfolio page not a summary block. It's probably possible to re-use the code for .sqs-block-summary-v2 .summary-item.

Yes, I understand the difference. I tried to modify it while looking at my summary block in the browser. 

Hi @Ziggy  is it possible to have the same layout but with 16:9 on the aspect ratio of the images, and the text to be under the image instead?

Thanks!

@miguelrato You can choose Portfolio Grid Simple with this CSS code

/* portfolio 16:9 */
.grid-image {
    padding-bottom: 56.25% !important;
}

Thanks for replying @tuanphan. What I'm looking for is something like this:

On 1/30/2024 at 9:43 PM, miguelrato said:

Thanks for replying @tuanphan. What I'm looking for is something like this:

Can you share link to page? We can check easier

Thanks @tuanphan.

Here's the site: http://bassoon-oval-dg9e.squarespace.com/
Pass: steelworks

On 2/1/2024 at 6:04 PM, miguelrato said:

Thanks @tuanphan.

Here's the site: http://bassoon-oval-dg9e.squarespace.com/
Pass: steelworks

Do this for Projects Page?

https://bassoon-oval-dg9e.squarespace.com/projects