Image Handling

Ask for help or provide support to other members.
Post Reply
NorfolkGreg
Posts: 58
Joined: Wed Sep 01, 2021 7:50 am

Image Handling

Post by 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!)
User avatar
wiz
Admin
Posts: 700
Joined: Sat Oct 30, 2010 12:23 am

Re: Image Handling

Post by wiz »

Thank you for sharing Greg, much appreciated as it might help other users running into similar challenges.
NorfolkGreg
Posts: 58
Joined: Wed Sep 01, 2021 7:50 am

Re: Image Handling

Post by 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
Developer
Posts: 64
Joined: Tue Mar 16, 2021 3:29 pm

Re: Image Handling

Post by 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
User avatar
wiz
Admin
Posts: 700
Joined: Sat Oct 30, 2010 12:23 am

Re: Image Handling

Post by 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? :)
Post Reply