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.
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.
@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.
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.