Dieser Artikel demonstriert die neue Bild-Partial-Funktionalität mit dem jinja2content-Plugin.
Einführung
Willkommen zu diesem Testartikel, in dem wir das flexible Bild-Partial-System vorstellen. Die Vorlage partial_image.html ermöglicht es uns, Bilder mit verschiedenen Positionierungs- und Größenoptionen direkt in unseren Markdown-Inhalt einzubinden.
Left-Floated Image Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Vestibulum hendrerit fermentum sem vitae lacinia. Curabitur lacinia nunc non metus semper posuere. Nunc sit amet tellus vitae purus porta lacinia. Donec ullamcorper, felis vitae vehicula eleifend, lectus ipsum consectetur felis, a molestie lectus augue eu nunc.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Integer at consectetur lacus. Donec molestie, odio eget molestie ultricies, eros odio tempor elit, quis ultricies eros odio eget quam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Right-Floated Image Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Vestibulum hendrerit fermentum sem vitae lacinia. Curabitur lacinia nunc non metus semper posuere. Nunc sit amet tellus vitae purus porta lacinia. Donec ullamcorper, felis vitae vehicula eleifend, lectus ipsum consectetur felis, a molestie lectus augue eu nunc.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Integer at consectetur lacus. Donec molestie, odio eget molestie ultricies, eros odio tempor elit, quis ultricies eros odio eget quam.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
Centered Full-Width Image
Half-Width Centered Image
Conclusion
This demonstrates how the image partial system works seamlessly with the jinja2content plugin. We can now include responsive, styled images with various positioning options directly in our Markdown content while maintaining the clean folder structure.
The images are properly referenced from the article's own images/ directory, and the partial handles all the Tailwind CSS styling automatically. This makes it much easier to create visually appealing articles with proper image placement and responsive design.