Who can help with adding a download icon to image fields?

[bernhard]

I'm asking for someone to create a PR (or help me create a PR) for adding a new feature to the PW backend image field.

See this mockup which adds a "download" icon to the top right corner of the image preview:

Why is that a problem??

Have you ever had the need to download a file that was uploaded to the PW backend? Then you know that this would be a helpful addition. The problem with the "click on the image, then on the popup click on "save image as"" is, that some SVGs simply don't preview (maybe that's another thing we should create a PR for...). And no preview, no download. And even if the preview technique works --> that's too many steps for simply downloading the image!

---

I've done some research and found that the markup is defined in /wire/modules/Inputfield/InputfieldImage/InputfieldImage.module --> so that's the place where the markup of the download icon should go. Easy. No problem so far ? 

The problem that I faced is that the styling is done in an .scss file where I don't have any experience. Also I don't have the frontend tooling to convert that into a css file. I think it should be easy to do though if you have some experience in that field. And of course for a proper PR we need to modify both the SCSS and the compiled CSS so that everybody that downloads will have a working version and that we make sure that future modifications to the SCSS file don't overwrite our changes.

I think it's an absolutely necessary addition and this bugs me for very very long time. While it is for sure a great module, installing AOS solely for this reason is no option as I had several issues with the module that bugged me even more and cost me a lot of time when debugging... Also, I think that should not be a module, it should be part of the core. And we should make it as easy as possible for ryan to add it ? 

I can help with creating the PR if you need ? 

Who can do that for the community and help improve PW? ?

[3fingers]

Hi @bernhard, as far as I can tell inside the folder is also present the compiled .css file :

Is there something I could do or I am missing something?

[psy]

Not sure I fully understood thei issue but I'd use dev tools to identify the element rule, then add the download icon to :before or :after styling in your custom CSS after SCSS compilation

 

[bernhard]

33 minutes ago, 3fingers said:

Hi @bernhard, as far as I can tell inside the folder is also present the compiled .css file :

Yes, but the point is that we need to do the modifications in SCSS, then compile the CSS and then ship BOTH files with a PR ? Of course we could hack the CSS file, but that's not a PR then, that's a hack.

Edit: @psy and @3fingers sorry I added the request to my message. That got lost while editing the post title ? 

[psy]

Being able to download full-scale images, including SVG's, directly from an admin->page-edit->images field via a single click on an icon would be a great feature

[AndZyk]

I know that this is not the answer you are looking for, but at least on macOS I always open the image with the lightbox and then drag&drop the image on my desktop. That is not as convenient as a download icon, but three clicks less than Right click => Save image as.. => Select folder => Save ?

[bernhard]

Just now, AndZyk said:

I know that this is not the answer you are looking for, but at least on macOS I always open the image with the lightbox and then drag&drop the image on my desktop. That is not as convenient as a download icon, but four clicks less than Right click => Save image as.. => Select folder => Save ?

Nice to know nonetheless for a mac newbie ? But today I had an SVG that was not displayed so your proposed solution would also not work I guess ? 

My request is also an attempt to get more contributors to PW and to get more PR's for little and easy to add things ? 

[AndZyk]

Just my proposition, but maybe this option would be better located under the image edit buttons: https://github.com/processwire/processwire/blob/3acd7709c1cfc1817579db00c2f608235bdfb1e7/wire/modules/Inputfield/InputfieldImage/InputfieldImage.module#L767

Because it is not a common option for everyone and the risk would be, that you download the file by accident if it is a button inside the image.

Also you wouldn't have to change the SCSS file.

It would be just something like:

// Download
$buttonText = "<i class='fa fa-download'></i> $labels[download]";
$buttonText = str_replace('{out}', $buttonText, $this->themeSettings['buttonText']);
$out .= "<button type='button' data-href='$downloadUrl' data-buttons='button'>$buttonText</button>";

[bernhard]

Cool @AndZyk do you have a screenshot?

[Jan Romero]

I do:

Added "download" to the labels array at the top, and "class='$modalButtonClass'" to the button.

This still requires several clicks, though. First, unless you’re already in the list view, you have to open the image to see the button, then the button will just open a lightbox where you can right click -> save as (you can’t do it on the button because it’s a button element).

[bernhard]

30 minutes ago, AndZyk said:

Because it is not a common option for everyone and the risk would be, that you download the file by accident if it is a button inside the image.

I could sleep well with that risk ? 

31 minutes ago, AndZyk said:

Also you wouldn't have to change the SCSS file.

That would be great in terms of getting the PR done but not great for learning how to properly do PRs that need changes to the admins CSS ? 

17 minutes ago, Jan Romero said:

Thx! I'm not sure, but are those buttons visible to everyone? I think the user needs permissions for them? Obviously for superusers they'd always be visible but I think as soon as a user is allowed to upload an image he/she should also be able to download it ? 

Thx everyone for the help/input!! ? 

[AndZyk]

The code before was just a wild guess. But I have now tried it and it could work like this:

// Add the download label to $this->labels

// Somewhere at the beginning of ___renderButtons()

$downloadUrl = $pagefile->url;

// In ___renderButtons() for example after variations

// Download
$buttonText = "<i class='fa fa-download'></i> $labels[download]";
$buttonText = str_replace('{out}', $buttonText, $this->themeSettings['buttonText']);
$out .= "<a class='$buttonClass' href='$downloadUrl' download>$buttonText</a>";

Here is a screenshot:

If you make it to a link styled like a button and add the download attribute, there is no need to open a modal and it would download the file with just one click.

[Jan Romero]

I’ve made a different wild guess https://github.com/JanRomero/processwire/commit/1641e1681ae20fb01ca0ec3568da0832fb3337b1

It’s messed up because my editor uses spaces by default and PW uses tabs, also I did it on the master branch because I’m an idiot, but whatever. Works okay, looks like this:

And this is the list view:

 

I would not merge this though ?

 

Edit: oh yeah because it uses an <a> inside the <label> you have to hit the icon quite precisely, even though the cursor changes over the whole label. Well, I don’t mess with SCSS…

@bernhard Thanks for the like, finally I’m a hero member ? Took me long enough

[bernhard]

56 minutes ago, Jan Romero said:

It’s messed up because my editor uses spaces by default and PW uses tabs, also I did it on the master branch because I’m an idiot, but whatever. Works okay, looks like this:

That happens to the best ? Regarding the editor: @gebeer showed me how he uses vscode prettier to format his code PSR12 compliant automatically on save. I'm using that now for all my work and that obviously messes up with all the core files, which is really annoying when working on PRs for code of others. Also @dotnetic and I had similar issues on his PRs for my modules. Turning off this magic in my IDE everytime I work on 3rd party files is not an option though. And if you forget it, then you are pissed! Because you'll have a totally reformatted file and the "undo" feature does not help you because you need to save the file after undo, which will apply the changes again (unless you really change all the auto-formatting stuff which will be stored in many places eventually).

The solution: I've downloaded Atom solely for editing 3rd party files. Without any magic applied. Without it changing spaces/tabs etc. Works great! I can edit files in atom and see the changes in VSCode and can then commit the changed files easily ? Maybe that workflow might be helpful for others as well.

1 hour ago, Jan Romero said:

@bernhard Thanks for the like, finally I’m a hero member ? Took me long enough

You've been a hero member for me for a long time ? 

I like that screenshots @Jan Romero so is anything missing for a proper PR?

The CSS is updated manually because I try not to mess with stuff that needs build steps.

Same here. But I have an idea...

[Jan Romero]

9 minutes ago, bernhard said:

is anything missing for a proper PR?

Well, I have only tested it with the "Default" admin theme (is that even still the default or new installations?) and only in Firefox. Also, while I doubt the CSS changes have any unintended consequences, it would be cleaner to refactor the gridImage__trash class to something more generic. I guess just renaming it would suffice for a start, but it clearly wasn’t made to hold a simple link.

20 minutes ago, bernhard said:

You've been a hero member for me for a long time ? 

You’re too kind ?

[bernhard]

30 minutes ago, Jan Romero said:

Well, I have only tested it with the "Default" admin theme (is that even still the default or new installations?) and only in Firefox. Also, while I doubt the CSS changes have any unintended consequences, it would be cleaner to refactor the gridImage__trash class to something more generic. I guess just renaming it would suffice for a start, but it clearly wasn’t made to hold a simple link.

Would be great if anybody could tackle this. Meanwhile I've created a new module that does the SCSS compiling on the fly ?

Scss

Module to compile CSS from SCSS

Watch core files

When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php

$modules->get('Scss')->watchCore();

Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes ?

[bernhard]

Update: Seems that the compiled CSS has a culprit:

.gridImage:hover labelself__trash:hover{display:block;color:#e83561;background-color:white}.gridImage__edit

Any ideas why it compiles to "labelself" ?? Is that an issue with the compiler? Can we modify the SCSS to fix this?

[bernhard]

Hey @Jan Romero and @AndZyk what is missing for a proper PR? I don't want to forget about that necessary feature ? 

[AndZyk]

Hey @bernhard, I have not tested @Jan Romero solution, but it seems like a nice solution for this feature. ?

The only thing that could be changed is to use an own CSS class name for the download icon, so it would be cleaner.

Also I am still unsure, wether this feature is so important for everyone, that it has to be next to the trash icon. But that is something @ryan has to decide.

Regards, Andreas

[Jan Romero]

On 10/29/2022 at 4:36 PM, bernhard said:

Hey @Jan Romero and @AndZyk what is missing for a proper PR? I don't want to forget about that necessary feature ? 

If you can believe it, I could have really used that feature just this saturday, when I had to downlod multiple images with a fiddly laptop touchpad ?

I’ll check out your SASS module (I’ve often wondered why that’s not the predominant way to do it, actually. Sounds awesome!) and get a PR going, but it’s going to be a couple of days.

[bernhard]

Ping @Jan Romero maybe something for Christmas? ? 

[adrian]

Have you looked at how it's done in AOS? https://github.com/rolandtoth/AdminOnSteroids/blob/2e8f9c56dbc0d05edcb203d7dcf9af31eb862b02/AdminOnSteroids.module#L1159

[bernhard]

@adrian don't you think that this should be part of the core? That's why I'd prefer a PR over some hooks that may break at some time (AOS is a good example for that).

[adrian]

48 minutes ago, bernhard said:

@adrian don't you think that this should be part of the core? That's why I'd prefer a PR over some hooks that may break at some time (AOS is a good example for that).

Absolutely - I was just thinking that the code for this feature that is in AOS might be useful in preparing the PR for the core.

[Jan Romero]

On 12/10/2022 at 12:56 PM, bernhard said:

Ping @Jan Romero maybe something for Christmas? ? 

Sorry for the delay, I’ve posted the PR here: https://github.com/processwire/processwire/pull/251

Since it simply uses an anchor tag with a download attribute, it also allows you to open the full-size image in a new tab using a middle click or “open in new tab”, which is just the behaviour I would expect and seems pretty useful.

Your SCSS module is amazing! Unfortunately SCSSPHP doesn’t seem to do exactly what Ryan’s setup does, and I suppose the “self” thing is a bug in SCSSPHP, but a great help nonetheless!