[SOLVED] Image Handling

[NorfolkGreg]

In this post:
viewtopic.php?p=5799&sid=e789f6c3f43cf6 ... a4aa#p5799 OneManLaptop said:

My main concern right now is the image handling, every other week I have to run behind a client and edit the images they upload, because there's no resizing / resaving happening, so clients are uploading huge images to their site and obviously it kills performance.

I confess I hadn't considered that issue. My "client" (my wife's professional association) is a quasi-legal body and they won't need to add any graphics (except monochrome 200px square portrait shots when new members join). On the site that I'm about to hand over to the member who will be maintaining it once my wife retires at the end of this month, there are a few small decorative images (and I've supplied a few more, currently unused) so the text doesn't become too visually boring.

Once I've documented it as fully as I can I plan to offer a de-personalised version of the template to WonderCMS soon after that.

Because the site is text intensive I use a "div#wrapper" to keep page content to a width of 900px and use this code within my style.css file:

Code: Select all

section.main img.center {
	display: block;
	width: 80%;
	margin: 0 auto;
}
section.main img.right {
	float: right;
	margin-right: 1em;
	max-width: 60%;
}
section.main img.portrait {
	float: right;
	width: 200px;
	height: 200px;
	margin-top: -2em;
	margin-bottom: 0.5em;
	margin-left: 0.5em;
}
@media (max-width:640px) {
	section.main img.right {
		display: block;
		float: none;
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	section.main img.portrait {
		display: block;
		float: none;
		width: 200px;
		margin: 1em auto;
	}
}

As long as my successor doesn't upload too many straight-from-the-camera files rendering the pages should remain reasonably fast and pages shouldn't be corrupted. (I hope! - I haven't tested it fully yet!)

[wiz]

Thank you for sharing Greg, much appreciated as it might help other users running into similar challenges.

[NorfolkGreg]

Actually, I discover it's not so useful!

Up till now I've been moving code across from another site and been copying in standard image code in the form:

Code: Select all

<img class="right" alt="Decorative consultation image" src="data/files/consultation02.jpg">

Now, using Summernote for the first time, I find that the intuitive way to enter an image inserts a massive block of MIME encoded content.

It is possible to get something close to efficient code by copying the URL from the Admin modal's Files page and then inserting that into Summernote's dialogue - but you'll still need to remove the hard-coded image width and height and add the class code to get the effect that I suggested was a simple solution. But that's not something that the target end user for WonderCMS will be up to!

I'll have to have a rethink!

[OneManLaptop]

Hey Wiz, I've finally been able to check the updated image handling and it's a huge step forward. No more mountains of base 64 code clogging up the database, it's great.

The drag and drop works well too, with one caveat. It doesn't appear to know what to do with .webp or .avif files, which are becoming increasingly common.

As you know, my biggest concern is still image compression. How difficult would this be to install and have it work with your current modifications:

https://github.com/frank-lar/summernote ... ompression

[wiz]

Hey OneManLaptop, how's it going?

1. After a quick checkup, it doesn't seem like a lot of effort honestly (although can't say 100%) to enable the compression, I'll double check with Slave. Opened a thread on GitHub: https://github.com/robiso/wondercms/issues/276
2. Regarding the webp or avif, this is trivial and I've opened a GitHub issue and we'll attend to this in the next version of WonderCMS: https://github.com/robiso/wondercms/issues/277

How are you enjoying these new updates?

[wiz]

Marking thread as solved, image compression is now available with latest Summernote update
Alongside with webp and avif file uploads.

https://wondercms.com/news

[OneManLaptop]

Marking thread as solved, image compression is now available with latest Summernote update
Alongside with webp and avif file uploads.

https://wondercms.com/news

You absolute star. Thank you.

Sorry I've been so quiet recently, life has pulled me in some unexpected directions these past months but I should have my head back in the website game from next month. This is going to be such a big help going forward, thank you so much for the awesome work you do in maintaining this CMS and keeping it "kick ass". I've made a small donation to say thank you, wish it could be more and in a few months I hope it can be. Thank you again my friend.

[wiz]

Happy to bring this feature, we know you've been having a huge pain for a longer time with your customers. Woohoo

Note: it only works with the Summernote drag and drop functionality. The traditional file upload doesn't compress the images at all.

Thank you for donation and supporting WonderCMS for all these years .
Since you've been a long time supporter, we've also introduced a "newest donation" on the top of our every wondercms.com page, with a link to your website. Happy to have you up there.

Don't worry about being active or not, as long as you're around and find ways to enjoy WonderCMS, that's already perfect.

Cheers to an amazing 2023! Thanks for being with us.