von Patrick Gundlach |

Feature der Woche: Bilderleiste

Diese Woche gibt ein unscheinbares Feature: man kann mit sd:aspectratio(<Dateiname>) das Seitenverhältnis eines Bildes ermitteln. Das kann man sich zu nutze machen, wenn man eine Bilderstrecke so aufteilen möchte, dass alle Bilder mit derselben Höhe dargestellt werden. Die Breite der Bilder soll aber variabel sein. Ich zeige erst einmal, wie es aussehen könnte:

Mehrere Bilder in unterschiedlichen Seitenverhältnissen

Die Datendatei hierzu könnte wie folgt aussehen:

<Images>
    <Image filename="1220084-Bel_m-Lisbon.jpg"/>
    <Image filename="HieronymusKlosterSuedportal_Lisbon.jpg"/>
    <Image filename="CentroCulturaldeBelem.jpg"/>
    <Image filename="Downtown_Lisbon.jpg" />
</Images>

(Die Bilder sind aus dem Wikitravel Eintrag von Lissabon)

Die Datei layout.xml ist auch recht einfach aufgebaut:

<Layout xmlns="urn:speedata.de:2009/publisher/en"
    xmlns:sd="urn:speedata:2009/publisher/functions/en">

    <!-- Textbreite in mm -->
    <SetVariable variable="innerwd" select="160"/>

    <!-- 20mm ist der voreingestellte Rand -->
    <Pageformat width="{$innerwd + 20}mm" height="200mm"/>

    <Record element="Images">
        <!-- Lücke zwischen den Bildern in mm -->
        <SetVariable variable="gap" select="1"/>

        <SetVariable variable="sumratio" select="0"/>
        <ForAll select="Image">
            <SetVariable
                 variable="sumratio"
                 select="$sumratio + sd:aspectratio(@filename)"/>
        </ForAll>

        <!-- in mm -->
        <SetVariable
             variable="maxwd"
             select=" ( $innerwd -  $gap * ( count(Image) - 1)  ) div $sumratio"/>
        <PlaceObject>
            <Table columndistance="{$gap}mm">
                <Tr>
                    <ForAll select="Image">
                        <Td align="center">
                            <Image
                                width="{$maxwd * sd:aspectratio(@filename) }mm"
                                file="{@filename}"
                            />
                        </Td>
                    </ForAll>
                </Tr>
            </Table>
        </PlaceObject>
    </Record>
</Layout>

Im Prinzip werden erst die Seitenverhältnisse addiert, um zu wissen, wie die Textbreite (innerwd) aufgeteilt werden muss. Abgezogen werden muss natürlich die Breite der Zwischenräume (Anzahl der Bilder - 1 × Breite des Zwischenraums). Nicht so schwierig, wenn man ein wenig herum rechnet.

Anschließend werden die Bilder in einer Tabelle dargestellt, jedes Bild in einer eigenen Zelle und mit dem zuvor errechneten Anteil an der Gesamtbreite.

Man kann das ganze jetzt noch ein wenig »aufhübschen«, wobei man darüber streiten kann, ob es wirklich schöner ist: man gibt den Bildern »runde Ecken«. Das geht, in dem man das Image in ein Frame einbettet:

<Td align="center">
    <Frame
        rulewidth="0mm"
        border-bottom-left-radius="2mm"
        border-bottom-right-radius="2mm"
        border-top-left-radius="2mm"
        border-top-right-radius="2mm">
        <Image width="{$maxwd * sd:aspectratio(@filename) }mm" file="{@filename}"/>
    </Frame>
</Td>

Das Ergebnis ist dann

Mehrere Bilder in unterschiedlichen Seitenverhältnissen, dieses Mal mit abgerundeten Ecken.

Das funktioniert für eine beliebige Anzahl Bilder, wobei man den Spezialfall »0 Bilder« berücksichtigen müsste.

In der Serie »Feature der Woche« beschreibe ich jeden Montag mehr oder weniger nützliche Eigenschaften des Publishers. Kommentare gerne an mich per E-Mail oder einfach im Kommentarfeld.