I have tested this item ✅ successfully on a6d0ebe

It does what it says. Personally I am not sure about the removal of the delete and the checkbox. Deleting a single image now requires two clicks and not one. (maybe thats a good idea) but the main thing I am not sure about is that the biggest hotspot area is to select the image for deletion. Previously the biggest hotspot area is to preview the image. I think people are more likely to want to preview than to delete

@brianteeman A valid point. I think this solution would be best suited when selecting an image within the media manager popup window (article editor) which currently has no form of highlighting when an image is selected (with the exception of the filename been underlined). The argument then I guess is should selecting/checking an image be consistent throughout Joomla. Although your points are very valid and in this instance selecting/checking an image is not the most common function, I think there is an argument for having the process consistent throughout. Presuming of course we add the same styling to the media manager when accessed from the article editor or an image select field.

@ciar4n just a reminder here: test also the xtd-button images

Thank you @dgt41 Yes I would like to add the same styling to the xtd-button. I will leave that to a separate PR, presuming there is a positive response to the idea :)

If we still want to keep the delete button for each single media item, on hover, we could have the checkbox appear on the top right like it currently does, and have a delete button appear in the top left.

If a checkbox is checked, then it stays visible.

@ciar4n 100% agree whatever is chosen it must be consistent. Completely forgot that currently they are not AND you are absolutely correct that there must be a visible indicator that you have selected a specific image. So I do about turn and change my mind - you have convinced me that this is better although I do like @C-Lodder idea

Ok so I will add a delete option to the top left which will only display on hover and take it from there.

A quick question. There appears to be the following if statement around the delete/select options.. https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_media/views/medialist/tmpl/thumbs_imgs.php#L21

When is an image not possible to delete? And if so, should I also include this statement around the image select so an image can not be selected if it is not possible to delete it?

Image can't be deleted if the user doesn't have permission to delete ;)

So yes, be sure to include this if statement when writing your code.

Ahh that makes sense... thank you :) I'll wrap it around the image select input so.

The latest commit adds a delete option when the thumbs are hovered...

Image1: selected
Image2: hovered
Image3: default

I have tested this item ✅ successfully on a5e737b

Great!!

Now just to add it to the modals (without the delete)

Sorry to be nit-picky, having an OCD day here. In the screenshot you provided, with the delete button, there seems to be more space on the right hand side of the "X" than the left.

In retrospect it is probably best I do all changes (inc. modals) within this PR so I can apply more modular CSS. I'll get some work on it done over the next couple days.

Thank you @C-Lodder Well spotted. Should be ok now.

Might need a small bit of help with some jQuery here. Basically as only one image can be selected at a time within the modal media manager, using the checkbox method as above is not an option. I need to be able to add a class to a thumbnail if it is selected. And then remove that class if another item is selected. I can work with it if the class (eg. 'selected') is added here... https://github.com/joomla/joomla-cms/blob/staging/administrator/components/com_media/views/imageslist/tmpl/default_image.php#L20 or it's containing div. Thank you :)

Don't tell @dgt41 you said "jQuery" :P

I'll fetch this PR when I'm back home and do the JS bit for you.

Ah excellent.. thank you @C-Lodder

Me and adding jqeu.. coughs I mean javascript is a screw up waiting to happen!

There is a JS snippet somewhere that already exists. This basically gets the name of the box selected and sets it as the input value below. Finding this bloody code though....oh... well that another story.

@C-Lodder https://github.com/joomla/joomla-cms/blob/staging/media/media/js/popup-imagemanager.js#L67-L87

@dgt41 - adding console.log('foo') doesn't execute. I need the JS snippet that is called when you click on a media element and the name is appended to the input field.

is there a onclick in the a tag?

@ciar4n replace the method populateFields in media/media/js/popup-imagemanager.js

        /**
         * Called from outside when a file is selected
         *
         * @param   string  file  Relative path to the file.
         *
         * @return  void
         */
        populateFields: function (file)
        {
            $.each($('a.img-preview', $('#imageframe').contents()), function(i, v) {
                if (v.href == "javascript:ImageManager.populateFields('" + file + "')") {
                    $(v, $('#imageframe').contents()).addClass('selected');
                } else {
                    $(v, $('#imageframe').contents()).removeClass('selected');
                }
            });

            $("#f_url").val(image_base_path + file);
        },

@C-Lodder jQuery rulez... ?

Restyle has been added to the xtd-button (article media manager modal)...

Also increased the height of the iframe to accommodate 2 full rows of images.

Thank you @dgt41 Tried this however was unable to get it to function. Possibly due to the nested iframes? @C-Lodder helped me with a solution which is adding the class as needed however if there is reason to use your method, let me know and I will look in to it further.

@ciar4n - are you sure you were adding the code to the minified JS file? If not, I'd suggest copying the uncompressed JS code over to the minified file, make your changes, and when everything is work, re-minify it.

You've also got some CSS conflicts

@C-Lodder Thank you. I never considered the minified JS. I will look in to that later along with the conflicts.

Just curious is there any reason the save and cancel cant be moved in to the footer to match all the other modals?...

That would make sense. It's currently very annoying having to scroll up and down to access everything. The media modal should be much bigger anyway.

is there any reason the save and cancel cant be moved in to the footer to match all the other modals

tinyMCE Modal

@C-Lodder I would have to agree on both counts

@ciar4n please use my code and don't throw inline script! All you have to do is replace the snippet I pasted above in popup-imagemanager.js and then copy all the contents of that file paste it at https://jscompress.com get the minified content and paste it into popup-imagemanager.min.js

@dgt41 Did as you suggested however you will see that the 'selected' class is no longer added to the thumbnails when clicked.

@ciar4n - Try this: $(v, $('#imageframe').contents().find('.thumbnail')).addClass('selected');

If it works, be sure to also add .find('.thumbnail') to the line that removes the class too

Ah no surprise it was my own stupidity at fault. @dgt41 code worked perfectly from the beginning. The problem was a mixture of I loading a cached version of the JS and not adding the JS to the min file.

@dgt41 @C-Lodder Thank you!)

The current commit works fine.. just clear your cache!)

@C-Lodder , @brianteeman , @dgt41
can we have tests here?

Busy at the moment, but will test tonight

@ciar4n check ciar4n#3

I have tested this item ✅ successfully on 00a38f6

Patch changes the behaviour of the presentation in media manager.
However now I see a difference between an image and a folder 'icon'.

In the images and link tab when you select an image there - it is impossible to tell that there is an image upload ability. It wasnt perfect before but now it is worse

Before

After

In this PR I increased the height of this iframe which I can easily revert? My reasoning for changing was so 2 full rows of images would be displayed.

Alternatively we can increase the entire height of the modal. Vertically it does seem rather small.

Another option would be to compress a few of the elements...

Ideally I think these modals could be improved with a change in layout. Considering their content, we should be able to display all options without the double scroll bars.

I am not a designer etc so I dont know the best solution. I just know that with the current change my first thought was that you couldnt upload an image anymore

Perhaps remove that whitespace below the folders and set a max-height.

For this PR i have reverted the height increase of the iframe so it is now as it was before. At some point I might look in to changing the layout in a separate PR.

@brianteeman Thank you. Amended as suggested.

I have tested this item ✅ successfully on a53a6e0

Great stuff

@ciar4n can you please look at the conflicts?
administrator/templates/isis/css/template-rtl.css
administrator/templates/isis/css/template.css
administrator/templates/isis/less/template.less

@jeckodevelopment Done!)

I have tested this item ✅ successfully on efa1574

Unsuccessful test in Isis (not tested anything else for now):
RTL should be adapted by overriding some in template-rtl.less and running generatecss.php

I guess we should have here

.thumbnails .thumbnail input[type="checkbox"] {
    margin: 0;
    opacity: 0.55;
    position: absolute;
    right: 5px; // instead of left!
    top: 5px;
}

and also

.thumbnails .imgPreview a, .thumbnails .imgDetails {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    border-image: none;
    border-radius: 0 3px 0 0; // maybe change this too to 0 0 0 3px
    border-style: solid;
    border-width: 1px 1px 0 0; // maybe change this too to 1px 0 0 1px
    bottom: 0;
    line-height: 26px;
    position: absolute;
    right: 0; // instead of left!
    z-index: 1;
}

to get:

There can be more to do as I have not tested all. For example when using the image editor-xtd, as we have no rtl skin for Tiny, some stuff is inversed.

I have tested this item ? unsuccessfully on efa1574

Thank you @infograf768

RTL alignment issues have now been addressed with the latest commit..

• Image icons positioning mirrored (check, delete, preview)
• RTL image spacing

Any chance you could also look at Hathor? (not only rtl but also size of thumbnails, etc.)

In the mean while I will look at the popovers as they need some care.

Please correct your code for imagelist RTL:
See #13049

@infograf768 Hathor definitely looks like it could do with some TLC in the media manager. I might have a look at it in a separate PR as this one focuses solely on Isis. Will the Hathor template remain as part of Joomla for the foreseeable future?

I never even considered the imagelist in this PR. I presume this restyle could also be applied there (Article -> Images and Links)?

You added a specific one in your PR
https://github.com/joomla/joomla-cms/pull/12643/files#diff-11471511f60cce8c0eaebfcd648d1124

I have not checked if it is different from the existing one.
If it is not, you may not need it at all.

Will the Hathor template remain as part of Joomla for the foreseeable future?

It will indeed until 4.0

You added a specific one in your PR

Ah my mistake.. been a while since I worked on this and would help if I was on the right branch :)

Images aligned correctly in Imagelist (RTL)...

I have tested this item ✅ successfully on 2f0082d

Unsuccesful until imagelist has been updated on the model of #13049

@infograf768 Could you check this for me? imagelist/default.php override should not have been included and has been removed.

Can't apply the PR now with eclipse as #13049 has been merged

I have tested this item ✅ successfully on c6071dd

I have tested this item ✅ successfully on c6071dd

RTC