<?php
/**
 * Copyright © Magefan (support@magefan.com). All rights reserved.
 * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 *
 * Glory to Ukraine! Glory to the heroes!
 */
?>
<?php
/**
 * Blog recent posts widget
 *
 * @var $block \Magefan\Blog\Block\Widget\Recent
 */
?>

<?php
    $_postCollection = $block->getPostCollection();
?>
<?php if ($_postCollection->count()) { ?>
<div class="post-list-wrapper blog-widget-recent blog-widget-recent-masonry">
    <h3 class="title"><?= $block->escapeHtml($block->getTitle()) ?></h3>
    <ul class="post-list clearfix">
        <?php foreach ($_postCollection as $_post) { ?>
            <?php
                $_postUrl = $block->escapeUrl($_post->getPostUrl());
                $_postName = $block->escapeHtml($_post->getTitle());
            ?>
            <li class="post-holder post-holder-<?= (int)$_post->getId() ?>">
                <div class="post-header">

                    <div class="post-title-holder clearfix">
                        <div class="post-title">
                            <a class="post-item-link"
                               href="<?= /*@noEscape*/ $_postUrl ?>">
                                <?= /*@noEscape*/ $_postName ?>
                            </a>
                        </div>
                    </div>

                    <div class="post-info clear">
                        <?php if ($_post->isPublishDateEnabled()) { ?>
                            <div class="item post-posed-date">
                                <span class="label"><?= $block->escapeHtml(__('Posted:')) ?></span>
                                <span class="value"><?= $block->escapeHtml($_post->getPublishDate()) ?></span>
                            </div>
                        <?php } ?>
                        <?php if ($_categoriesCount = $_post->getCategoriesCount()) { ?>
                        <div class="item post-categories">
                            <span class="label"><?= $block->escapeHtml(__('Categories:')) ?></span>
                            <?php $n = 0;
                            foreach ($_post->getParentCategories() as $ct) { $n++; ?>
                                <a title="<?= $block->escapeHtml($ct->getTitle()) ?>"
                                   href="<?= $block->escapeUrl($ct->getCategoryUrl()) ?>">
                                    <?= $block->escapeHtml($ct->getTitle()) ?>
                                </a>
                                <?php if ($n != $_categoriesCount) { ?>, <?php } ?>
                            <?php } ?>
                        </div>
                        <?php } ?>
                    </div>
                </div>

                <div class="post-content">
                    <div class="post-description clearfix">
                        <?php $featuredImage = $_post->getFeaturedListImage() ?: $_post->getFeaturedImage(); ?>
                        <?php if ($featuredImage) { ?>
                            <?php
                                $featuredImgAlt = $_post->getData('featured_list_img_alt') ?: $_post->getData('featured_img_alt');
                            if (!$featuredImgAlt) {
                                $featuredImgAlt = $_postName;
                            }
                            ?>
                            <div class="post-ftimg-hld">
                                <a href="<?= /*@noEscape*/ $_postUrl ?>" title="<?= /*@noEscape*/ $_postName ?>">
                                    <img src="<?= $block->escapeHtml($featuredImage) ?>"
                                         alt="<?= $block->escapeHtml($featuredImgAlt) ?>" />
                                </a>
                            </div>
                        <?php } ?>
                        <?php if ($content = $block->getShorContent($_post)) { ?>
                            <div class="post-text-hld clearfix">
                                <?= /*@noEscape*/ $content ?>
                            </div>
                        <?php } ?>
                        <a class="post-read-more"
                           href="<?= /*@noEscape*/ $_postUrl ?>"
                           title="<?= /*@noEscape*/ $_postName ?>">
                           <?= $block->escapeHtml(__('Read more &#187;')) ?>
                        </a>
                    </div>
                </div>
                <div class="post-footer">

                </div>
            </li>

        <?php } ?>
    </ul>
</div>
<script>
requirejs( [ 'require', 'jquery', 'Magefan_Blog/js/lib/masonry.pkgd.min' ],
function( require, $, Masonry ) {
    require( [ 'jquery-bridget/jquery-bridget' ],
    function( jQueryBridget ) {
        jQueryBridget( 'masonry', Masonry, $ );
        $('.post-list').masonry({
            itemSelector: '.post-holder',
            percentPosition: true
        })
    });
});
    <?php /* more info http://masonry.desandro.com/extras.html */ ?>
</script>

<?php } ?>