Hallo Joomlafreunde
Ich möchte mich der Aufgabe widmen, die Artikel-Anreisser auf einer Katagorie-Seite in Masonry-Kacheln auszugeben. Siehe Beispielseite:
Masonry Layout - Cassiopeia Demo
Gerne würde ich den Aufbau im Backend zu ergründen. Frage: Kann man die Daten-Bank beziehen oder einen Login auf die Seite bekommen?
Vielen Dank
Flipper
Das geht leider nicht. Die Seite wird von mir betreut, ich möchte sie aber nicht im Backend öffentlich machen. Masonry Layout ist nur eine Einstellung im Bloglayout und zwar "Multi Column Direction -> Down" (habe es gerade nicht auf Deutsch parat). Was der Effekt auf der Seite erzeugt, sind die Bilder in verschiedenen Größen (und die Texte in verschiedenen Längen).
Hi Viviana
Verstehe, ja, es geht auch ohne DB. Nachfolgend habe ich ein Muster erstellt. Siehe unten. Passt so zum Experimentieren und lernen. Für verschiedene Fenstergrössen ( xl | md | sm ) müssen irgendwie die masonry-x-Klassen definiert werden. Die Klassen definiert masonry-3 masonry-sm-4 masonry-md-5 klappt nicht. Von hier die Anleitung (siehe nachfolgend). Wo muss ich diese Zeile ablegen?
Danke und gute Nacht.
Flipper
<p>masonry-sm-2 masonry-md-3</p>
<main>
<div class="com-content-category-blog blog">
<div class="com-content-category-blog__items blog-items masonry-3 masonry-sm-4 masonry-md-5">
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel01</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus. Diam maecenas sed enim ut sem viverra. Hac habitasse platea dictumst vestibulum.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel02</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel03</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel04</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus. Diam maecenas sed enim ut sem viverra. Hac habitasse platea dictumst vestibulum. At tellus at urna condimentum mattis pellentesque. Condimentum mattis pellentesque id nibh tortor id aliquet. Amet consectetur adipiscing elit ut aliquam purus sit.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel05</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel06</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus. Diam maecenas sed enim ut sem viverra.</p>
</div>
</div>
<div class="com-content-category-blog__item blog-item">
<figure class=" item-image"><img src="images/gladiolus.jpg" loading="lazy" /></figure>
<div class="item-content">
<div class="page-header">
<h2>Titel07</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</main>Ich kann nicht ganz folgen... Das Masonry in Cassiopeia ist nicht Bootstrap. Wenn du Bootstrap nutzen willst, brauchst du ein Override vom Bloglayout, wo du die Bootstrap Klassen einfügen kannst.
Hallo
Danke, ich versuche die Fragestellung auf dem Serviertablet anzubieten, es will mir nicht gelingen.
Ich darf aber vorausschicken, Katagorie-Seiten werden standardmässig als Masonry-Kacheln ausgeben. Ich habe aber nicht verstanden, wie ich die Spaltenzahl für die entsprechende Fenstergrösse small, medium und large zuweisen kann. Die betreffende Zeile in der blog.php:
<?php $blogClass .= (int) $this->params->get('multi_column_order', 0) === 0 ? ' masonry-' : ' columns-'; ?>
Hier daran werkeln wäre mein Lösungsansatz. Liege ich falsch? Danke für einen Tipp oder Link zu einem Lösungsansatz.
Flipper