Forum
Assets - Performance, SVG Handling
Hey,
I know it sounds like a bang on about Perch's weak points, but it's only because I want Perch to be the best experience in content editing.
One of my biggest issues with Perch as it stands is the handling of assets, and this has been one of the main points when getting feedback from Perch users. Going into a bit more detail:
SVG handling,
Warning: Division by zero in /admin/core/lib/PerchImage.class.php on line 107. This is a common error when SVG's don't have a width and height, I know they should, but often files downloaded from stock sites, brand logo downloads often don't, and the above error occurs. If you can't do anything with the sizing, that's fine, but if you could present the error as a Perch styled 'warning', that would be great. My users find it a concern when the see scary PHP errors, so if we could reduce them where possible (I know it's difficult across hosting platforms).SVG display, when using SVG's with a large width and height, they take over the content editing experience. I found a simple CSS fix adding a min, max width would make sure SVG's with no width did display to a small size, and that SVG's width really large widths were controlled. Users were often worried the images wouldn't work, or felt like they had broken Perch. I added a CSS snippet like so:
.asset-badge-thumb img {
max-width: 200px;
min-width: 64px;
}
Performance, this is one of the major requests I get. When clicking 'select and upload image', it can often take 3-4 seconds before something even appears. I know this can be quite dependent on hosting, but adding provisions and improving performance where you can, would be great. I think if the modal could show, and some sort of lazy load spinner shown, this would greatly improve the user experience. Users would often click several times, which 'toggled' the modal and would hide as soon as it had loaded, which is quite frustrating for them.
And lastly, display of assets. Once the modal has loaded, quite often images take over the display, often quite wide. It makes browsing assets super difficult and unintuitive, as well as quite ugly as sometimes the images are blown up and are super blurry, in which users felt that's what it would look like on the site. I found that users would much prefer a simple grid of thumbnails that are cropped.
Any questions, or if you need further clarification, please don't hesitate to ask.
If there's one common complaint I get from users (if any I hasten to add) is the assets modal interface. I too would welcome a return of a regular grid for assets.
The asset grid is a more complex issue that perhaps is obvious at a glance. One of the biggest complaints we had with the Perch 2 asset grid was that you couldn't tell when an asset was landscape, portrait, or square because they were all cropped square. This made the display neat and tidy, at the sacrifice of usability. We had customers telling us that their clients wouldn't use the software because of this.
The current grid attempts to show thumbnails without cropping, but scales them to prevent an untidy mess. Basically you're suggesting a solution which is the problem this grid was designed to avoid.
If images were never scaled up, but instead contained in a bounding box that scaled up to fit the space, would that work for you?
Yeah, these things always are Drew! Completely understand.
I think that would be a much better solution than what we have currently, for sure. I think a good solution might be to contain each asset within a box and then let the image keep its ratio with a max width/height, like my very rudimentary mockup:
https://www.dropbox.com/s/ms1a2zfq8sp37i3/Screenshot%202018-11-14%20at%2014.42.37.png?dl=0
Do you have any example SVG files that aren't displaying correctly that I could test with?
I would also love to see the thumbnails not cropped as previously, but floating in a uniformly sized box as per Ryan's diagram. Perhaps the thumbnail container size (or column count) could also be set in core settings to add some granular control over the default settings?
Here's two I've used recently:
https://www.dropbox.com/s/qovkyssiuqxbmev/freeagent-logo.svg?dl=0 - no width, doesn't display https://www.dropbox.com/s/z8xhhxb9msy06ak/Xero_software_logo.svg?dl=0 - quite large SVG width from the download from their site, so is quite big!
Hope that helps.
Thanks, that does help. Those are now working in my dev build, so should be good for the next release.
Thanks, Drew. Really appreciated!
For performance, I could certainly sink time into micro-optimising the front end code, but I suspect the delay is the server, not the client.
What's the TTFB for your main
/perch/core/apps/assets/page? If that's slow then opening the model is going to be slow. But it shouldn't be slow.442ms TTFB for that page, but that is working off a shared hosting platform.
I definitely know it's hosting specific as some sites are better than others. I just feel the asset experience would be a lot better if the click action was instant, and the wait was within the modal, even at shorter load times.
Do appreciate that would be a time sink! I do feel it would help in a lot of instances where clients are on cheaper hosting solutions where it may not be instant, or if users are on slower network connections (a lot of my clients over the past few years still don't have access to fibre). There is also a bit of a flicker on modal load when the modal has just opened, something super minor but something that just makes it feel slightly less slick (very very nitpicky, minor issue, not one I expected to be given massive attention).
I do agree, it's a nice to have rather than an essential. It's just the feedback I've received so thought I'd pass along.