Bug 205406

Summary:	Add Javascript to scaling images in html gallery [patch]
Product:	[Applications] digikam	Reporter:	Pieter Edelman <p.edelman>
Component:	Plugin-Generic-HTMLGallery	Assignee:	Digikam Developers <digikam-bugs-null>
Status:	RESOLVED FIXED
Severity:	wishlist	CC:	agateau, caulier.gilles, kde.107-732-241
Priority:	NOR
Version:	5.5.0
Target Milestone:	---
Platform:	Compiled Sources
OS:	Unspecified
Latest Commit:		Version Fixed In:	7.0.0
Sentry Crash Report:
Attachments:	Javascript functions to scale the photo

Description Pieter Edelman 2009-08-27 22:30:00 UTC

Version: (using Devel)
Installed from: Compiled sources

Images in the HTML export are currently displayed to their actual size. If they need to fit into the image window, the user has to scale them to a size for which (s)he thinks will probably fit into the browser window.

This solution doesn’t feel right to me. First, it is hard to predict what browser size somebody will have (and goes against the spirit of HTML). If too large a value is chosen, the image will be larger than the browser window. If the value is too small, the screen isn’t use optimally. Second, when there are both landscape and portrait (and panorama) images, the maximum size trick doesn't work. Netbooks and widescreens make this even more tricky. See also bug 129902.

So I wrote a small Javascript script that scales photos down (not up) according to the available size in the browser, to make sure all elements are always visible (image, title, next and previous links, etc). It works with all themes and as far as I can tell in all browsers (IE6 and 7, FF3, Chrome, Opera, Konqueror (there’s just a problem when using a frames theme and the Konqueror window is resized)). The image is hidden until it is resized to prevent flickering. Most importantly, it degrades gracefully (if the script doesn’t work, the image is scaled to the normal values).

I think it’s quite a nice script and would be a nice addition to the HTML export plugin. But to prepare a patch, I need to know where I can put it. In a separate theme? In all themes? With a config option?.

Comment 1 Aurelien Gateau 2009-09-05 23:38:17 UTC

Sounds nice!

I suggest putting it in a separate .js file and have the plugin copy this file to the export directory. Since it's Javascript, it's up to the theme author to decide whether it wants to use it or not, because all the html is generated by the theme, not directly by the plugin. If the theme author wants to use it, it will have to include the .js and make use of the javascript functions it provides.

Ideally the .desktop file format could be extended to include a boolean option defining whether the theme uses the .js or not so that the plugin can avoid copying it if it's not used.

Comment 2 Pieter Edelman 2009-09-08 20:53:15 UTC

Created attachment 36799 [details]
Javascript functions to scale the photo

Ok, thanks for the suggestion. Here's the JavaScript file. To use it, the theme author has to do the following:
- The main image needs to get an id of "mainImg".
- The main image needs to set scalePhoto() as its onLoad handler.
- The height property should be removed from the main image.
- Ideally, the main image needs to set its width to 100% (so that it also produces a reasonable result when the script doesn't work).

So a typical declaration for the main image in the HTML file would be: <img src="photo.jpeg" id="mainImg" width="100%" onLoad="scalePhoto()">

That's all.

Comment 3 Aurelien Gateau 2009-09-10 09:22:11 UTC

Thanks, will have a look at it (be aware that my TODO list is quite large, so it may take some time)

Comment 4 caulier.gilles 2011-12-22 15:36:38 UTC

There is a patch from Pieter in this file...

Gilles Caulier

Comment 5 caulier.gilles 2011-12-22 15:39:36 UTC

Pieter,

Can you update your patch agaianst git/master please ?

Gilles Caulier

Comment 6 Bob 2019-11-25 19:15:31 UTC

Several of the themes available with the HTML gallery tool (as of digiKam 6.3.0) already support JavaScript widgets which display the large image so that it is scaled to fit the screen.

Additionally, I've just created a new theme "HTML5 Responsive" which uses responsive HTML5 and CSS3 styling so that neither the thumbnails nor the large images will exceed the width of the screen, making it suitable for use on desktop and mobile devices. Take a look:

https://gitlab.com/Bobulous/digikam-html5-gallery-theme

For these reasons I'm marking this request as resolved.