#938 – Econa field plugin - Image width in backend is fixed -> make it more flexible?

Hi! I might have mentioned / asked this before, but I am not sure. Anyway: When we save images using the econa custom field plugin they are shown at a fixed wirdt in the backend. When an image that is saved is smaller then then the preview area it is 'blown up' to the max size. This looks awefull with small imgaes ;-)

Would it be posisble to still use a fixed width but only as a max? So when the preview area is something like 300 of 400px, when an image is larger it will be max that size. But when an image is only 100px wide the image width is used.

Or maybe we could get some more control over the preview in the field settings? So we could set our own preview width size? This would be useful when we use portrait or other tall images. When an image is 100 x 400 px it will be shown at the width of the preview image an then the height would get really high.

Kind regards,
Jip

Hi Jip,

I think having multiple image sizes would affect the UI/UX in a bad way.
An option could be to make the preview image a little smaller so even small images look fine. Regarding the ratio issue we could use some CSS to have a fixed container:

.econa-preview-image {
    aspect-ratio: 5/3;
    max-width: 300px;
    object-fit: contain;
    background: #000;
}

Do you like the way this looks? You can paste this snippet to your browser developer tools in order to view the result.

Regards

Hi!

I think using the black background color is not suitable for transparent PNG images. Maybe just not use that? Of use white?

When we just want to make sure the image is never scaled up, just using the max-width to the largest set image width (but never more then the current used 600 px) would work nice.

To solve the 'issue' of images showing realtively big because the have a portrait aspectratio like 3/7 or even more: I think when you add this aspect ratio to the CSS you also need to calculate a different max-with then the set width (heighest one) in the image field. Maybe you could use the aspect ratio to reduce the max-width value?

So when an image is set to max 300 px in the plugin and the aspect ratio is 3/7 the calculated width for the preview would become:

(300 / 7) * 3 = 128

This way the preview image will never be very heigh.

I do think you would only be able to use this when just one aspect ratio is set. And the 'free' option is turned off.

It is not possible to use the aspect ratio of the actual image that has been saved?

Hope this helps.

Hi!

How abouot this:

.econa-preview-image {
object-fit: contain; // fixed setting to make the image fit the preview area
width:300px; // setting in the plugin
height:200px; // setting in the plugin
max-width:200px; // As discuseed before: The largest set width in the plugin, maxed out to 600px.
}

I think this would provide us a nice way to control the preview sizes. This would require the plugin to have an extra setting where we can add the preferred preview size (area) and then the image will be cropped to this viewport. This might be easier then adding caluctaions or use aspect ratio's. The user can just set the prefferd preview size.

You do need to prevent it for being larger then the 600 px used now.

Maybe adding a button to show the full image in a modal would be usefull when these previews are getting smaller.

Maybe it would be even better to sperate the preview container from the actual image inside the preview container... This way we can set the preffered container size and just contain the image inside that container. When the image is smaller then the cointainer it should just show in it saves size. Floating inside the cpntainer.

Something like this:

<div clas="econa-preview-container" style="width:300px;height: 200px;">
<img class="econa-preview-image" style="width:100%; height:100%;object-fit: contain;"></>
</div>

(Add the border to the container div in stead of the image)

When we set the width/height in the same aspect ratio as the image, 'object-fit' wont even be necessary.

Again we would need to set the container sizes per image field. But that would give us the most ocntrol over the size of the preview image.

yes, I think I am in favor of my last suggestion to seperate the image form the preview container ;-) This would give me the best way to control how I want the previews to be presented in the backend.

So this would require:

1) Additional settings in the custom field setup: preview width and preveiw height (max 600 width and maybe also height)
2) Image instide the container div: To make sure it fits: with and heigt 100% + obiect fit.

I have only looke dat the custom field econa plugin But maybe ths would also affect other pasrt os Econa. But I guess you have a better understanding of that.

This is it for now ;-) Hope this helps. It would be nice to have some more control over the preview images.

The truth is that I want to avoid adding options for that affect the UI. Joomla has options for everything and this is not a good choice always.
I will consider this and I will try to come up with a solution that will cover most cases.
Thank you for your feedback.

Regards

OK, thanks Lefteris! I get your point. Let me know what you come up with ;-)

Adding the max-width to the preview images won'r require extra parameeters. Would you consider adding that to the plugin? So the preview won't even be larger then its actual size?

In the mean time I could alsways use some backend CSS to control the CSS. But to be able to do this on a specific preview image I would need an identifier / id in the sourcecode to be able to target that specific preview area. Is there any way you can add this to the ouotput of the backend preview image? It won;t affect anything you do in the pligin isteld but it would enable me to do some css on specic fields in the backend. Combined wih the max-width that would give me all I need to control the preview images.

Kind regards,
Jip

Hi Lefteris, would it be possible to le me know if this is something your are working on? As I said in my last reply, just adding a class/id to be able to identify the preview image (econa field ID) wuld help me set the CSS for a specific econa image in the backend. To make sure the previw is never bigger then te max set value of the (largest) image. Because that stretched out the image...

Kind regards,
Jip

Maybe an option to set the max backend preview width with a econa custom field would work for us as well. But this will not work for other uses of econa images (not custom field). It would be usefull to us though!

Hi Jip,

I just sent you the development version over email. This version contains a simple CSS fix for the issue you are describing.
Please let me know if that solves the issue.

Regards

Hi Lefteris,

I installed an tested the dev version. My observations:

1. The image is shown at coreect size. So no more 'blowing up' small images to the preview size in the older previous version. Excellent.

2. The preview area (when no image is uploaded yet) is still the default 400px. It might be nice to also have this empty previw windo at the same size it will be after upload? But this it not a huge deal. Also after upload (before saving) the preview is still it's defaul size. Only after saving will the preview 'recale' to the actual image size. Also, not a big deal, but it might be nice to have a consitent preview image (before uplaod, after upload and fter save.

3. I have only tested small image settings for the plugin. I assume larger images will still be maxinmize to 400 (or was is 600?) pixels?

I was wondering: How did you implement this? Does the preview check the settings in the cusom field? Or does it only use CSS to resize the image container?

In the previous state, the preview image was taking all the available space with a maximum with of 600 pixels.
In the current state, the preview image is displayed at the actual image size dimensions but again has a maximum width of 600 pixels.
It's just CSS:

img { width: auto; height:auto; max-width: 100%;}

OK, so that explains why it only aplies to the image after upload / save. But this is fine. It prevents the 'blowing up' of the emaige after saving it.

Thanks Lefteris!

One more question if I may: When there are multiple image sizes for an image, how do you determen wich one to use for the preview? Do you us the largest avaialble one?

Yes, we detect the largest size and we use that.

OK thanks Lefteris! Still using your extensions with great pleasure.