Skip to content

Commit bb711f3

Browse files
ihorvansachihorvansach
committed
Add new template for recent posts widget with masonry cascading grid layout
1 parent f984c19 commit bb711f3

File tree

4 files changed

+123
-1
lines changed

4 files changed

+123
-1
lines changed

‎etc/widget.xml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@
2626
</parameter>
2727
<parameter name="custom_template" xsi:type="text" visible="true" sort_order="40" >
2828
<label translate="true">Custom Template</label>
29-
<description translate="true">Leave blank to use default template "Magefan_Blog::widget/recent.phtml".</description>
29+
<description translate="true"><![CDATA[
30+
Leave blank to use default template <em>Magefan_Blog::widget/recent.phtml</em>.<br/>
31+
<em>Magefan_Blog::widget/recent_masonry.phtml</em> template is also available out of the box.
32+
]]></description>
3033
</parameter>
3134
</parameters>
3235
</widget>

‎view/frontend/templates/widget/recent_masonry.phtml‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<?php
2+
/**
3+
* Copyright © 2016 Ihor Vansach ([email protected]). All rights reserved.
4+
* See LICENSE.txt for license details (http://opensource.org/licenses/osl-3.0.php).
5+
*
6+
* Glory to Ukraine! Glory to the heroes!
7+
*/
8+
?>
9+
<?php
10+
/**
11+
* Blog recent posts widget
12+
*
13+
* @var $block \Magefan\Blog\Block\Widget\Recent
14+
*/
15+
?>
16+
17+
<?php
18+
$_postCollection = $block->getPostCollection();
19+
?>
20+
<?php if ($_postCollection->count()) { ?>
21+
<div class="post-list-wrapper blog-widget-recent blog-widget-recent-masonry">
22+
<h3 class="title"><?php echo $block->escapeHtml($block->getTitle()) ?></h3>
23+
<ul class="post-list clearfix">
24+
<?php foreach ($_postCollection as $_post) { ?>
25+
<?php
26+
$_postUrl = $_post->getPostUrl();
27+
$_postName = $block->escapeHtml($_post->getTitle(), null, true);
28+
?>
29+
<li class="post-holder post-holder-<?php echo $_post->getId() ?>">
30+
<div class="post-header">
31+
32+
<div class="post-title-holder clearfix">
33+
<div class="post-title">
34+
<a class="post-item-link"
35+
href="<?php echo $_postUrl ?>">
36+
<?php echo $_postName; ?>
37+
</a>
38+
</div>
39+
</div>
40+
41+
<div class="post-info clear">
42+
<div class="item post-posed-date">
43+
<span class="label"><?php echo __('Posted:') ?></span>
44+
<span class="value"><?php echo $_post->getPublishDate('F d, Y') ?></span>
45+
</div>
46+
<?php if ($_categoriesCount = $_post->getCategoriesCount()) { ?>
47+
<div class="dash">|</div>
48+
<div class="item post-categories">
49+
<span class="label"><?php echo __('Categories:') ?></span>
50+
<?php $n = 0; foreach($_post->getParentCategories() as $ct) { $n++; ?>
51+
<a title="<?php echo $block->escapeHtml($ct->getTitle()) ?>" href="<?php echo $ct->getCategoryUrl() ?>"><?php echo $block->escapeHtml($ct->getTitle()) ?></a>
52+
<?php if ($n != $_categoriesCount) { ?>, <?php } ?>
53+
<?php } ?>
54+
</div>
55+
<?php } ?>
56+
</div>
57+
</div>
58+
59+
<div class="post-content">
60+
<div class="post-description clearfix">
61+
<?php if ($featuredImage = $_post->getFeaturedImage()) { ?>
62+
<div class="post-ftimg-hld">
63+
<a href="<?php echo $_postUrl ?>" title="<?php echo $_postName ?>">
64+
<img src="<?php echo $featuredImage ?>" alt="<?php echo $_postName ?>" />
65+
</a>
66+
</div>
67+
<?php } ?>
68+
<?php if ($content = $block->getShorContent($_post)) { ?>
69+
<div class="post-text-hld clearfix">
70+
<?php echo $content ?>
71+
</div>
72+
<?php } ?>
73+
<a class="post-read-more" href="<?php echo $_postUrl ?>" title="<?php echo $_postName ?>">
74+
<?php echo __('Read more &#187;') ?>
75+
</a>
76+
</div>
77+
</div>
78+
<div class="post-footer">
79+
80+
</div>
81+
</li>
82+
83+
<?php } ?>
84+
</ul>
85+
</div>
86+
<script>
87+
requirejs( [ 'require', 'jquery', 'Magefan_Blog/js/lib/masonry.pkgd.min' ],
88+
function( require, $, Masonry ) {
89+
require( [ 'jquery-bridget/jquery-bridget' ],
90+
function( jQueryBridget ) {
91+
jQueryBridget( 'masonry', Masonry, $ );
92+
$('.post-list').masonry({
93+
itemSelector: '.post-holder',
94+
percentPosition: true
95+
})
96+
});
97+
});
98+
<?php /* more info http://masonry.desandro.com/extras.html */ ?>
99+
</script>
100+
101+
<?php } ?>

‎view/frontend/web/css/blog-m.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,15 @@
200200
overflow-y: auto;
201201
}
202202

203+
.blog-widget-recent-masonry .post-description .post-text-hld {
204+
max-height: none;
205+
min-height: 0;
206+
}
207+
.blog-widget-recent-masonry .post-description .post-ftimg-hld {
208+
width: 100%;
209+
margin: 0px;
210+
}
211+
203212
.mfblog-autoloader {text-align: center;}
204213
.mfblog-autoloader .mfblog-show-onload {display: none;}
205214

0 commit comments

Comments
 (0)