Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/member picture fixed ratio; fixes #1717 #336

Merged

Conversation

gagnieray
Copy link
Collaborator

No description provided.

@gagnieray gagnieray force-pushed the feature/member-picture-fixed-ratio branch from 55e09b4 to 8c85738 Compare October 9, 2023 18:32
@codecov-commenter
Copy link

codecov-commenter commented Oct 9, 2023

Codecov Report

Merging #336 (656a271) into develop (8d4ed04) will decrease coverage by 0.12%.
The diff coverage is 18.81%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

@@              Coverage Diff              @@
##             develop     #336      +/-   ##
=============================================
- Coverage      44.31%   44.20%   -0.12%     
- Complexity      5868     5896      +28     
=============================================
  Files            142      142              
  Lines          23816    23901      +85     
=============================================
+ Hits           10554    10565      +11     
- Misses         13262    13336      +74     
Files Coverage Δ
galette/lib/Galette/Core/Preferences.php 71.04% <ø> (ø)
galette/lib/Galette/Entity/Adherent.php 75.95% <0.00%> (-0.15%) ⬇️
galette/lib/Galette/Controllers/AjaxController.php 0.00% <0.00%> (ø)
...lib/Galette/Controllers/Crud/MembersController.php 0.00% <0.00%> (ø)
galette/lib/Galette/IO/FileTrait.php 52.33% <33.33%> (-0.93%) ⬇️
galette/lib/Galette/Core/Picture.php 48.81% <20.77%> (-4.93%) ⬇️

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@gagnieray
Copy link
Collaborator Author

The success message is not returned when a picture is changed with drag and drop :

} else {
$ret['result'] = true;
$this->flash->addMessage(
'success_detected',
_T('Member photo has been changed.')
);
}

I don't see how to fix this. Maybe it is not the only case ? 🤔

@trasher
Copy link
Member

trasher commented Oct 10, 2023

I'm not sure I understand, but nothing is meant to be returned at this point: flash messages are stored until the next call. After an ajax call, calling the ajaxMessage route (see AjaxController::messages() method) should return the message as HTML to display.

As far as I cna see in current photo_dnd.js.twig, this route is called in a success javascript function, that seems correct at first look, but after testing that on master demo; ythat was apparently not working as of Galette 0.9.6.1 :-/

Anyway, displaying a success message is maybe useless, if error messages are displayed correctly. In case of success, the new image will just appear, I guess that's enough :)

As of the other places it's called, I'm not sure all works, but this seems OK in removal_js.twig, I've tested on demo removing a contribution; the success message is properly displayed.

@gagnieray
Copy link
Collaborator Author

I'm not sure I understand, but nothing is meant to be returned at this point: flash messages are stored until the next call. After an ajax call, calling the ajaxMessage route (see AjaxController::messages() method) should return the message as HTML to display.

Yes that's it. Sorry I shouldn't have used the word "return".
I meant that the response given by ajaxMessage route is empty.

As far as I cna see in current photo_dnd.js.twig, this route is called in a success javascript function, that seems correct at first look, but after testing that on master demo; ythat was apparently not working as of Galette 0.9.6.1 :-/

OK. So I didn't break anything 😅 Fine !

Anyway, displaying a success message is maybe useless, if error messages are displayed correctly. In case of success, the new image will just appear, I guess that's enough :)

As of the other places it's called, I'm not sure all works, but this seems OK in removal_js.twig, I've tested on demo removing a contribution; the success message is properly displayed.

All right thanks ! 😉

@gagnieray gagnieray closed this Oct 10, 2023
@gagnieray gagnieray reopened this Oct 10, 2023
@gagnieray
Copy link
Collaborator Author

As of the other places it's called, I'm not sure all works, but this seems OK in removal_js.twig, I've tested on demo removing a contribution; the success message is properly displayed.

All right thanks ! 😉

Looking at removal_js.twig and other places, I found the answer 😊

First, in such cases, window.location.href is used in the success function.

Here, messages are displayed using .before() jQuery function.

Error messages are rendered using messages_inline.html.twig.
Success messages are rendered using messages.js.twig with.toast() from FUI.

That's why, with drag'n drop, only error messages are displayed properly.

I don't really know what would be the best way to fix that.

A quick fix would be to use window.location.reload(true);. But in this case, photo_dnd.js.twig include should be removed from member_form.html.twig ; the feature could only be available in member_show.html.twig. I think it makes sense as a file upload field is already available in the form 🤔

FYI, I also discovered an issue in messages.js.twig when success_detected is defined but not iterable 😅 (I'll submit a fix in another PR).

@gagnieray
Copy link
Collaborator Author

FYI, I also discovered an issue in messages.js.twig when success_detected is defined but not iterable 😅 (I'll submit a fix in another PR).

Forget about this one. I messed things up on my install trying to understand messages 🙄

Comment on lines 755 to 769
// calculate image size according to ratio
if ($cur_width > $cur_height) {
$h = round($w / $ratio);
if (!isset($cropping)) {
if ($cur_width > $cur_height) {
$h = round($w / $ratio);
} else {
$w = round($h * $ratio);
}
// calculate image size applying the default max size on the smallest side of the image
} else {
$w = round($h * $ratio);
if ($cur_width > $cur_height) {
$w = round($h * $ratio);
} else {
$h = round($w / $ratio);
}
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made these changes because, depending on the ratio defined in the settings and the ratio of the original image, cropped images could be smaller than the max size allowed (and 200px max already makes images in the public members gallery a bit blurry depending on screen's size).

But I found a case where cropping fails : when the uploaded image largest side's size is 200px 😞

Any suggestion on how to resolve this case ?
Would it be allowed to simply increase protected $max_width and protected $max_height values ? 😅

@trasher
Copy link
Member

trasher commented Oct 10, 2023

I have not yet tested current PR, I must admit I'm a bit lost; it's been awhile since I worked on pictures ;)

I'll take a look later today or maybe tomorrow trying to understand all changes on the PR; there are few things in current proposition that sounds a bit "strange" to me (for example, you calculate cropping after ratio ia already calculated, maybe the solution would be to keep ratio code as is, but after cropping size calculations? - this is just an idea quickly reading the code).

As of the issue with cropping failure if the image size is the max allowed one; it won't be fixed if minimum size is increased; but just moved, no?

As of the size itself... I'm not against a highest minimal size, but it's finally displayed ~200px actually (keeping in mind 1000px image makes no sense in all cases).

We already have issues on images size at display. As far as I've seen on demo:

Aspect ratio is kept in all cases; but on trombi, this may cause already display issues on some images. Also, if source image is smaller than 200px, this is currently displayed with same sizes :(

I see no other usages (in main) of image resizing, but it's also used in Auto and ObjectsLend plugins.

@gagnieray
Copy link
Collaborator Author

I have not yet tested current PR, I must admit I'm a bit lost; it's been awhile since I worked on pictures ;)

I'll take a look later today or maybe tomorrow trying to understand all changes on the PR;

There's no hurry 😉

there are few things in current proposition that sounds a bit "strange" to me (for example, you calculate cropping after ratio ia already calculated, maybe the solution would be to keep ratio code as is, but after cropping size calculations? - this is just an idea quickly reading the code).

Yes! Cropping must be done before resizing 👍

[...] As of the size itself... I'm not against a highest minimal size, but it's finally displayed ~200px actually (keeping in mind 1000px image makes no sense in all cases).

Another drawback of increasing those values would be a highest database size cost as members' pictures are also stored in the database.

We already have issues on images size at display. As far as I've seen on demo:

* on member card - https://demo.galette.eu/member/edit/176 for example - image size is 200x150, but its displayed 150x112.5

This one is more an "optimization" issue than a wrong behavior, no ?
"Fluid images" is a common thing in responsive design.

* on trombi page, the same 200x150 image is displayed 238.33x178.75.

As members' pictures are only stored in 1 size, to prevent cases where images are "stretched", they should be stored with the biggest size they can be displayed with.

Then, in case of cards display (as in the trombi page), to prevent the columns from being larger than the pictures max width, the grid could be constrained with a max-width on wide screens.

Otherwise, it's not my intention to go so far but, the perfect optimizations for responsive images would be to provide the same image in different sizes in the srcset attribute of each img tag : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Aspect ratio is kept in all cases; but on trombi, this may cause already display issues on some images. Also, if source image is smaller than 200px, this is currently displayed with same sizes :(

OK. Then a check on minimum image size is required too.

I see no other usages (in main) of image resizing, but it's also used in Auto and ObjectsLend plugins.

If I've done things correctly, it shouldn't impact other usages 😄

@gagnieray
Copy link
Collaborator Author

I see no other usages (in main) of image resizing, but it's also used in Auto and ObjectsLend plugins.

If I've done things correctly, it shouldn't impact other usages 😄

After checking... No actually 🤣

@gagnieray gagnieray marked this pull request as draft October 10, 2023 16:18
@trasher
Copy link
Member

trasher commented Oct 10, 2023

[...] As of the size itself... I'm not against a highest minimal size, but it's finally displayed ~200px actually (keeping in mind 1000px image makes no sense in all cases).

Another drawback of increasing those values would be a highest database size cost as members' pictures are also stored in the database.

Good catch.
I wonder if we should still store image files in database. At the beginning, the idea was to save only the database, so one can restore it entirely along with images. But dynamic files or mail attachments are not stored in database, therefore backing up data directory is mandatory.

On another hand, we can continue to limit size (width, height and length) and keep storing full size images. Nowadays databases are most of the time OK (we won't store very huge images).

We already have issues on images size at display. As far as I've seen on demo:

* on member card - https://demo.galette.eu/member/edit/176 for example - image size is 200x150, but its displayed 150x112.5

This one is more an "optimization" issue than a wrong behavior, no ? "Fluid images" is a common thing in responsive design.

Yes, I know about "fluid images"; this is the idea some designers use to explain why there are 5Mio background images present on some websites :D
In some cases (maybe is this no longer true), I remember I had display glitches trying to display a huge picture in a very small element. That would maybe be a problem if a full size image was served, but this is not the case ;)

This is indeed not a problem currently for Galette.

* on trombi page, the same 200x150 image is displayed 238.33x178.75.

As members' pictures are only stored in 1 size, to prevent cases where images are "stretched", they should be stored with the biggest size they can be displayed with.

Yes, indeed; and I guess that was the case in 0.9.x :)

Then, in case of cards display (as in the trombi page), to prevent the columns from being larger than the pictures max width, the grid could be constrained with a max-width on wide screens.

That seems a good solution for now.

Otherwise, it's not my intention to go so far but, the perfect optimizations for responsive images would be to provide the same image in different sizes in the srcset attribute of each img tag : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Yes, maybe the maximum image size would be the original one (I've made this change on ObjectsLends plugin wen I took the ownership a few years ago), and we could use cache to store generated thumbnails. But I think that's currently too much for 1.0.0.

Aspect ratio is kept in all cases; but on trombi, this may cause already display issues on some images. Also, if source image is smaller than 200px, this is currently displayed with same sizes :(

OK. Then a check on minimum image size is required too.

Yes :)

@gagnieray gagnieray force-pushed the feature/member-picture-fixed-ratio branch from d13c99c to 8fa5c66 Compare October 11, 2023 16:10
@gagnieray
Copy link
Collaborator Author

I wonder if we should still store image files in database. At the beginning, the idea was to save only the database, so one can restore it entirely along with images. But dynamic files or mail attachments are not stored in database, therefore backing up data directory is mandatory.

Then yes I agree, storing only members' picture in db is useless.

On another hand, we can continue to limit size (width, height and length) and keep storing full size images. Nowadays databases are most of the time OK (we won't store very huge images).

For which purpose then ?

Yes, I know about "fluid images"; this is the idea some designers use to explain why there are 5Mio background images present on some websites :D

🤣

In some cases (maybe is this no longer true), I remember I had display glitches trying to display a huge picture in a very small element. That would maybe be a problem if a full size image was served, but this is not the case ;)
[...]

Otherwise, it's not my intention to go so far but, the perfect optimizations for responsive images would be to provide the same image in different sizes in the srcset attribute of each img tag : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Yes, maybe the maximum image size would be the original one (I've made this change on ObjectsLends plugin wen I took the ownership a few years ago), and we could use cache to store generated thumbnails. But I think that's currently too much for 1.0.0.

In the case of members' pictures, for some kind of "privacy by design" considerations, I think it's a good idea no to keep the source image and rather resize it to the minimum size possible.

But the behavior you introduced in ObjectsLends could be usefull for dynamic fields.

Regarding using cache to store thumbnails, I agree 😉

Then a check on minimum image size is required too.

Yes :)

The last forced push on this PR is better 😄
Pictures are cropped and resized properly.
There is still an issue to resolve when the source image has a 200px side.

@trasher
Copy link
Member

trasher commented Oct 11, 2023

I wonder if we should still store image files in database. At the beginning, the idea was to save only the database, so one can restore it entirely along with images. But dynamic files or mail attachments are not stored in database, therefore backing up data directory is mandatory.

Then yes I agree, storing only members' picture in db is useless.

On another hand, we can continue to limit size (width, height and length) and keep storing full size images. Nowadays databases are most of the time OK (we won't store very huge images).

For which purpose then ?

Keeping in DB you mean? The main one: do not change any existing code, nor remove tables in database :p

Yes, I know about "fluid images"; this is the idea some designers use to explain why there are 5Mio background images present on some websites :D

🤣

In some cases (maybe is this no longer true), I remember I had display glitches trying to display a huge picture in a very small element. That would maybe be a problem if a full size image was served, but this is not the case ;)
[...]

Otherwise, it's not my intention to go so far but, the perfect optimizations for responsive images would be to provide the same image in different sizes in the srcset attribute of each img tag : https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Yes, maybe the maximum image size would be the original one (I've made this change on ObjectsLends plugin wen I took the ownership a few years ago), and we could use cache to store generated thumbnails. But I think that's currently too much for 1.0.0.

In the case of members' pictures, for some kind of "privacy by design" considerations, I think it's a good idea no to keep the source image and rather resize it to the minimum size possible.

But the behavior you introduced in ObjectsLends could be usefull for dynamic fields.

Probably, yes... I guess the better solution would be to introduce dynamic images (so display, stroage, etc can be managed properly). What has been done on objectslend is not a good solution out of the box, it's based on main Picture, and I've added a file stored thumbnail that is not really well thinked at the beginning :(

The idea behind is probably what would be done in core, but current code should really not be used :D

Regarding using cache to store thumbnails, I agree 😉

This is certainly too much work for now; especially if database storage is removed (no schema change in 1.0.0; this will wait next release)

Then a check on minimum image size is required too.

Yes :)

The last forced push on this PR is better 😄 Pictures are cropped and resized properly. There is still an issue to resolve when the source image has a 200px side.

I propose we finalize the original idea behind this pull request; so I can release a RC2 "quickly", and I'll propose a rewrite of the picture class with all changes for next release.

@trasher
Copy link
Member

trasher commented Oct 11, 2023

PS: tests are failing because website is currently down, see https://bugs.galette.eu/issues/1721

@trasher
Copy link
Member

trasher commented Oct 12, 2023

I've just tested; its seems globally OK. I'm not against the feature, but I'm not sure this is something that will be widely used.

I do not get the point of placing the new pref in the cards tab; it probably should be moved to parameters (even if there is no good place in facts).

Also, I did not really see issue with 200px images. If the issue is a landscape 200x125 image results in original image just being uploaded; well, that makes sense to me; there is nothing to resize/crop.

Honestly; we're talking about member photos that are maybe almost never used, and Galette is not a software image program, I guess this kind of "issue" is not significant.

Well, if I did not miss anything... :)

Also, a little con: there are many new translations for this feature, this should be avoid (unless really necessary) after a RC. But since I'm pretty sure this won't be widely used, lack of translation won't be a blocker (and I do not want to postpone after this for next release).

@gagnieray
Copy link
Collaborator Author

I've just tested; its seems globally OK. I'm not against the feature, but I'm not sure this is something that will be widely used.

That's why I made it optional 😉

In cases where members use "strange" ratios or small pictures, I think it is a simple and efficient solution to ensure consistancy on the trombi page and member cards.

I do not get the point of placing the new pref in the cards tab; it probably should be moved to parameters (even if there is no good place in facts).

Because it also applies to member cards.
And after all, I think that this feature will mostly interest those who use member cards.

Also, I did not really see issue with 200px images. If the issue is a landscape 200x125 image results in original image just being uploaded; well, that makes sense to me; there is nothing to resize/crop.

As the objective of this feature is to ensure every picture will have exactly the same size and ratio, I definitely think it is an issue.

I've added minimum image size requirement when cropping is enabled : 9db53f6

Honestly; we're talking about member photos that are maybe almost never used, and Galette is not a software image program, I guess this kind of "issue" is not significant.

I understand.
Consider it more as a finishing ? 😆

Well, if I did not miss anything... :)

I don't think so.
On my side, I still need to fix the plugins. But I think there are already existing issues when creating new cars or objects. I'll open an issue on the tracker if necessary.

Also, a little con: there are many new translations for this feature, this should be avoid (unless really necessary) after a RC. But since I'm pretty sure this won't be widely used, lack of translation won't be a blocker (and I do not want to postpone after this for next release).

All right! I'll stop adding strings until the next release 👍

@gagnieray gagnieray marked this pull request as ready for review October 12, 2023 10:15
@gagnieray
Copy link
Collaborator Author

Also, a little con: there are many new translations for this feature, this should be avoid (unless really necessary) after a RC. But since I'm pretty sure this won't be widely used, lack of translation won't be a blocker (and I do not want to postpone after this for next release).

All right! I'll stop adding strings until the next release 👍

I registered on weblate so I can take care of the translations added by this PR 😁

@trasher
Copy link
Member

trasher commented Oct 12, 2023

Also, a little con: there are many new translations for this feature, this should be avoid (unless really necessary) after a RC. But since I'm pretty sure this won't be widely used, lack of translation won't be a blocker (and I do not want to postpone after this for next release).

All right! I'll stop adding strings until the next release 👍

I registered on weblate so I can take care of the translations added by this PR 😁

lol, great ;)

BTW, please do not extract strings in pull requests; I use to do that on develop only (to avoid conflicts). Not a problem, I'll drop the commit when I'll rebase before final merging.

@trasher
Copy link
Member

trasher commented Oct 12, 2023

Because it also applies to member cards. And after all, I think that this feature will mostly interest those who use member cards.

Maybe, yes... But this currently impacts default images, not just PDF cards rendering; when all other options on this tab only concerns PDF cards :)

[...]
I've added minimum image size requirement when cropping is enabled : 9db53f6

👍 so I guess the issue is resolved?

Expect the change proposal I made on too small text; this is OK for me. If you're happy with current core feature, I'll merge soon.

@gagnieray
Copy link
Collaborator Author

Because it also applies to member cards. And after all, I think that this feature will mostly interest those who use member cards.

Maybe, yes... But this currently impacts default images, not just PDF cards rendering; when all other options on this tab only concerns PDF cards :)

I will move de fields in the parameters tab then 😄

[...]
I've added minimum image size requirement when cropping is enabled : 9db53f6

👍 so I guess the issue is resolved?

Yes 😁

Expect the change proposal I made on too small text; this is OK for me. If you're happy with current core feature, I'll merge soon.

Thanks !

Wait for a last commit regarding changes in the preferences 😉

closes #1717

Add cropping options in settings parameters tab
Add cropping focus selection on member form
Add cropping on resizeImage()
Minimum image dimensions required from cropping

Restore and extend drag and drop picture feature
Clean CSS and template
@trasher trasher force-pushed the feature/member-picture-fixed-ratio branch from c3ab1a4 to 656a271 Compare October 12, 2023 15:35
@trasher
Copy link
Member

trasher commented Oct 12, 2023

I've squashed all commits in one, waiting for tests to turn green, and I'll merge.

I'll extract new strings once merge will be done, but we'll have to wait for translations.... Weblate looks on official repository which is still down currently :(

@trasher trasher merged commit 656a271 into galette:develop Oct 12, 2023
14 checks passed
@gagnieray gagnieray deleted the feature/member-picture-fixed-ratio branch October 13, 2023 11:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
3 participants