4 images in 2x2 grid, no padding, each with own action

[ThatGuyInArizona]

I am trying to create clickable button which has 4 different actions depending on which quadrant of the image is clicked. I have sliced my image into 4 parts (upper left, upper right, lower left and lower right). I want the image to look seemless as a single image, composed of 4 separate images.

I have tried making 4 image components with a different action for each one, but I cannot get them to align in a 2x2 grid with no spacing in between (so the 4 images look like 1, but each have own action).

I tried making a glide table of 4 the images and making a list (as tiles) from those. With some CSS, i removed the spacing between them. But not sure how to make each item in the list have a different action, or pick up the item number in the list in the action to determine which was clicked.

There are probably some easy solutions that I am overlooking…

[Jaime]

You can set independent configurations for items in a list

[Jeff_Hager]

Tiles can be set with either larger or smaller padding, but I don’t remember if it eliminates all padding, or if there is a small separation between tiles. If not, then CSS maybe your only option. Worth trying though to see if you can avoid using CSS.

As for actions, assuming you have an image column and another column to identify the each row (such as a number), you can create a custom action on your inline list with an IF statement to perform a different action based on the value in that row identifier column.

[ThatGuyInArizona]

@Jaime- i have seen the independent screen configuration per item, but cannot locate that option now…i used the response by @Jeff_Hager to solve this. Adding the column id to each image row and then 4 if statements in the action did the trick.

Thank you!

regarding the first part of my question- how can i get 4 image components to line up in a 2x2 grid with no spacing ? I have tried some CSS,

(.geBepJ {
width: 150px !important;
height: 150px !important;
grid-template-columns: repeat(5, 150px) !important;
}

But it doesn’t seem to help. I will keep dinking around with it…

[ThinhDinh]

I think you can just keep using an inline list, it’s easier to debug the code as opposed to using 4 image components.

<pre><span><style>

[data-test="app-vertical-list"] div[cols="2"] {
padding: 0px 0px;
column-gap: 0px;
}

[data-test="app-vertical-list"] .tile-image-area >div{
border-radius: 0px !important;
}

[Jeff_Hager]

There should be a padding option in the tiles setting. There’s a tight option and a loose option. I think the loose option is the default. Like I said, I’m not sure how tight the padding gets, so it might not work exactly how you want. I’m not by a computer to test it at the moment.

Working with the tiles layout

[ThinhDinh]

I was using the tight option for the test above, and it’s not 100% tight so I had to do more CSS for the padding to become zero.

[Himaladin]

@ThinhDinh, the padding cannot be zero due to the selected image area which is larger than the image. Why don’t you try using the margin parameter?

<pre><span><style>

[data-test="app-vertical-list"] div[cols="2"] {
margin-top: -10px;
margin-bottom: -10px;
margin-left:-5%;
}

[data-test="app-vertical-list"] .tile-image-area >div{
margin-right:-10%;
border-radius: 0px !important;
}

[hisashi.fujita]

★ I tried using “%” instead of “px”
★ I specified “height: 11.8rem;” and tried to make the image a square.

<pre><span><style>
[data-test="app-vertical-list"] div[cols="2"] {
margin-top: 0%;
margin-bottom: -5%;
margin-left:-5%;
}
[data-test="app-vertical-list"] .tile-image-area >div{
margin-right:-10%;
border-radius: 0px !important;
height:11.8rem;
}

[ThinhDinh]

But was there any problem with my approach? When I say “not 100% tight so I had to do more CSS” I’m referring to the version when there is no CSS. It has a bit of padding and border-radius so I just set them to zero. Can you tell me why we need the margins here? Thanks a lot.

[hisashi.fujita]

In my environment, @ThinhDinh’s CSS seems to work as expected.

<pre><span><style>
[data-test="app-vertical-list"] div[cols="2"] {
padding: 0px 0px;
column-gap: 0px;
}
[data-test="app-vertical-list"] .tile-image-area >div{
border-radius: 0px !important;
height:11.8rem;
}

[ThinhDinh]

Thank you, love the height trick!

[Himaladin]

I use margins because they allow negative values to overlap a larger selection area than the image. I did a trial error on the environment on mobile and tablet. From the tablet it will be clear and why some parts use px or %. Using % will make the second line image overlap with the first line and so on.
Does the use of tricks with height also apply to tablets? I haven’t tried it.
Thank you for sharing.