OpenSource.org | Replace columned layout with a gallery

[toncijajic]

OpenSource would like to replace the current column-based system of managing and adding sponsor logos on https://opensource.org/sponsors with something easier to manage.

We've suggested a gallery instead, making their life a bit easier.

I've added an initial exploration of the idea to this copy post, using a regular Gutenberg gallery block, and would like to add a few more features to make it more usable:

• Linking from an image to the sponsor's site (we can use a caption or description filed for this)
• Images not spreading over more than 1 column (added as a togglable option)
• Ideally, a "Sort Alphabetically" option in the Edit Gallery screen that uses the Image Title

Zendesk reference

[nickvidal]

Hi @toncijajic, looks good to me with your suggestions. Thanks!

[ecairol]

@toncijajic I'm posting a follow-up question here. Here's the whole conversation for better context:

ecairol commented 16 hours ago @toncijajic This is in a good spot now, the first two blocks, Innovator and Premiere, have been updated in the Test Page and now they use the new WP block: https://opensource.org/?page_id=6678 Please check it out and let me know all the feedback you might have.

toncijajic commented 1 hour ago Hey @ecairol, thanks for the update! Looking at it, both are currently in a single column; it this a bug? Re-reading my original task, this might be a confusing thing: Images not spreading over more than 1 column (added as a togglable option) What I meant by that is that it needs to look like option 2 from this screenshot.

Thanks for clarifying, I definitely misunderstood that part but this should be an easy fix with CSS.

My only question is, should the small logos still display next to each other in 3 columns, or should they always stack one on top of the other?

Still pending to add the toggle option but I'll do that today.

[toncijajic]

Hi @ecairol

My only question is, should the small logos still display next to each other in 3 columns, or should they always stack one on top of the other?

Not sure if I got the question correctly, but we should always show everything in a defined number of columns. Does that answer the question?

[ecairol]

It does, thanks @toncijajic

Yesterday I added this option to select the number of columns to display:

This is almost ready, I just want to add a few styles so the Editor matches what's rendered in the frontend.

You can see it here: https://opensource.org/wp-admin/post.php?post=6678&action=edit

Let me know if you have any feedback

[smaffulli]

i think we need a bit more options with the number of columns because we need to show different logo sizes for different sponsorship levels.

I also noticed that changing the number of columns doesn't affect the size of the logos...

This doesn't seem to go in the right direction... How about we simply use the default Gallery block? or other image galleries that already exist?

[toncijajic]

Hi @smaffulli, thanks for the input!

We generally prefer to wait to wrap up the development on the initial version before soliciting the partner's feedback to avoid spending our partner's time reviewing unfinished work, but I'm curious to hear more on a few items:

This doesn't seem to go in the right direction...

I'm curious what do you feel is going in the wrong direction?

How about we simply use the default Gallery block? or other image galleries that already exist?

That was the initial idea, but there are limitations to the default block (linking from the images, keeping images contained to a single column, and easy alphabetical sorting). If you are aware of an existing solution that covers all your needs, we'd be happy to test it.

i think we need a bit more options with the number of columns because we need to show different logo sizes for different sponsorship levels. I also noticed that changing the number of columns doesn't affect the size of the logos...

Great points - that's why we usually only share our work only when ready.

@ecairol and I already discussed this, and we'll add up to five columns and adjust the image size dynamically.

[smaffulli]

I thought this was ready for review, that's why I jumped in. My mistake. Keep going :)

[toncijajic]

@ecairol confirming the clone page looks and feels like https://opensource.org/sponsors currently does. I've informed OpenSource about this and suggested we move the Sponsors page to use your custom solution.

Additionally, we should explore changing the mobile breakpoint behavior from the current "break into a single column" behavior we copied from the Sponsors page into something more intuitive.

I was thinking about something like:

Reduce column/image width until you hit 75-80% original width, then rearrange the gallery to one column less. Rinse and repeat until 1 column.

This would make the steps look nicer.

[securityjedi]

Hi @ecairol,

Just tagging you here in case you missed Tonći's earlier comment. =)

[ecairol]

Sure thing! Thanks, @securityjedi.

I've informed OpenSource about this and suggested we move the Sponsors page to use your custom solution.

I'd like confirmation that we are indeed going with this solution live, along with the idea of re-arranging the gallery dynamically based on window width (not a current behavior on the existing site, so I was under the impression we needed confirmation)

[nickvidal]

It looks great to me, thank you! I'll double check with @smaffulli. He's travelling, but should get back to you soon.

[toncijajic]

Hi @ecairol, update:

I'd like confirmation that we are indeed going with this solution live, along with the idea of re-arranging the gallery dynamically based on window width (not a current behavior on the existing site, so I was under the impression we needed confirmation)

Yes, let's apply dynamic resizing (based on my comment quoted below or whatever feels natural):

• If it feels like an easy lift, let's plan to test that once done, and we'll then push it live.
• If you feel it will take a bit longer, let's push the current solution live and add the changes afterward (in this case, you can push it live without double confirmation from us to ensure speed).

I was thinking about something like:

Reduce column/image width until you hit 75-80% original width, then rearrange the gallery to one column less. Rinse and repeat until 1 column.

[ecairol]

This is all set on the test page. Next Monday I'll change the current slug of the test page to be /sponsors, and the current Sponsors page will be marked as Private and changed to /sponsors-old

[ecairol]

@toncijajic sorry for the delay last week. The page update is now in place.

[toncijajic]

@ecairol, this feels neat to use across viewpoint widths; thank you!

Closing this as complete. ✅