Blocks: It's not possible to rearrange images in a tiled gallery block

[apeatling]

I love our tiled gallery block for two reasons, it's visually more interesting, and it will horizontally and vertically align all your images. It makes it easy to make any number of images a full section of the page.

However there are two really sore points that make it frustrating:

1. I can't rearrange images
2. I can't randomize the ordering and sizing of the images

Number two is frustrating because it's deciding which images are big, and which are small in order for them to fit. However, there are often multiple ways this can be done. For example in this view:

I would much prefer the image of the person at the computer in the bottom right to be in the bigger section the photos on the wall currently occupies. There is no way for me to do this.

The two ways this can be fixed are:

1. Allow me to drag and drop images into new locations (limiting the drop spots to images that are the same dimensions)
2. Have a button that regenerates the gallery and updates the positions of the image. That way I can keep clicking the button until I get something that looks good.

I think number 2 might be the easiest solution, but having both number 1 and number 2 would be ideal.

[apeatling]

/cc @olaolusoga @shaunandrews @iamtakashi This one could use some design thinking about how we could introduce the abilities mentioned to this block.

[iamtakashi]

@apeatling Not that I'm saying this is ideal, but we can rearrange the order by reselecting the images to change the order though?

[apeatling]

Yes you can do this, but it's really rough and tough to follow. The chances of users selecting images in a neat line like this are low.

This is what I ended up messing with on the site I was building, and it was really frustrating.

[iamtakashi]

Another idea can be adding arrows that move the image position. There is a benefit to follow an existing pattern that could be familiar for some. This also would work better with touch devices. Any thoughts?

A quick mockup:

Masonry gallery from CoBlocks also uses this pattern.

[apeatling]

I think this pattern is good, the concern I have is moving an image between different dimensions (landscape to portrait as an obvious example). The CoBlocks masory gallery in this example uses images that all the same orientation, making moving easier. Is that always the case?

[iamtakashi]

It might take a few trial and error, but I'd say It's better than what we have now as you can see in front of you.

[shaunandrews]

Drag-and-drop seems like an obvious addition here, and on mobile it likely wouldn’t be needed as the gallery should be displayed differently.

The left/right arrows kind of work, but get confusing when the image moves up/down. It could also be frustrating as the way the image moves is not at all obvious.

A lot of this comes down to the generative nature of the layout and the fact that it changes based in the number and size of the images. One consideration is to offer more static/fixed layouts rather than generate them in the fly.

[iamtakashi]

Drag-and-drop seems like an obvious addition here, and on mobile it likely wouldn’t be needed as the gallery should be displayed differently.

What about tablets like iPad? The gallery appears the same as it's on a desktop :) I'm not against drag-and-drop, and both (arrows and a handle for drag-and-drop) would be ideal like the block mover.

The left/right arrows kind of work, but get confusing when the image moves up/down. It could also be frustrating as the way the image moves is not at all obvious.

Yes, I agree on the way the image moves is not obvious all the time, but adding arrows could be a first step as they'll work both on a touch device and non-touch device, and I assume it's easier to implement than drag-and-drop. It might be a good idea to make the size of the arrows a little bigger for fingers like mine :)

[mrfoxtalbot]

As an sidenote, whenever I encounter this scenario I will head to the wp-admin editor instead, as the media window there does allow for simpler drag & drop.

Calypso:

wp-admin:

[shaunandrews]

What about tablets like iPad?

I'd expect a tap-and-hold gesture for reordering with a touch device.

[simison]

Folks, I'll move this issue to Jetpack repo where this block is developed.

There's a duplicate already (in #11874) but I'll close it since this has more thought put into it.

[tbradsha]

18675881-hc:

I was just working to change the arrangement of the tiles in my photo block in a certain window, and now I can't find it again. Help!

Turns out reordering a tiled gallery block doesn't work in Calypso, but it does work in WP Admin.