CMS Development

ckingg
Participant

Continuous image uploading in predefined layout

SOLVE

Hi there, I'd like to create (or use if it already exists)  a module that allows continuous image uploading within a defined space.

Basically, we have a partners page and are creating custom icons that are the logos for each partner to keep the design consistent. Something like my attached image for reference.

I want to use or create a module that will allow me to upload these icons/images into the same area while keeping the layout consistent. So when new partners are added, the team can just use the module to upload the new icon and have it appear in place after the last icon without having to worry about styling or anything else.

image.png

 

Any ideas how I can achieve this?

0 Upvotes
1 Accepted solution
Ntbrown
Solution
Contributor

Continuous image uploading in predefined layout

SOLVE

Use a grid system (float, flex, grid whatever) as long it's well defined. Preferably grid it's 2021.

Each image is just a grid item. Make a module that holds said grid items (images) as a repeating field.

Easy. Team just clicks "add" or "clone" on the main list / item respectively and swaps the image when editing.

Doesn't get much easier than that.

In pseudo code you can figure out the rest.

# grid wrapper
{% for item in module.items %}
# render grid item
{% endfor %}

 

Here's a hint. Maybe use the properties for grid.... Auto fit them and add a minmax with some pixel width and style the wrapper for an image centering it.

 

Maybe a grid gap would help...

 

This is a trivial module and a very stereotypical part of a marketing page. So I'd imagine modules already exist for this although maybe not in your specific styling.

View solution in original post

2 Replies 2
ckingg
Participant

Continuous image uploading in predefined layout

SOLVE

@Ntbrown thanks for the response! With your suggestions and some input from the HS slack channel I was able to get this working. 

 

I was able to use the field groups with an image module and URL module within it. I then could look over the fields and add some styling to get the layout/functionality I wanted. I went with flexbox for the layout. 

Ntbrown
Solution
Contributor

Continuous image uploading in predefined layout

SOLVE

Use a grid system (float, flex, grid whatever) as long it's well defined. Preferably grid it's 2021.

Each image is just a grid item. Make a module that holds said grid items (images) as a repeating field.

Easy. Team just clicks "add" or "clone" on the main list / item respectively and swaps the image when editing.

Doesn't get much easier than that.

In pseudo code you can figure out the rest.

# grid wrapper
{% for item in module.items %}
# render grid item
{% endfor %}

 

Here's a hint. Maybe use the properties for grid.... Auto fit them and add a minmax with some pixel width and style the wrapper for an image centering it.

 

Maybe a grid gap would help...

 

This is a trivial module and a very stereotypical part of a marketing page. So I'd imagine modules already exist for this although maybe not in your specific styling.