dk_masonry in MM einbinden

[Schnubi]

Halo Leute,

ich hab eine Bilderseite die ich mit Metamodels aufgebaut habe, ich möchte nun die Ausgabe eines MM mit masonry formatieren.
Leider bin ich zu schaff ichs einfach nicht dieses masonry zu integrieren.

Also dk_Masonry hab ich installiert, anschliessend hab ich eine Seite erstellt auf der ich die ausgabe es MM reingelegt habe, anschliessend hab ich um das Element den masonry Umschlag gelegt.

Ich vermute das die CSS Klassen jetzt nicht an den richtigen stellen sind, ich hab anschliessend im verwendeten template mit masonry_item rumprobiert aber die ausgabe hab ich einfach nicht hinbekommen.

Kann mir da jemand mal bischen helfen, wie geht man vor um das einzubauen?

Danke

EDIT:
Wenn ich eine dk_masonry Galerie erstelle funktioniert es, wenn ich aber meine Daten aus dem Metamodel die im masonry Umschlag liegen verwende wird das einfahc nicht richtig eingebunden

[MacKP]

Hallo Schnubi,
im IRC warst auch mit dem Problem oder?
Wie da schon geschrieben:
Das Script musst du natürlich einbinden und dann das Template von der MM Ausgabe so anpassen, wie es das JS verlangt. Dazu dann in der Anleitung für ein beliebiges masonry gucken.

Viele Grüße

[Spooky]

Gibt es einen Link?

[Schnubi]

Hallo!

Danke Spooky läuft es nun!

Für alle die das Problem auch haben, dk_masonry Umschlag läuft nicht mit einem Metamodel out of the Box.

Ich habe dank Spooky das jquery Template bearbeitet und eien neuen Selector zugewiesen, es muss jetzt zwar ein leerer Umschlag eingebunden sein damit es funktioniert aber es funktioniert!

Danke nochmal an dich Spooky!!!

[Gassi]

Hey,
kannst du evtl. für andere User die das auch gerne umsetzen möchten - die Lösung etwas genauer hier posten?! Wäre super - ich bräuchte es nämlich auch ;-)

Danke und Gruss
GAssi

[Schnubi]

Für alle die das wie ich slbst nicht hinkriegen hier Spooky´s Lösung:

Als erstes muss das masonry jquery Template angepasst werden:

Diese Datei öffnen: ..\system\dk_masonry\templates\jquery\js_masonry.h tml5

Und fogenden Code einfügen:

(function($)
{
	"use strict";

	$(window).load( function()
	{
		$('#home .ce_metamodel_content .layout_full').masonry({
			itemSelector: ".item"
			});
	});
})(jQuery);

Natürlich muss der Selector noch angepasst werden, meine Seite heisst in dem Falle #home.

Jetzt noch im Artikel vor dem Galerie Metamodel einen Masonry Umschlag (Anfang und Ende) einbinden.

Das sollte es gewesen sein, bei mir funktioniert es jedenfalls!

Danke nochmal an Spooky für seine Hilfe

[Spooky]

Für alle die das wie ich slbst nicht hinkriegen hier Spooky´s Lösung:

Als erstes muss das masonry jquery Template angepasst werden:

Diese Datei öffnen: ..\system\dk_masonry\templates\jquery\js_masonry.h tml5

Und fogenden Code einfügen:

(function($)
{
	"use strict";

	$(window).load( function()
	{
		$('#home .ce_metamodel_content .layout_full').masonry({
			itemSelector: ".item"
			});
	});
})(jQuery);

Natürlich muss der Selector noch angepasst werden, meine Seite heisst in dem Falle #home.

Jetzt noch im Artikel vor dem Galerie Metamodel einen Masonry Umschlag (Anfang und Ende) einbinden.

Das sollte es gewesen sein, bei mir funktioniert es jedenfalls!

Danke nochmal an Spooky für seine Hilfe

Das würde ich so aber nicht machen . Du solltest niemals Dateien aus Extensions direkt editieren.

Du musst auf der Seite ein eigenes Template einfügen, wo du dann selbst das Masonry initialisierst.

[Schnubi]

Danke spooky,
da ich keinen blassen habe was du mit templates und initialisieren meinst wollte ich das jetzt auf die alte Variante machen.

Den genannten Modules Ordner gibts ja nichtmehr ich habe dieses File aber im Ordner vendor/dklemmt/contao_dk_masonry/system/modules/dk_masonry/templates/jquery/ gefunden.
Nun habe ich den Code da eingebaut aber trotzdem funktionierts nicht.

Kannst ddu nochmal nachschauen, danke.

[Spooky]

Wie gesagt solltest du niemals Code direkt in Extensions ändern. Füge deinen eigenen JavaScript Code einfach in ein HTML Inhaltselement nach der MetaModels Liste ein.

[Schnubi]

ajajaja, ich hab jetzt folgenden Code in ein Eigenes HTML feld gepackt und das nach dem Metamodel eingebunden.
Jetzt wird das in Klartext ausgegeben

Es tut mir leid das ich das nicht hinbekomme, bitte nochmal um deine Hilfe.

Eigenes HTML

<script>

(function($)
{
	"use strict";

	$(window).load( function()
	{
		$('#home .ce_metamodel_content .layout_full').masonry({
			itemSelector: ".item"
			});
	});
})(jQuery);

</script>

[Spooky]

Damit das auch andere mitverfolgen können: https://tinyurl.com/y687ta8h

Du hast nun HTML Fehler eingebaut. Außerdem musst du nocht <script> in den System Einstellungen erlauben. Alternativ kannst du auch ein mod_html_mm_masonry Template erzeugen, dort den Code einfügen und dann dieses Template im HTML Inhaltselement auswählen.

[Schnubi]

Script ist in den Einstellungen freigegeben, es wird auch nichtmehr angezeigt auf der Seite aber die Anzeige funktioniert noch immer nicht, was meinst du mit HTML fehler?

Wie siehst du das eigentlich mit dem Web Inspektor im Firefox?

[Spooky]

Strg + U ... Quelltext anzeigen.

Auf deiner Seite ist auf jeden Fall noch immer ein HTML Fehler drin.

Dein Script funktioniert noch immer nicht, weil du folgenden Selektor verwendest:

#home .ce_metamodel_content .layout_full

Es gibt aber kein Element mit der ID "home" auf der Seite.

[Schnubi]

Danke für deine Hilfe und vor allem Gedult
Schlusssendlich hab ichs hinbekommen!

Ich hab der Seite einfach eine CSS ID versetzt mit dem Namen masory und diese im Script mit #home getauscht, jetzt hauts hin.

Vielen Dank Spooky

[Schnubi]

hallo spooky,
jetzt brauch ich nochmal deine hilfe, ich hab ein update der seite gemacht contao 4.9 und mm 2.1, beim masonry hab ich leider noch ein problem.

ich hab folgendes gemacht:

• contao manager dk_masonry installiert, dann hab ich sogar noch auf dev-master umgestellt
• im artikel vor der mm liste den umschlag eingefügt (anfang und ende)
• unter einstellungen <script> zugelassen
• nach der mm liste ein html element mit deinem script eingefügt

im theme jquery aktiviert

<script>
/* Start Spooky Masonry initial!*/
(function($)
{
"use strict";

$(window).load( function()
{
$('.qview .layout_full').masonry({
itemSelector: ".item"
});
});
})(jQuery);
/* End Spooky Masonry initial!*/
</script>

wenn ich quelltext schaue ist das script da und auch die css klasse, hast du eine idee was ich flasch mache?



EDIT:
Ich habs gefunden, für alle die das auch so aufgebaut haben und auf 4 updaten, der Fehler liegt im Aufruf der Funktion, diese muss aktualisiert werden und sieht jetzt so aus:

<script>
/* Start Spooky Masonry initial!*/
(function($)
{
"use strict";

/*$(window).load( function()*/
$(window).on('load', function()
{
$('.qview .layout_full').masonry({
itemSelector: ".item"
});
});
})(jQuery);
/* End Spooky Masonry initial!*/
</script>