I can suggest two approaches, although neither of them is particularly straightforward.
-
Option 1
– Use 3 inline list components with a tiles layout. 2 tiles for the first row, 3 for the second, and 2 for the third. You can use visibility conditions to control when the third list is shown.
– One challenge with this is that by default the images in the 2 tile rows will be larger than those in the 3 tile row. But you might be able to adjust that with some CSS (I haven’t tried that, so I don’t know for a fact)
– You will need to dynamically transpose each set of columns into a vertical list as each row is selected. To learn how to do that, check the “Miracle Method”
– Advantages of this approach is that it can be done entirely within Glide, and you can also make each seat image clickable -
Option 2
– Use Cloudinary to dynamically generate a single image with the appropriate number of rows and seat images
– You would need to prepare two base (blank) template images - one for a 5 seater and another for a 7 seater
– As a row was selected, you would dynamically overlay the appropriate images on the appropriate base template
– Advantage of this approach is that you could size and place the images with precision
– Disadvantage is that if you’re not already familiar with Cloudinary, there will be a steep learning curve
– Also, as you’d just be displaying a single image, it wouldn’t be possible to make individual seats clickable.
Personally, I would probably use the Cloudinary option (assuming that I didn’t need individual seats clickable). But that’s only because I already know how to do it that way. If you’re not familiar with Cloudinary, and prefer not to deal with the learning curve, then you might find option 1 easier to deal with.
Or, somebody might come along and suggest an Option 3 