Dokumentation zum Plug-In “metapicture”

Ein Bild mit einer Breite von 300 Pixel einfügen.

<figure>
	<img
	style="width: 300px;"
	src="PATH/TO/FILE/image.jpg"
	alt="Blume"
	/>
</figure>

Ein Bild mit einer Breite von 300 Pixel einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen.

<figure>
	<img
	class="image-rounded image-shadow"
	style="width: 300px;"
	src="PATH/TO/FILE/image.jpg"
	alt="Blume"
	/>
</figure>

Ein Bild linksbündig mit einer Breite von 300 Pixel und umfließenden Text einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<figure class="figure-float-left">
	<img
	class="image-rounded image-shadow"
	style="width: 300px;"
	src="PATH/TO/FILE/image.jpg"
	alt="Blume"
	/>
</figure>

Ein Bild linksbündig mit einer Breite von 300 Pixel und umfließenden Text einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen.

<figure class="figure-float-left">
	<a class="lightbox" href="PATH/TO/FILE/image.jpg">
		<img
		class="image-rounded image-shadow"
		style="width: 300px;"
		src="PATH/TO/FILE/image.jpg"
		alt="Blume"
		/>
	</a>
</figure>

Ein Bild rechtsbündig mit einer Breite von 300 Pixel und umfließenden Text einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen.

<figure class="figure-float-right">
	<a class="lightbox" href="PATH/TO/FILE/image.jpg">
		<img
		class="image-rounded image-shadow"
		style="width: 300px;"
		src="PATH/TO/FILE/image.jpg"
		alt="Blume"
		/>
	</a>
</figure>

Ein Bild rechtsbündig mit einer Breite von 300 Pixel und umfließenden Text einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen. Eine Bildbeschreibung anzeigen.

<figure class="figure-float-right">
	<a class="lightbox" href="PATH/TO/FILE/image.jpg">
		<img
		class="image-rounded image-shadow"
		style="width: 300px;"
		src="PATH/TO/FILE/image.jpg"
		alt="Blume"
		/>
	</a>
	<figcaption>Eine Blume</figcaption>
</figure>

Mehrere Bilder rechts- und linksbündig mit einer Breite von jeweils 250 Pixel und umfließenden Text einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen. Eine Bildbeschreibung anzeigen. In der Lightbox kann zwichen den Bildern gewechselt werden.

<figure class="figure-float-right">
	<a class="lightbox" href="PATH/TO/FILE/image_1.jpg" rel="IDENTIFIER">
		<img
		class="image-rounded image-shadow"
		style="width: 250px;"
		src="PATH/TO/FILE/image_1.jpg"
		alt="Blume"
		/>
	</a>
	<figcaption>Eine Blume</figcaption>
</figure>
 
<figure class="figure-float-left">
	<a class="lightbox" href="PATH/TO/FILE/image_2.jpg" rel="IDENTIFIER">
		<img
		class="image-rounded image-shadow"
		style="width: 250px;"
		src="PATH/TO/FILE/image_2.jpg"
		alt="Blume"
		/>
	</a>
	<figcaption>Noch eine Blume</figcaption>
</figure>
 
<figure class="figure-float-right">
	<a class="lightbox" href="PATH/TO/FILE/image_3.jpg" rel="IDENTIFIER">
		<img
		class="image-rounded image-shadow"
		style="width: 250px;"
		src="PATH/TO/FILE/image_3.jpg"
		alt="Blume"
		/>
	</a>
	<figcaption>Eine weitere Blume</figcaption>
</figure>

Ein Bild zentriert mit einer Breite von 300 Pixel einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen.

<figure class="figure-center">
	<a class="lightbox" href="PATH/TO/FILE/image.jpg">
		<img
		class="image-rounded image-shadow"
		style="width: 300px;"
		src="PATH/TO/FILE/image.jpg"
		alt="Blume"
		/>
	</a>
</figure>

Ein Bild zentriert mit einer Breite von 300 Pixel einfügen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Das Bild als Link zu einer vergrößerten Ansicht nutzen. Eine Bildbeschreibung anzeigen.

<figure class="figure-center">
	<a class="lightbox" href="PATH/TO/FILE/image.jpg">
		<img
		class="image-rounded image-shadow"
		style="width: 300px;"
		src="PATH/TO/FILE/image.jpg"
		alt="Blume"
		/>
	</a>
	<figcaption>Eine Blume</figcaption>
</figure>

Ein zufälliges Bild aus einem Ordner mit einer Breite von 500 Pixel zentriert einfügen. Das Bild als Link zu einer vergrößerten Ansicht nutzen. Eine Bildbeschreibung anzeigen.

[show_random_image
	figcaption="Beschreibung"
	src="PATH/TO/FILES/"
	class="image-rounded image-shadow figure-center"
	style="width:500px;"
]

Eine Bildergalerie aus einem Ordner mit einer Breite der Vorschaubilder von 100 Pixel einfügen. Zwischen den Vorschaubildern einen Abstand von 5 Pixel lassen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Die Bilder als Link zu einer vergrößerten Ansicht nutzen.

[show_gallery_images
	src="PATH/TO/FILES/"
	class="image-rounded image-shadow"
	style="width:100px; margin:5px;"
]

Eine Bildergalerie aus einem Ordner mit einer Breite der Vorschaubilder von 100 Pixel einfügen. Zwischen den Vorschaubildern einen Abstand von 5 Pixel lassen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Die Bilder als Link zu einer vergrößerten Ansicht nutzen. Eine Bildbeschreibung anzeigen.

[show_gallery_images
	data-figcaption="Beschreibung"
	src="PATH/TO/FILES/"
	class="image-rounded image-shadow"
	style="width:100px; margin:5px;"
]

Eine Bildergalerie aus einem Ordner mit einer Breite der Vorschaubilder von 100 Pixel einfügen. Zwischen den Vorschaubildern einen Abstand von 5 Pixel lassen. Die Kanten des Bildes abrunden und einen Schlagschatten anzeigen. Die Bilder als Link zu einer vergrößerten Ansicht nutzen. Unabhängig von der Basiseinstellung werden 3 Bilder in der Vorschau anzeigen.

Alle Bilder anzeigen

[show_gallery_images
	number-of-preview-images="3"
	src="PATH/TO/FILES/"
	class="image-rounded image-shadow"
	style="width:100px; margin:5px;"
]