mouse clicking a picture on the recipe page show bigger image / original picture resolution

[quamok]

Is your feature request related to a problem? Please describe. Sometimes the picture of the recipe contains information that isn't present in the recipe steps/ingredients. We can't enlarge the picture to read text on it.

Describe the solution you'd like it would be nice if clicking on the picture would open the picture as an overlay in the original resolution of the picture.

Describe alternatives you've considered none

Additional context none

[vabene1111]

Currently images are compressed when uploading them so this might not be very useful. But one could make a space setting to upload the uncompressed images and then enlarging them would make sense

[quamok]

maybe it could be a great idea to have multiple resolutions of pictures used for different purposes inside the app? I think in this day and age of cheap Tb storage, it's not really worth compressing pictures from 250kb to 15kb. But maybe smaller pictures makes Tandoor runs faster? Then maybe keep the original image and display it when the user specifically ask for it (when clicking the picture).

That's just my 2c :)

[vabene1111]

you are completly right with 250kb to 15kb but modern phones regularly take 8MB or larger pictures. Showing those in the default scree would lead to very long loading times. You are of course right that one could have multiple version of the image

[quamok]

you're right, my example was a bad one. I just did a test with a smartphone picture. I downscaled a 4032x3024 to 1344x1008 at 90% quality. The file size went from 6.4 MB to 756kB. I'm by no means a pro regarding picture quality, but I think it would be better than the 623x461 when clicking on the picture, with reasonable file size. But like I said you could keep the current downscaled picture for the default view and have another picture loading when the user clicks on the picture.

Food for thought I guess :)

[MaxJa4]

Where does the compression take place? If it's in Python, I may be able to do some testing (resolution, quality settings, different libraries, ...) since I'm new to Vue etc. but comfy with Python. I usually work with big DSLR/RAW pictures, but sometimes also with size-optimized ones for machine learning :)

[vabene1111]

the compression is currently in multiple places but i wanted to move it to a central function. Maybe just add a central method somewhere that takes an IO Stream and returns a reasonably compressed png file, i can handle the rest. The main place the current function is used is in api.py RecipeViewSet

[MaxJa4]

Found it, thanks. Any other requirements, like does it have to be a PNG as output? JP(E)G's tend to be much smaller.

[vabene1111]

hmm i just choose png at some point .. it makes it a little easier as the file ending is the same everywhere but if other formats are better than feel free to change it, i will see that everything gets updated

[MaxJa4]

Ah ok. I just set up a experimental local project to test different settings and everything. For comparison I started with the exact method like in the api.py... it made a 738KB png from a 80KB jpg... I think there is a huge potential to save lots of bandwidth and loading time :) I'll create a separate issue with my findings if there's anything to discuss. Otherwise I can just make a PR when I found a good setup.

[mishrayush15]

We can work on this issue in addition to some CSS and certainly JS to make a smooth animation and open the image in a bigger form while we hover the cursor on the same image. I would be very honored if you assign me to fix this issue. You can surely count on me.

[smilerz]

We can work on this issue in addition to some CSS and certainly JS to make a smooth animation and open the image in a bigger form while we hover the cursor on the same image. I would be very honored if you assign me to fix this issue. You can surely count on me.

We don't assign issues to new contributors.