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

[3.4] Images in Control Panel entries are cropped to a circle, obfuscating aspect ratio and full image content #5518

Closed
andreimoment opened this issue Jan 28, 2020 · 32 comments
Labels
assets 📁 features related to asset management enhancement improvements to existing features ux 😄 features related to user experience

Comments

@andreimoment
Copy link

andreimoment commented Jan 28, 2020

Description

Prior to 3.4, images in CP entries were presented as a miniature version of the full image. This allows seeing the aspect ration and visually recognizing the image content, being able to know what the image is at a glance.

In 3.4, this was changed. Now all image assets appear cropped as a circle, which makes it impossible to see the aspect ratio and the content of the full image. This obfuscates useful information and makes it necessary to now double click the asset to open the image edit window in order to obtain this information which was previously available effortlessly, at a glimpse.

Please revert to the pre 3.4 behavior so that the asset content and aspect ratio are visible.

Example: 3.3 asset in a control panel entry: represents the full image

craft-3 3--image-is-visible

Example: 3.4 asset in a control panel entry: cropped to a circle.

craft-3 4--image-is-cropped

It is now necessary to double-click the asset in order to see the image aspect ration and content.

craft-3 4--user-needs-to-open-for-editing-in-order-to-inspect-the-image

Steps to reproduce

  1. Upgrade to CraftCMS 3.4
  2. Re-save assets (./craft resave/entries --update-search-index)

Additional info

  • Craft version: 3.4
  • PHP version: 7.3.9
  • Database driver & version:
  • Plugins & versions: none related to images
@brandonkelly brandonkelly added assets 📁 features related to asset management enhancement improvements to existing features ux 😄 features related to user experience labels Jan 28, 2020
@adrienne
Copy link

+1 because i also completely hate this change and it removes useful at-a-glance info. Maybe it could be a configurable setting, at least?

@andreimoment
Copy link
Author

andreimoment commented Jan 28, 2020

Yes, please consider reverting this or making it an option. Images are also cropped in the asset selection screen which makes them near impossible to identify. Imagine this list with 1500+ images with less-than-perfect naming and a busy office manager trying to navigate to the correct one :(

asset-selection-screen--image-crop

@aelvan
Copy link

aelvan commented Jan 28, 2020

It is now necessary to double-click the asset in order to see the image aspect ration and content.

@andreimoment Interesting, I don't even see the correct aspect ratio there, as described in #5515

@andreimoment
Copy link
Author

andreimoment commented Jan 28, 2020

@aelvan I do see the regular image edit popup when clicking on the asset in the entry. In my case it is a single asset allowed per entry.

image-asset-now-cropped-in-circle--with-edit-popup

@darylknight
Copy link

+1. It looks fancy, but it's less useful. Please add a config setting for this or remove it.

@dubcanada
Copy link

I personally prefer the more zoomed in thumbnail of the image in a circle.

The image is small enough to really not make out any difference between them anyways, so this is only an issue if you have a variety of images with different sizes that you are trying to find a specific one. All other instances the zoomed in circle will provide more detail (assuming the image detail is not on the edges).

My preference is config setting.

@andreimoment
Copy link
Author

andreimoment commented Jan 29, 2020

I won't be able to upgrade until this is resolved, because it removes the ability of my clients to select images visually. Our image library has many abstract images in multiple crops and this makes it practically impossible to visually determine which one is which, both in the selector, and in the entry. Many of the images are banners, and the crop eliminates crucial cues on aspect ratio and the ability to see the full image at a glance.

@MattWilcox
Copy link

It'd be nice if there was a way to default asset buckets to thumbnail view for clients too. Doesn't suit all buckets and clients, but it does for others. Either way though - never re-crop or otherwise obfuscate source images in an asset picker UI.

@matthillco
Copy link

matthillco commented Jan 31, 2020

In addition, the grid asset view now crops images to squares which is also less useful. I often need to know the ratio of the source image when selecting it, now I have no idea which images have which ratio.

I work with a lot of mixed ratio imagery, and these collective changes have made image viewing and selection much worse and I'd appreciate a way of reverting to the previous style.

@brandonkelly brandonkelly added this to the 3.5 milestone Feb 3, 2020
@andreimoment
Copy link
Author

@brandonkelly any idea on rough timing for 3.5? This issue is what will block my clients upgrades' and it would be helpful to know.

Or, do you think a workaround would be possible via admin section CSS customization?

Is the crop done server-side?

@brandonkelly
Copy link
Member

We’re working on it now. You should be able to get on a 3.5 branch with something in place to resolve this issue in the next couple weeks.

@aelvan
Copy link

aelvan commented Feb 4, 2020

I created a small plugin which fixes this while we wait for 3.5:
https://github.com/aelvan/more-fit-images

@matthillco
Copy link

Thank you very much @aelvan, this works perfectly for me. Great job.

@ryanmasuga
Copy link

We were discussing the rounded (not just rounded... but full on circular) thumbs today and I'm glad we found this thread so we didn't have to start one. +100 for at least making this configurable, otherwise it's just hiding/manipulating /having fun with the content, which is more the job of a social media platform (like infinite scrolling!), not a CMS.

Perhaps @dubcanada has never worked on a site with 1000's of images with "less-than-perfect naming and a busy office manager trying to navigate to the correct one" as @andreimoment and we both have. But we can all agree: make this configurable at least.

( I think there is way too much rounding of things in 3.4 overall, but I'll settle for solving this one).

@ryanmasuga
Copy link

If @aelvan can solve this with a plugin in a day, why do we have to wait for 3.5 release? (I'm sure there's something I don't know, but with the breakneck pace Craft updates are kicked out, and the seemingly small amount of CSS needed to fix, this feels like it could go out in a minor release)

@matthillco
Copy link

Unfortunately it's not just a CSS problem. Under the hood, Craft now crops all dashboard asset thumbnails to squares. It was a design decision, and the plugin fixes it by replicating the previous behaviour to leave images in their natural ratio.

@brandonkelly
Copy link
Member

I’ve adjusted the large image thumbnails and preview thumbs for Craft 3.5, to use the real image aspect ratio (see #5515 (comment)). Going to leave the table view / small thumbnails as-is though, as I think with such a small image, being able to make out some detail of the image is more important than knowing the aspect ratio.

@proimage
Copy link

"Going to leave the table view / small thumbnails as-is though" — could you make this a per-volume setting? I just spent 5 minutes trying to find an image for a header that wasn't natively circular, only to realize that they were all being rendered as such. :-/

It's all fine and dandy to force-crop avatar-esque images to be circular and mess with their aspect ratios when they're being presented decoratively (i.e. in a website frontend), but it's really not ok to do in a backend interface used to manage said images. Form follows function, and this is putting that the other way around.

Suggestion: display those small thumbs as they were in 3.3, with their native aspect ratio and no CSS-based cropping, as the default view. Then if you want, show a zoomed-in crop of the image on mouse-over.

@dubcanada
Copy link

Having two crops for every image is not an option. If you don't like the current setup there is a plugin posted above which fixes it.

There does seem to be a lot of angry people complaining about this change. They need to understand that there is no single solution, it may be that the 4-5 people angry in this thread are the only people complaining about it and the other 1000's like it better. I'm not saying it is, it's just something to keep in mind.

I think in the long term a setting would probably be best.

@ryanmasuga
Copy link

Going to leave the table view / small thumbnails as-is though, as I think with such a small image, being able to make out some detail of the image is more important than knowing the aspect ratio.

I would think that a square (or even slightly rounded square) would make more sense than a circle if showing more detail is the important thing. Why hide any of it?

@brandonkelly brandonkelly reopened this Mar 17, 2020
brandonkelly added a commit that referenced this issue Mar 17, 2020
@proimage
Copy link

Having two crops for every image is not an option.

You don't need two separate crops; you just need the slightly larger one that's big enough for the zoomed-in view. Then you use CSS to manipulate it to display how you want it (smaller) in the non-mouseover view.

@brandonkelly
Copy link
Member

@ryanmasuga Fair point. I just implemented that and personally don’t care for it, but went ahead and made it a user preference for Craft 3.5.

An Assets field with an image selected, with a non-rounded icon

@andreimoment
Copy link
Author

andreimoment commented Mar 19, 2020

@brandonkelly thank you for the work on this.

I am still not sure if the final change resolves the issue and reverts the forced crop on assets in the CP?

The issue as submitted targets the sudden loss of the ability to see the full image and thus determine its aspect ratio and full content.

Do all images in the CP have their full content and aspect ratio fully visible?

None of my clients have ever expressed the need to see cropped/scaled assets in the CP. All of my clients were confused and hindered by the inability to select the correct image which came from this change.

Thank you.

@proimage
Copy link

Sorry @brandonkelly, but I really gotta second @andreimoment in this. It's the backend; we're looking to manage assets efficiently. This means making the differences between one asset and the next as obvious as it can reasonably be. When they all have a uniform appearance, that eradicates those crucial differences and makes things needlessly confusing.

Please don't get me wrong—I love the effort and care you all put in to making Craft a beautiful system to look at as well as use. It's a joy to show the backend to clients and hear their remarks about how clean and straightforward everything is. It's just that in this case, that beautification interferes with the functionality.

To be fair, I've certainly had clients and websites whose asset structure is a sufficiently organized that this change would not be problematic. They are the kind of sites where all the assets in a particular volume always have a specific aspect ratio, and there's no chance of accidentally selecting a portrait asset when you really really needed a landscape one instead.

However, I've also had (still have TBH) clients that have all their images in one single volume (not to mention horrific naming conventions for those images), which is where this kind of change makes things very difficult.

Please, make this a per-volume (or perhaps even per-Asset field) setting at the very least.

@brandonkelly
Copy link
Member

I think you guys maybe missed #5515 (comment). If you are trying to identify an image primarily by its thumbnail, then you should be using the thumbnail view, and as of 3.5 that will show the correct aspect ratio.

@proimage
Copy link

Whoops, yes, I had missed that indeed. 👍

The last bit that's got me tilting my head is those rounded corners. I'd guess quite a few of us would have clients that "hardcode" various "frames" into their images, rounded corners among them. The CSS-based rounded corners would then make it difficult to discern between the hard-coded ones and the sharp-cornered ones (I'm getting BSG 2003 flashbacks here...). I'm wondering if a reasonable solution would be to transition the thumbnails to border-radius: 0 on mouseover...?

@brandonkelly
Copy link
Member

@proimage sounds like an easy thing to add with the CP CSS plugin if you feel strongly about it :)

@leevigraham
Copy link
Contributor

@brandonkelly Is there anyway to make this is a system wide config?

brandonkelly added a commit that referenced this issue May 18, 2020
@brandonkelly
Copy link
Member

I changed my mind on how we should be handling small thumbnails. Showing them at the correct aspect ratio isn’t really the end of the world. So I was able to implement the change for 3.4 with significantly less work than what I had done on the 3.5 branch. Will be in the next 3.4 release.

To get the fix early, change your craftcms/cms requirement in composer.json to:

"require": {
  "craftcms/cms": "dev-develop#8f6e9e8945d4df9627f0237dd47b0e66e4d52541 as 3.4.20",
  "...": "..."
}

Or if you’re already running Craft 3.5 Beta, then change your craftcms/cms requirement to "3.5.x-dev".

Then run composer update.

@brandonkelly brandonkelly removed this from the 3.5 milestone May 20, 2020
@brandonkelly
Copy link
Member

Craft 3.4.21 is out now with this change.

@darylknight
Copy link

darylknight commented May 29, 2020

This is a hundred times better, thank you!

3.4.20
image

3.4.21
image

@andreimoment
Copy link
Author

@brandonkelly thank you for staying with this issue, for working with us, and for being as open-minded as you are.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
assets 📁 features related to asset management enhancement improvements to existing features ux 😄 features related to user experience
Projects
None yet
Development

No branches or pull requests