[IMPLEMENTED] Asset Preview Width/Height Control

[nickconfer]

Run into problem managing multiple images of the same variety with the preview function for list and reference fields. We are trying to use squidex for a template system, and often times a template can have multiple variants.

Below is an example of assets for a specific group we have (and we have several thousand like this in different groups for cards).

If you look at the same front image with the child you’ll see that the edges have different designs. Currently with Squidex, when I add an asset to the schema and resolve the first asset, I get a small square preview.

It would be great if we could have control over two items…

• Right now the image asset is called with a default width and height, so the image is always a square preview of the center. For most preview assets I actually only care about the height, and want the width to be 100% of the image. This presents a problem for very wide images that are not tall, which we have none of, but I thought I would point out aspect ratio could matter here.

• While the preview row height for the List and Reference/Component UI is normally pretty good, occasionally it makes sense to want each row to be taller to see more detail of a asset preview. The asset preview could be the key UX clue to the user that this is the field they want to work with.

Not sure if it would be possible to create a solution for this problem, it would be a huge help to our system, and I imagine would be popular for many other customers doing asset previews in their list / references. Having said that, I think what you have as the default is also great for most use cases.

Not sure what would be best solution here. You could let us specify a width/height for an asset preview and if its set use that over the default 50px. It would also help control the row size of the preview in list/reference. If height was specified and width was not, width would just be 100%, etc. By default they might just show a input hint of 50px since that is default…

[nickconfer]

Just in case confusing…

Here is what three template variants would look like by default today…

VS with some control on height / width it could look like…

[Sebastian]

I do not really understand what your suggestion is. But you could solve it right now by setting the focus point to the one of the corners.

[nickconfer]

The main suggestion I’m making is to allow the image asset being previewed in the rows for content lists and reference lists to be a full image. In addition it would be great to set a height on the image so the row could be larger to see the details of that image. Finally if no width was set the full image would show, instead of a 50x50 square.

I have several templates, sometimes the variant difference can be the color of the card paper, the color of a font in the middle, physical foil on a card, or the template could be vertically tall instead of wide like the examples given earlier.

If there was an easy way to define just a height for the asset preview and the entire image showed in the row that would be perfect. It would allow for entire previews to be shown, not just a small focal point, etc.

Hope that helps.

I tried the focus point suggestion. This appears to work (not locally, but in the cloud version, we probably need to run an update to fix local). The main problems I see with this as the solution is…

a) The user would have to set the focal point each time they upload, which I think would not work.
b) As I mentioned above its not always related to the edge, it can be numerous other things that would make seeing the entire preview more beneficial.
c) We are making an importer to move away from an old system, this would need to set the focus point as well. I could be mistaken here, but I don’t believe I can set this in the API.

[Sebastian]

@nickconfer

The main suggestion I’m making is to allow the image asset being previewed in the rows for content lists and reference lists to be a full image. In addition it would be great to set a height on the image so the row could be larger to see the details of that image. Finally if no width was set the full image would show, instead of a 50x50 square.

We always need a maximum, so there would be a lot of settings that are needed:

1. Image Height
2. Image Width
3. ResizeMode

Perhaps this can be simplified with a query string.

What do you think about a hover mode?

@nickconfer

c) We are making an importer to move away from an old system, this would need to set the focus point as well. I could be mistaken here, but I don’t believe I can set this in the API.

API Docs

it is just a metadata, called focusX and focusY

@nickconfer

I tried the focus point suggestion. This appears to work (not locally, but in the cloud version, we probably need to run an update to fix local). The main problems I see with this as the solution is…

Thats weird. There was no update since a long time.

[nickconfer]

@Sebastian

Perhaps this can be simplified with a query string.

If we could control the query string of the asset it would solve 80% of issue. The only thing is the row height itself wouldn’t adjust to the height of the image so it would still fit in 50px height, which can be good/bad depending on detail needed to see.

I agree with complexity, I’m not sure there is easy solution other than maybe having a mode option that provided a set of options for preview and that was it. So 50x50 would be Small, 100x100 could be Large, etc. This would solve row issue, but wouldn’t solve box issue of image being full width.

Maybe no good solution here.

@Sebastian

What do you think about a hover mode?

This could be good, but it forces the user to take additional mouse action to really see previews. In addition, I’m slightly worried it may have ramifications we aren’t considering in content it covers, etc.

@Sebastian

it is just a metadata, called focusX and focusY

Thanks, missed this.

@Sebastian

Thats weird. There was no update since a long time.

Will look at again later. Maybe I did something weird, or maybe it has to do with assets imported, not sure. I’ll dig deeper as soon as I have a chance.

Ultimately, it would be awesome to have a solution for this on the preview (will make this work as good/better than their original completely custom tool.). If it is too big issue though in terms of obscure usage or complexity, I completely understand if we need to consider alternative solutions on our end beyond using the asset as the key identifier.

Appreciate the help as always.

[nickconfer]

One last thought…

If hover was implemented, and there was way to have preview image be entire image at max height 50, that would be a near 100% solution.

While preview would be smaller, in a lot of cases, basic detail could be seen. Seeing close up detail would definitely be better in a hover as image could be bigger. Wouldn’t be perfect solution, but I could see how both the image hover would be useful to a wider group of squidex customers, and full width image would also be useful.

[Sebastian]

Whats the current size?

[nickconfer]

Not sure what you mean. The current size of previews is 50x50. The size I gave in the example was 90px high, but that could easily just be 100px.

The templates themselves have various sizes, and are inconsistent, but can be rather large images. If we did hover, it should still have some max-height I’m thinking and not be full size.

[Sebastian]

At this point of time I couldn’t have had a look myself what the current preview size is…

[Sebastian]

Is this what you are looking for?

[nickconfer]

Sorry for the late reply, missed this notification earlier. I think that would work. When I was testing our templates, in particular it seemed like a larger row height was needed to see detail, which is why I ended up doing the 90px per row.

Maybe it would make sense to increase the row height on this slightly as well, but only when an image preview was added to the list of displayable fields. There is no perfect though, no matter what height you do, at some point details will be missing with smaller preview.

Having said all of that I think this is very helpful.

[Sebastian]

I have implemented a tooltip in dev-7546

[nickconfer]

Gave this a test locally. In its current form I couldn’t really use it to solve my problem unfortunately. Here are some examples below to explain.

First the default view adding one template with 5 different asset variants.

As you can see, its difficult to tell the difference between any image. In addition the last image has a black background. This is because of the extra padding, the image itself is just the rectangle you see that is not black.

If the bg parameter is set on the asset url to bg=white, it would then look like this…

In this situation, the templates are slightly clearer of a difference, but small differences are difficult to see. In addition the black background is still a problem in the mode=Pad on the jpg image.

Last two height adjustments… 80px row

And finally 100px row height

None are perfect, but as the height increases some of the smaller details are a little clearer.

Here is what I would suggest for changes.

• set the bg param to make the smaller preview clearer. I set bg=white
• use the bg param to set color on mode=Pad so a jpg that is fit doesn’t add an unexpected color.
• increase the row size when an asset image preview shows in the contents/reference list. This will give larger clearer preview, although not always be perfect.

In case the second bullet point is confusing… here was my original template image.

And then here was the 50x50 asset preview it created with mode=Pad

Where the transparent got set with bg=white, it appears that doesn’t work when there is no transparency and its just filling the image out.

[nickconfer]

In case it is helpful, here are 5 asset examples that I used in my test.

[Sebastian]

I can make it bigger but I do not want to change the background. It is consistent across all places now I think

[Sebastian]

I added support for custom format parameters. You can also do something like this: