Since I posted my comment I have built something similar for the same jquery add on, but I’ve used repeater field. The client will select the number of columns that each image will cover and there are 5 columns in the grid. Height is not something they can set. Height is controlled by the number of columns and the images size ratio. This was required because the entire image grid needs to be responsive with all image widths set as a %. Basically they need to upload images that have the correct height based on each images depending on how many “grids” high they want the image to be displayed. It’s not a perfect solution, but it’s the best I could come up with.
There are some calculations that need to be done to figure out how tall an image needs to be to correctly fit into the grid. Basically, each column is 19% of width and there is a 1% gap between each image. Height is determined by how tall each row of the grid is compared to the column height. The calculation is fairly complex and I’m currently tying to figure out how to give them a calculator. It could probably be done in a spreadsheet, but wold be better if I could add a calculator page somehow. I’m still working on that part.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
© 2023 Advanced Custom Fields.