====== 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:

sondern solche:

Dies geht auch mit externen Bild-URL. {{keywords>responsive bilder}} {{tag>dokuwiki hack responsiv bilder}} //Dieser Artikel ist publiziert unter: {{license>by-nc-sa,small}}//