responsive Bilder-Tags

Dieser Hack ist für Bilder-Tags im xhtml-Renderer, damit Bilder nicht erst dann kleiner skaliert werden wenn sie an die Ränder ihres div-Containers gelangen, sondern schon vorher in einer prozentualen Weite.

Dazu muss die Datei inc/parser/xhtml.php modifiziert werden. Hierzu ist die Funktion _media zu suchen und folgender Code-Abschnitt:

            if ( !is_null($width) )
                $ret .= ' width="'.$this->_xmlEntities($width).'"';
 
            if ( !is_null($height) )
                $ret .= ' height="'.$this->_xmlEntities($height).'"';

muss entsprechend abgeändert und ergänzt werden:

            $trigwsmall = 120;
            $trigwmedium = 420;
            $trigwlarge = 640;
            $trighsmall = 75;
            $trighmedium = 240;
            $trighlarge = 320;
 
/*            if ( !is_null($width) )
                $ret .= ' width="'.$this->_xmlEntities($width).'"';
*/
            if ( !is_null($width) ) {
                if ( $width < $trigwsmall ) {
                    $widthtab = "33%";
                } elseif ( $width >= $trigwsmall && $width <= $trigwmedium ) {
                    $widthtab = "50%";
                } elseif ($width > $trigwmedium && $width <= $trigwlarge) {
                    $widthtab = "75%";
                } else {
                    $widthtab = "100%";
                }
                $ret .= ' width="'.$widthtab.'"';
            }
 
/*            if ( !is_null($height) )
                $ret .= ' height="'.$this->_xmlEntities($height).'"';
*/
            if ( !is_null($height) ) {
                if ( $height < $trighsmall ) {
                    $heighttab = "33%";
                } elseif ( $height >= $trighsmall && $height <= $trighmedium ) {
                    $heighttab = "50%";
                } elseif ($height > $trighmedium && $height <= $trighlarge) {
                    $heighttab = "75%";
                } else {
                    $heighttab = "100%";
                }
                $ret .= ' height="'.$heighttab.'"';
            }
            if ( !is_null($width) || !is_null($height) ) {
                $ret .= ' style="';
                if ( !is_null($width) ) {
                    $ret .= 'max-width: '.$this->_xmlEntities($width).'px;';
                }
                if ( !is_null($height) ) {
                    $ret .= 'max-height: '.$this->_xmlEntities($height).'px;';
                }
                $ret .= '"';
            }

Die letzte Zeile in dem Abschnitt muss bestehen bleiben:

            $ret .= ' />';

Das war es dann schon.

Bei einem Bild-Tag wie:

{{ :bild.png?nolink&200|}}

werden nun nicht mehr Tags wie folgt generiert:

<img src="/_media/bild.png?w=200" class="mediaright" alt="" width="200" />

sondern solche:

<img src="/_media/bild.png?w=200" class="mediaright" alt="" width="50%" style="max-width: 200px;" />

Dies geht auch mit externen Bild-URL.