jQuery Masonry für Newsmodul implementieren

[MPstudent]

Hallo zusammen,

ich wusste jetzt nicht genau in welchem Thema ich meine Frage hier im Forum platzieren kann.

Ich will das masonry script für eine zweispaltige Anzeige der News verwenden und das habe ich auch geschafft, allerdings dirket im news template und zwar wie folgt:

<!-- indexer::stop -->
<div id="container_2" class="js-masonry"
  data-masonry-options='{ "columnWidth": 340, "gutter": 20, "itemSelector": ".layout_full" }'>

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

  <?php foreach ($this->articles as $article) echo $article; ?>

  <?php echo $this->pagination; ?>

</div>
<!-- indexer::continue -->

zusätzlich habe ich selbstverständlich

<script src="http://www.meineDomain.de/files/script/masonry.pkgd.min.js"></script>

im Seitenlayout eingebunden.

Im CSS ist auch alles ausgezeichnet.

Das Problem ist, dass es bei mir zu dem gängigen Problem kam, dass nämlich das masonry script schon ausgeführt wird bevor alle Bilder geladen wurden und es deshalb zu Überlappungen kam.

Aus diesem Grund würde ich gerne das masonry script innerhalb eines $(window).load(function() einbinden, damit das script erst ausgeführt wird wenn alle Bilder geladen wurden:

 <script type="text/javascript">
$(window).load(function
  {
      $('.mod_newslist').masonry({
           itemSelector : '.layout_full',
           columnWidth : 340,
           gutter: 20,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });
  </script> 

Lieder tut sich hier nichts.

Binde ich das script falsch ein? Ich binde es am Ende der Seite über eigenen Javascript Code ein…

Habe ewig probiert und gesucht, bekomme es jedoch einfach nicht zum luafen und wäre für jede Hilfe dankbar!

besten Dank
.christoph

[andreasisaak]

Versuch mal es dir hier abzuschauen

http://c-c-a.org/aktuelles/news

[MPstudent]

Hallo Andreas,

Ok, danke für den Link, bin leider nicht wirklich in der Lage das nachzuvollziehen, finde auch in dem Quelltext der genannten Seite gar nicht die Stelle wo das masonry script implementiert ist?

Wraum klappt es denn wenn ich die inline HTML Methode von desandro nutze, wenn ich jedoch das script versuche einzubinden klappt es nicht?

Binde ich denn das script richtig ein?

beste Grüße
.christoph

[MPstudent]

Ok, habs hinbekommen, habe es nun mit jquery gemacht:

Im Seitenlayout "zusätzliche head-tags":

<script src="http://www.meineDomain.de/files/script/masonry.pkgd.min.js"></script>
<script src="http://www.meineDomain.de/files/script/imagesloaded.pkgd.min.js"></script> 

Das template mod_newslist.html5:

<!-- indexer::stop -->
<div id="masonry_news" class="newslist">

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

  <?php foreach ($this->articles as $article) echo $article; ?>

  <?php echo $this->pagination; ?>

</div>
<!-- indexer::continue -->

Das jquery in Seitenlayut "eigenes Javascript":

<script>
(function($) {
    var $masonry = $('#masonry_news');
    $(document).ready(function() {
                
        $masonry.addClass("loading");
        $("#masonry_news .layout_full").addClass("loading").find("img").css({ opacity: 0, visibility: "hidden" });
        initMasonry();
        $masonry.imagesLoaded()
                           .progress(function(instance, image) {
                            $(image.img).css({ visibility: "visible" }).animate({ opacity: 1 }, 400).closest('.loading').removeClass('loading');
                            $masonry.masonry();
                            })
            
            
                        .always(function() {
                            $masonry.removeClass("loading");
                        });
    });
    function initMasonry() {
        $masonry.masonry({
              singleMode: true,
               itemSelector: '.layout_full',
               columnWidth : 340,
           gutter: 20
          

                });
    };
})(jQuery);
</script> 

Danke Andreas für den Denkanstoss!

Liebe Grüße
.christoph

[Alexander]

Hallo Christoph,

vielen Dank für diesen Beitrag.
Ich habe versucht, dies bei mir mit der 3.5.0-Version nachzubilden. Ich setze bei der Nachrichtenliste auf "layout_latest" und habe dies in dem eigens eingefügten JS im Seitenlayout für die layout_full-Einträge geändert.
Das Ganze funktioniert bei mir nur, wenn ich jeden Newsbeitrag mit einem einzelnen Modul einbinde, d.h., wenn ich Beitrag 1, Beitrag 2, Beitrag 3, usw. als einzelnes Modul in dem jew. Contao-Artikel einfüge. Wenn ich eine NAchrichtenliste mit 10 Beiträgen einfüge, stehen dies schlicht unter einander und haben keinen besonderen Effekt.

Hast du hier evtl. einen Implementierungs-Hinweis?

Besten Dank & beste Grüße
Alexander

[Alexander]

Habe es nun weiter versucht, jedoch ohne Erfolg. Ich habe folgendes Setting:

Im zugewiesenen Layout zusätzliche head-Tags:

<script src="http://www.domain.com/files/js/masonry.pkgd.min.js"></script>
<script src="http://www.domain.com/files/js/imagesloaded.pkgd.min.js"></script>

Eigener JS-Code im zugewiesenen Layout:

<script>
(function($) {
    var $masonry = $('.masonry_news');
    $(document).ready(function() {
                
        $masonry.addClass("loading");
        $(".masonry_news .layout_latest").addClass("loading").find("img").css({ opacity: 0, visibility: "hidden" });
        initMasonry();
        $masonry.imagesLoaded()
                           .progress(function(instance, image) {
                            $(image.img).css({ visibility: "visible" }).animate({ opacity: 1 }, 400).closest('.loading').removeClass('loading');
                            $masonry.masonry();
                            })
            
            
                        .always(function() {
                            $masonry.removeClass("loading");
                        });
    });
    function initMasonry() {
        $masonry.masonry({
              singleMode: true,
               itemSelector: '.layout_latest',
               columnWidth : 340,
           gutter: 20
          

                });
    };
})(jQuery);
</script>

Template mod_newslist.html5:

<!-- indexer::stop -->
<div class="masonry_news">

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

  <?php foreach ($this->articles as $article) echo $article; ?>

  <?php echo $this->pagination; ?>

</div>
<!-- indexer::continue -->

Template news_latest.html5:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

<?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?php echo $this->link; ?>" title="<?= $this->alt ?>">
      <?php endif; ?>

      <?php $this->insert('picture_default', $this->picture); ?>

      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>

    </figure>
<?php endif; ?>

<h3><?= $this->linkHeadline ?></h3>

<div class="teaser"> 
<a href="<?php echo $this->link; ?>" alt="Zum Beitrag springen">

  <?
    $text= $this->text; 
if (strlen($text) >= 150){ 
    echo strip_tags(substr($text, 0, strpos($text," ",150))).". . .";  
} else { 
    echo $text; 
} 
?>
</a>
</div>
</div>

Er lädt die Bilder nun gar nicht mehr, die Klasse ".loading" bleibt zugewiesen.
Zudem ist der nette masonry-Effekt vollständig ausgeblieben, d.h., er steckt die News-Beiträge einfach untereinander.

Könnte mir jemand hierbei einen Ratschlag geben?

Beste Grüße
Alexander

[Spooky]

Link zur Seite?

[Alexander]

// EDIT: Ist mir gerade gelungen, das Setting von mir oben funktioniert. Es war ein Fehler in der Verlinkung der JS-Dateien, kam ein 404, wenn man versuchte, die Dateien über den Quelltext auszuwählen :-). Also ein Anfängerfehler.

Beste Grüße & vielen Dank
Alexander

[Doro]

Hallo Alexander,
vielen Dank erstmal, dass Du deinen Aufbau hier teilst.
ich versuche das Ganze gerade nachzuvollziehen und habe gesehen
dass mein Template für die .mod_newslist, default_mässig ganz anders aussieht (contao 3.5)

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?php if (empty($this->articles)): ?>
    <p class="empty"><?= $this->empty ?></p>
  <?php else: ?>
    <?= implode('', $this->articles) ?>
    <?= $this->pagination ?>
  <?php endif; ?>

<?php $this->endblock(); ?>

mein Versuch, wie Du es aufgezeigt hast, das Ganze in ein div zu packen und diesem die Klasse .masonry_news zuzuweisen scheiterte leider daran, dass diese Klasse nicht im Quelltext auftauchte, leider?, obwohl ich selbstverständlich im Modul das Template für dieses .mod_newslist_custom gesetzt habe.
Aber es funktioniert nun anders, indem ich einfach dem Modul selbst im BE die Klasse "masonry_news" zugewiesen habe, dann taucht sie auch im Quelltext auf und greift. Soweit so gut:-)

Eine Frage bleibt für mich, wie muss das Template news_latest aussehen, wenn ich das Bild selbst als Link setzen möchte, ich kann leider kein PHP um das sauber und korrekt zu setzen, kann mir dazu noch jemand Hilfestellung geben?
auf jedenfall Danke Alexander, durch deine Arbeit bin ich ein gosses Stück weitergekommen, hast Du einen Amazon-Wunschzettel?

herzl Gruß Doro

[Doro]

Eine Frage bleibt für mich, wie muss das Template news_latest aussehen, wenn ich das Bild selbst als Link setzen möchte, ich kann leider kein PHP um das sauber und korrekt zu setzen, kann mir dazu noch jemand Hilfestellung geben?

herzl Gruß Doro

ok, das habe ich jetzt so gelöst, hoffe es ist korrekt

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

  <?php if ($this->hasMetaFields): ?>
    <p class="info"><time datetime="<?= $this->datetime ?>"><?= $this->date ?></time> <?= $this->author ?> <?= $this->commentCount ?></p>
  <?php endif; ?>

  <?php if ($this->addImage): ?>
  <figure class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>

<?php if ($this->href): ?><!-- prüft, ob bei dem Bild ein Link eingegeben wurde --> 
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>"><!-- fügt den ersten Teil des Links ein --> 
<?php else: ?><!-- verlinkt auf die Detailseite --> 
<a href="<?php echo $this->link; ?>" title="<?php echo $this->newsHeadline; ?>"> 
<?php endif; ?> 
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" /> 
</a><!-- fügt den umschliessenden Teil des Links ein -->
  
<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
</figure>
<?php endif; ?>

<div class="main-link">
<?php echo $this->text ? $this->linkHeadline : $this->newsHeadline; ?>
</div>
<div class="teaser">
<?php echo $this->teaser; ?> 
</div>
<?php if ($this->text): ?>
<p class="more"><?php echo $this->more; ?></p>
<?php endif; ?>
</div>

[risingsunset]

Habe es nun weiter versucht, jedoch ohne Erfolg. Ich habe folgendes Setting:

Im zugewiesenen Layout zusätzliche head-Tags:

<script src="http://www.domain.com/files/js/masonry.pkgd.min.js"></script>
<script src="http://www.domain.com/files/js/imagesloaded.pkgd.min.js"></script>

Eigener JS-Code im zugewiesenen Layout:

<script>
(function($) {
    var $masonry = $('.masonry_news');
    $(document).ready(function() {
                
        $masonry.addClass("loading");
        $(".masonry_news .layout_latest").addClass("loading").find("img").css({ opacity: 0, visibility: "hidden" });
        initMasonry();
        $masonry.imagesLoaded()
                           .progress(function(instance, image) {
                            $(image.img).css({ visibility: "visible" }).animate({ opacity: 1 }, 400).closest('.loading').removeClass('loading');
                            $masonry.masonry();
                            })
            
            
                        .always(function() {
                            $masonry.removeClass("loading");
                        });
    });
    function initMasonry() {
        $masonry.masonry({
              singleMode: true,
               itemSelector: '.layout_latest',
               columnWidth : 340,
           gutter: 20
          

                });
    };
})(jQuery);
</script>

Template mod_newslist.html5:

<!-- indexer::stop -->
<div class="masonry_news">

  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>

  <?php foreach ($this->articles as $article) echo $article; ?>

  <?php echo $this->pagination; ?>

</div>
<!-- indexer::continue -->

Template news_latest.html5:

<div class="layout_latest arc_<?= $this->archive->id ?> block<?= $this->class ?>">

<?php if ($this->addImage): ?>
    <figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>

      <?php if ($this->href): ?>
        <a href="<?php echo $this->link; ?>" title="<?= $this->alt ?>">
      <?php endif; ?>

      <?php $this->insert('picture_default', $this->picture); ?>

      <?php if ($this->href): ?>
        </a>
      <?php endif; ?>

    </figure>
<?php endif; ?>

<h3><?= $this->linkHeadline ?></h3>

<div class="teaser"> 
<a href="<?php echo $this->link; ?>" alt="Zum Beitrag springen">

  <?
    $text= $this->text; 
if (strlen($text) >= 150){ 
    echo strip_tags(substr($text, 0, strpos($text," ",150))).". . .";  
} else { 
    echo $text; 
} 
?>
</a>
</div>
</div>

Er lädt die Bilder nun gar nicht mehr, die Klasse ".loading" bleibt zugewiesen.
Zudem ist der nette masonry-Effekt vollständig ausgeblieben, d.h., er steckt die News-Beiträge einfach untereinander.

Könnte mir jemand hierbei einen Ratschlag geben?

Beste Grüße
Alexander

Danke für die Codes!

Ich bräuchte die Codes für mehrere Spalten, muss da noch was geändert werden?
Ich habe sie erstmal so übernommen und die Links aktualisiert, aber komischerweise wird für die Höhe der Nachrichten 10160px angegeben.
So bekomme ich elend lange Spalten… Weiß jemand, wie diese 10160px zustande kommen?

Danke!