Hi,
SOLVED. See next post
------------------------------------------------------------------------------------------------------
inspired by
this thread I'm trying to develop a plugin which lazy loads images in DokuWiki. Problem: my PHP skills are nearly NULL. :-D
Thoughts so far
DokuWiki uses jQuery so I want to use this jQuery lazy load plugin:
http://www.appelsiini.net/projects/lazyload
Problem
All HTML img tags have to be altered to use this.
<img class="media" src="img/example.jpg">
has to be changed to
<img class="media" data-original="img/example.jpg">
As a second step I want to replace
src with a transparent 1x1 px gif. After this is functional I can write the JS to use the above lazy loader.
Ok, I digged through the docs and found out this can be done with a
renderer plugin. I looked at some of them, seems like the easy way is to pick the function you want to manipulate from the original DokuWiki XHTML renderer and replace it with own code.
Lets find the image tags in the original renderer:
https://github.com/splitbrain/dokuwiki/blob/master/inc/parser/xhtml.php
Line 1450, the corresponding function is named
_media beginning on line 1421.
So I copied the whole
_media function to the plugin and replaced the generating of image tags.
Original:
//add image tag
$ret .= '<img src="'.ml($src, array('w' => $width, 'h' => $height, 'cache' => $cache, 'rev'=>$this->_getLastMediaRevisionAt($src))).'"';
$ret .= ' class="media'.$align.'"';
my replacement:
//add image tag
$ret .= '<img src="'.DOKU_BASE.'lib/plugins/lazyload/transparent1x1.gif" data-original="'.ml($src, array('w' => $width, 'h' => $height, 'cache' => $cache, 'rev'=>$this->_getLastMediaRevisionAt($src))).'"';
$ret .= ' class="media'.$align.'"';
This works but not like I expected.
Expectation
An image on the rendered page should look like this:
<img class="media" src="/mywiki/lib/plugins/lazyload/transparent1x1.gif" data-original="/mywiki/lib/exe/fetch.php?w=100&tok=80fa62&media=mynamespace:mypicture.jpg" title="Mypicture" alt="Mypicture" width="100">
What it looks like
<img class="qzgtktcfhucankacawvh" src="/mywiki/lib/plugins/lazyload/transparent1x1.gif" data-original="/mywiki/lib/exe/fetch.php?w=100&tok=80fa62&media=mynamespace:mypicture.jpg" title="Mypicture" alt="Mypicture" width="100">
For reference: this is my
renderer.php:
http://pastebin.com/S4kMd7QR (this pastebin expires in 1 month)
It's just the renderer plugin skeleton and the
_media function from the original renderer replaced with above code.
Questions
Where does this weird class
qzgtktcfhucankacawvh[/m] come from? 8-( Is it the [m]$align[/m] variable? This variable is initialized with [m]=null in the function header so where does this garbage come from.
Why does the transparent gif not load at all? Firefox Web Inspector only says "The image could not be loaded". The generated path is correct, i can load it while manually pasting its adress.
Any insight from a PHP guru would be greatly appreciated. I hope I'm on the right track and just overlooked something...
Thanks in advance! :-)