it-swarm.com.de

Blog-Layout - reaktionsschnelle Positionierung des Bildrasters

Ich benutze das Kategorie-Blog-Layout und überschreibe es, um einen Link um das Artikel-Intro-Image zu setzen, der auf den Artikel verweist.

Jetzt möchte ich eine reaktionsschnelle Bildrasterpositionierung erreichen, wie Sie sehen können hier . Dies könnte durch die Verwendung von CSS erreicht werden.

Aber ich weiß nicht, welche CSS-Datei ich bearbeiten muss oder wie ich sie zum Laufen bringe.

Weiß jemand, wie man das erreicht und gibt auch einen Tipp, wie die CSS-Klasse (n) aussehen soll (en)?

Ich benutze Joomla 3.3.6 und das Afterburner2 Template mit Gantry Framework.


Vielen Dank für die Lösungen ... (Ich würde es bewerten, aber ich habe nicht genug Wiederholungen) Nachdem ich sie gelesen habe, habe ich es erneut versucht und festgestellt, dass ich die Spaltenanzahl in den Einstellungen des Menüelements ändern kann. Dies erscheint mir viel intuitiver als ein Override für das ganze blog.php. Ich meine, wenn ich die Anzahl der Spalten statisch in blog.php Schreibe, ist das sehr unflexibel !?

Bei diesem Ansatz hatte ich das Problem, dass der Intro-Text immer angezeigt wurde. Auch wenn ich die Option "Intro-Text anzeigen" im Artikel oder im Menü auf "Ausblenden" stelle. Also setze ich das "mehr" am Anfang des Artikels und danach den Text des Artikels. "Show read more" habe ich auch eingestellt, um mich zu verstecken. Also auf meiner Seite mit der Kategorie Blog sehe ich nur Bilder. Eine Reihe mit 4 Bildern.

Dann bekomme ich aber noch ein anderes Problem:

1) Ich konnte den Abstand zwischen den Bildern nicht ändern, da ich ihn etwas verkleinern möchte.

2) Wenn ich die Breite der Seite so reduziere, dass nur zwei Bilder in einer Zeile angezeigt werden, liegen sie nicht genau nebeneinander. Das rechte ist etwas unter dem linken.

Zuerst dachte ich, dass das der richtige Weg ist, aber nach einer Weile war ich mir wieder unsicher.

Kann dies eine gute Möglichkeit sein (mit einem CSS-Override oder so etwas speichern) oder sollte ich erneut mit einem anderen Ansatz beginnen, zum Beispiel den blog.php Bearbeiten (am Anfang wollte ich ihn bearbeiten, aber dann nicht Wie ändere ich das Teil in blog.php in ein 3- oder 4-spaltiges Layout?

5
oodoloo

Gantry bietet integrierte Unterstützung für Spalten und reagiert. Sie können es folgendermaßen verwenden (in diesem Beispiel erhalten Sie 3 Spalten mit einer Breite von jeweils 33,33%):

<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image1.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image2.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image3.jpg">
       <div class="clear"></div>
   </div>
</div>

Um einer RocketTheme-Vorlage CSS-Code hinzuzufügen, erstellen Sie einfach eine neue Datei wie die folgende: /templates/YOURTEMPLATE/css/YOURTEMPLATE-custom.css, In Ihrem Fall /templates/rt_afterburner2/css/rt_afterburner2-custom.css. Die Datei wird von Gantry automatisch erkannt.

Grundsätzlich müssen Sie eine Überschreibung für \components\com_content\views\category\tmpl\blog.php Erstellen, damit dies mit dem Blog-Layout funktioniert.

Normalerweise kopieren Sie diese Datei nach \templates\rt_afterburner2\html\com_content\category\blog.php Und ändern sie, aber Gantry verwendet eine andere Methode zum Behandeln von Überschreibungen. Sie sollten sie nach \templates\rt_afterburner2\html\joomla\3.3\com_content\category\blog.php Kopieren (vorausgesetzt, Sie verwenden Joomla 3.3 oder höher). .

3
johanpw

In Joomla gibt es normalerweise mehrere Möglichkeiten, das gleiche (oder ein ähnliches) Ergebnis zu erzielen.

Ich würde vorschlagen, dass Sie nicht das Blog-Layout verwenden, sondern RokSprocket . Es ist ein kostenloses Joomla-Modul, mit dem Sie Ihre Inhalte (Artikel) auf verschiedene Weise anzeigen und nach Kategorien filtern können, ähnlich einem Blog-Layout. Mit den Einstellungen können Sie den Intro-Text ausblenden, die Anzahl der Spalten festlegen, die Größe der Bilder ändern usw. Der Readmore-Link zeigt den Artikel an, genau wie das Standard-Blog-Layout. Schauen Sie sich die Demo für einige Ideen an.

In Ihrem Fall denke ich, dass das "Gitter" -Layout oder das "Mosaik" -Layout funktionieren könnte. Es hängt wirklich davon ab, wie Sie das Modul konfigurieren.

Grids Layout example

Um Ihr Modul in einem Artikel anzuzeigen, erstellen Sie einfach einen leeren Artikel und geben {loadposition YourModulePosition} im Inhalt. Veröffentlichen Sie dann das RokSprocket-Modul in YourModulePosition. (Oder werfen Sie einen Blick auf @ FFrewins Lösung in diesem Beitrag ).

3
johanpw

Afterburner 2 basiert auf dem Gantry Framework, sodass Sie unter /public_html/templates/rt_afterburner2/css Benutzerdefiniertes CSS hinzufügen können. Möglicherweise müssen Sie die Datei erstellen, wenn sie noch nicht vorhanden ist.

Sie können Medienabfragen in Ihrem CSS verwenden, um beispielsweise die Anzahl der Spalten in Abhängigkeit von der Bildschirmbreite zu variieren.

Wenn Sie die relevanten Zeilen aus der in der Vorlage enthaltenen Medienabfragedatei unter /public_html/templates/rt_afterburner2/less/mediaqueries.less Extrahieren, können Sie ein Grundgerüst als Ausgangspunkt für die Erstellung Ihrer reaktionsschnellen Layouts für jede Bildschirmbreite verwenden, die etwa so aussehen könnte:

@media only screen and (min-width: 1200px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media (min-width: 768px) and (max-width: 959px) {
  /* three columns */
  .columns {float: left; width: 33%;}
}

@media (max-width: 767px) {
  /* two columns */
  .columns {float: left; width: 50%;}
}

@media only screen and (max-width: 480px) {
  /* one column */
  .columns {float: left; width: 100%;}
}

Siehe http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md für weitere Details zum Gantry-Responsive-Grid-System.

2
Neil Robertson

Nicht sicher, ob dies zulässig ist, da dies als Eigenwerbung angesehen werden kann. Wenn nicht, bitte nach Bedarf bearbeiten.

Das von Ihnen verlinkte Bild stammt aus meiner neuen kommerziellen Vorlage Fotofit . Es werden nur Kerninhalte mit Überschreibungen und CSS verwendet, um das Layout und die Stile zu erreichen, und daher ist es zu 100% anpassbar. Es ist auch die schnellste Joomla-Vorlage, die jemals erstellt wurde.

Die Demo-Site verwendet keine Erweiterungen von Drittanbietern. Das Bildraster ist die vorgestellte Kategorieansicht. Wenn die Option "Verknüpfte Überschriften" aktiviert ist, wird das Intro-Bild auch mit dem Artikel verknüpft.

Das Beste ist, dass es derzeit mit 50% Rabatt bis zum Ende des Tages zum Verkauf steht. Der Rabatt wird an der Kasse automatisch angewendet.

1
Seth Warburton