Align summary block items to bottom

Hi!

I wonder if anyone knows if it's possible to align summary block items to the bottom instead of the top as it seems to be the default. I don't see a native option for this. I'm attaching a screenshot.

Bests,

T

Is it possible to align items with different aspect ratios in a summary block to the bottom instead of the top which seems to be the default?

I should add that ideally I'd like to know if images and text can have different vertical alignments i.e. if the information about the image can be vertically aligned to a top and the images aligned to a bottom so that it looks cleaner (at least to my perception)

I don't think this is possible, but if you share link to page in screenshot, we can take a look

Hi tuanphan,

Thanks for your answer.

Here's mine (Obra). Scroll down to "Works in the exhibition":

https://gallery.obra.se/skies-came-to-visit

Ideally it would be nice with an alignment a bit cleaner like Stephen has it (not Squarespace though). Scroll down to "Selected Artworks" Images vertically aligned to the bottom, text aligned to the top:

https://www.stephenfriedman.com/artists/26-mamma-andersson/

This is another example that I believe works well, namely vertically centered images while text always aligned to it's neighbouring artwork:

https://www.gallerimagnuskarlsson.com/artists/31-richard-johansson/ 

All the best,

Tomás

Align like this?

tuanphan,

I tried it and it works perfect in that particular carousel but alters summary blocks in other pages that are displayed as "Wall"!  

Any thoughts?

Bests,

Tomás

On 1/10/2023 at 1:53 PM, tomasgf said:

tuanphan,

I tried it and it works perfect in that particular carousel but alters summary blocks in other pages that are displayed as "Wall"!  

Any thoughts?

Bests,

Tomás

 

Which way/code did you try?

On 1/13/2023 at 1:55 PM, tuanphan said:

Which way/code did you try?

Sorry I had not seen your question until now! 

We're still struggling with the alignment issue and this is still very important to us.

I used the code that is readable in the screenshot you posted above:

display: flex
align-items: flex-end;

The desired alignment can be seen in the example below, were the text for each image keeps its integrity and is always aligned in relation to it's neighbour, regardless the variable aspect ratio of the images. 

The images themselves are in turn also aligned to their middle creating a much cleaner layout.

My site (with unwanted alignment):

https://gallery.obra.se/alexander-skats

Example wit desired alignment:

https://www.gallerimagnuskarlsson.com/artists/31-richard-johansson/ 

My best,

Tomás

Which exact code did you add?  We can tweak it to run on specific summary

4 hours ago, tuanphan said:

Which exact code did you add?  We can tweak it to run on specific summary

I believe I actually found a way, by re-typing the code I was able to read on your screenshot above and targeting the specific block, which I understand is what you imply when you say "We can tweak it to run on specific summary".

That way other summary blocks that have the "wall" layout are not affected.

So, the grids with flex-end alignment look definitely cleaner, to my taste at least.

It's a bit time-consuming to have to target every block but in the end is worth it. The function should be of course native. Funny that it's not, isn't it? 

This is the exact code I used:

https://gallery.obra.se/alexander-skats

#block-642ebc4004d00e6ca9727cf2{
.summary-thumbnail-container  {     
  height: 406px !important; 
  display: flex;
  align-items: flex-end;
  align-content: flex-start; 
}}

So, I believe it works kind of ok right now, thanks to you Tuan, still curious about that 406px height!

In any case: It would be interesting to also achieve centred aligned thumbnails while having the text content aligned to its neighbours.

This aesthetic comes from exhibiting fine art in real life, therefore the interest in reproducing that same feeling of order for the artworks on view.

Other examples where in which I targeted specific summaries with above mentioned code:

https://gallery.obra.se/finn-anton 

https://gallery.obra.se/the-weather

 All the best,

Tomás