ideas icon indicating copy to clipboard operation
ideas copied to clipboard

Add option for thumbnail images on replicator sets (apart from icons)

Open bobevsky opened this issue 1 year ago • 1 comments

I’ve been thinking about the user experience with the replicator sets. Many of us are currently using the replicator to build pages with blocks (widgets), and when there are a lot of blocks available, it can be confusing to know which block to use. In Statamic 4, you added the option to add icons to the blocks, but should we include thumbnail images for the sets as well? Many of our clients have requested this as well (because we had it in the previous CMS before switching to Statamic).

image

Here are a few points to consider:

  1. Improved User Experience: Thumbnails could make it easier for users to quickly identify the sets they need, especially if they are visual learners.
  2. Enhanced Visual Appeal: Adding images could make the interface look more modern and attractive. (I am sure some UI changes to the sets picker will be needed)
  3. Clarity and Precision: Sometimes, text descriptions aren't enough, and an image can prevent misunderstandings about what the set includes.

Would be great if we can just upload screenshots of the components (some UI adjustments will have to be made to the replicator sets picker for this). Just so you get the idea, this is what i am aiming for:

image

bobevsky avatar Jun 27 '24 09:06 bobevsky

Coming from WordPress with ACF and ACF Extended this is currently my number one UX Issue in the CP.

I think it would be great to at least have the Option for another SetPicker View.

A lot of our Clients where really happy about the introduction of Screenshot-Previews of the Sets which where included with ACF Extended (it's not possible with native ACF as well).

It's a rather Simple Set Picker which opens a Modal and looks like this:

Bildschirmfoto 2024-10-30 um 09 12 22

That is way better than a Text-Representation if you have more than a few Sets.

Is it possible to modify the SetPicker.vue Component (or any other predefined Fieldtypes) without breaking stuff or does this need to go with a Pull Request to the Core?

I looked into the possibility of creating an Add-On for it, but i think that can't be done with the existing FieldTypes?

graphek avatar Oct 30 '24 08:10 graphek

FWIW, it sounds like the Statamic team is planning on adding this at some point after the launch of v6:

Image

Discord thread: https://discord.com/channels/489818810157891584/1413110097911218249/1413111431372607538

aaronbushnell avatar Sep 16 '25 16:09 aaronbushnell

Added in https://github.com/statamic/cms/pull/12532

jackmcdade avatar Sep 25 '25 19:09 jackmcdade

It looks like new feature is in v6, thats awesome! I think it could still be improved - we have often more than 20 options, so hovering each one becomes annoying very soon. I like the idea from @graphek with the picker overlay, or maybe just simply show the image directly within the list items.

johanneskreatif avatar Dec 17 '25 10:12 johanneskreatif

Have you seen the Grid mode? It'll show you all the preview images at once - you don't need to hover over each set.

Image

duncanmcclean avatar Dec 17 '25 10:12 duncanmcclean

oh i missed that. looks amazing, thank you!!

johanneskreatif avatar Dec 17 '25 10:12 johanneskreatif