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?.
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.
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.
Thanks, will have a look at it (be aware that my TODO list is quite large, so it may take some time)
There is a patch from Pieter in this file... Gilles Caulier
Pieter, Can you update your patch agaianst git/master please ? Gilles Caulier
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.