How to get a masonary blog layout?

For Joomla! 3.x Coding related discussions, please use: http://groups.google.com/group/joomla-dev-general

Moderator: ooffick

Forum rules
Please use the mailing list here: http://groups.google.com/group/joomla-dev-general rather than this forum.
Post Reply
brendanhedges
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Mar 04, 2017 1:28 am
Contact:

How to get a masonary blog layout?

Post by brendanhedges » Mon Jul 15, 2019 2:59 pm

Hi everyone,

I thought I would share how I managed to set my standard Joomla blog layout to have a masonry style, without any modules or plugins.

Please accept I am not an expert, and what works for me, may not for you.

1, Go to 'templates' and create a layout override for category blog. You'll get 3 files (blog.php, blog-item.php & blog.xml) edit the .xml file as per https://www.joomlashack.com/blog/joomla ... ry-layout/

2, You'll need to do some serious trimming of the unwanted/unneeded php code in the blog.php file. I basically removed chunks of code doing specific things until I was left with the bare minimum I needed to still make the site operational without php errors.

You need to focus on retaining all the elements that control the main list of items that display in the columns below the introductory items.

I kept the category description code, the main items code and the pagenation code. I checked the page was still operational after each 'snip', making it easily reversible if I came across problems.

My blog.php code ended up looking like this.

Code: Select all

<?php
/**
 * @package     Joomla.Site
 * @subpackage  com_content
 *
 * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
include_once(__DIR__ . '../../settings_blog.php');
JHtml::addIncludePath(JPATH_COMPONENT . '/helpers');

JHtml::_('behavior.caption');

$dispatcher = JEventDispatcher::getInstance();

$this->category->text = $this->category->description;
$dispatcher->trigger('onContentPrepare', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$this->category->description = $this->category->text;

$results = $dispatcher->trigger('onContentAfterTitle', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$afterDisplayTitle = trim(implode("\n", $results));

$results = $dispatcher->trigger('onContentBeforeDisplay', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$beforeDisplayContent = trim(implode("\n", $results));

$results = $dispatcher->trigger('onContentAfterDisplay', array($this->category->extension . '.categories', &$this->category, &$this->params, 0));
$afterDisplayContent = trim(implode("\n", $results));

?>
<div class="blog<?php echo $this->pageclass_sfx; ?> tck-blog" itemscope itemtype="https://schema.org/Blog">
	<?php if ($this->params->get('show_page_heading')) : ?>
		<div class="page-header">
			<h1> <?php echo $this->escape($this->params->get('page_heading')); ?> </h1>
		</div>
	<?php endif; ?>

	<?php if ($this->params->get('show_category_title', 1) or $this->params->get('page_subheading')) : ?>
		<h2> <?php echo $this->escape($this->params->get('page_subheading')); ?>
			<?php if ($this->params->get('show_category_title')) : ?>
				<span class="subheading-category"><?php echo $this->category->title; ?></span>
			<?php endif; ?>
		</h2>
	<?php endif; ?>
	<?php echo $afterDisplayTitle; ?>

	<?php if ($this->params->get('show_cat_tags', 1) && !empty($this->category->tags->itemTags)) : ?>
		<?php $this->category->tagLayout = new JLayoutFile('joomla.content.tags'); ?>
		<?php echo $this->category->tagLayout->render($this->category->tags->itemTags); ?>
	<?php endif; ?>
	<?php if ($beforeDisplayContent || $afterDisplayContent || $this->params->get('show_description', 1) || $this->params->def('show_description_image', 1)) : ?>
		<div class="category-desc clearfix">
			<?php if ($this->params->get('show_description_image') && $this->category->getParams()->get('image')) : ?>
				<img src="<?php echo $this->category->getParams()->get('image'); ?>" alt="<?php echo htmlspecialchars($this->category->getParams()->get('image_alt'), ENT_COMPAT, 'UTF-8'); ?>"/>
			<?php endif; ?>
			<?php echo $beforeDisplayContent; ?>
			<?php if ($this->params->get('show_description') && $this->category->description) : ?>
				<?php echo JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
			<?php endif; ?>
			<?php echo $afterDisplayContent; ?>
		</div>
	<?php endif; ?>

	<?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>
		<?php if ($this->params->get('show_no_articles', 1)) : ?>
			<p><?php echo JText::_('COM_CONTENT_NO_ARTICLES'); ?></p>
		<?php endif; ?>
	<?php endif; ?>



	<?php
	$introcount = count($this->intro_items);
	$counter = 0;
	?>
<div class="grid">
  <div class="gutter-sizer"></div>

		<?php foreach ($this->intro_items as $key => &$item) : ?>


			<div class="grid-item blog-item-bg">
				<div class="item"
					itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
					<?php
					$this->item = &$item;
					echo $this->loadTemplate('item');
					?>
				</div>
				<!-- end item -->
				<?php $counter++; ?>
			</div><!-- end span -->

				

		<?php endforeach; ?>

</div>
<div class="clr"></div>



	<?php if (($this->params->def('show_pagination', 1) == 1 || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
		<div class="m-t-30 pagination">
			<?php if ($this->params->def('show_pagination_results', 1)) : ?>
				<p class="counter pull-right"> <?php echo $this->pagination->getPagesCounter(); ?> </p>
			<?php endif; ?>
			<?php echo $this->pagination->getPagesLinks(); ?> </div>
	<?php endif; ?>
</div>

3, Go to https://masonry.desandro.com/ and either copy the link to their masonry js file and paste it directly in the head of your document, or download it and host it locally, again paste it in script tags in the head of your document. Also, go to https://isotope.metafizzy.co/layout-modes/packery.html and download or link to there isotop js file.

4, If you look closely in my blog.php file above you can see I have added selectors..... (grid, grid-item & gutter-sizer) these are needed to call the functions to get the masonary layout.

Code: Select all

	<?php
	$introcount = count($this->intro_items);
	$counter = 0;
	?>
<div class="grid">
  <div class="gutter-sizer"></div>

		<?php foreach ($this->intro_items as $key => &$item) : ?>


			<div class="grid-item blog-item-bg">
				<div class="item"
					itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
					<?php
					$this->item = &$item;
					echo $this->loadTemplate('item');
					?>
				</div>
				<!-- end item -->
				<?php $counter++; ?>
			</div><!-- end span -->

				

		<?php endforeach; ?>

</div>
<div class="clr"></div>

Because Joomla assigns intro items dynamically it's important to place these selectors as I have for the 2 JS files to work properly. (I spent 5 or 6 hours fiddling with this last night, so I know !)

5. Add this code just before the </body> tag...

Code: Select all

<script>
  jQuery('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.grid-item',
  percentPosition: true,
  packery: {
    gutter: '.gutter-sizer'
  }
});
  </script>
  
  

6. Add this CSS to your main/custom css file...

Code: Select all

.grid {
  background: #DDD;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item,
.grid-sizer {
  width: 46%;
}

.grid-item {
  float: left;
}

.gutter-sizer { width: 2%; }

And that, should be all you need to get a masonry layout to your standard Joomla Blog layout.
There are many options available on the masonry website, but I could not get any of them to work seamlessly with the way Joomla adds multiple items to multiple selectable columns. The isotope JS seems to be a better option when working in conjunction with Masonry JS.

The only possible glitch I noticed is that sometimes you have to hard refresh the page sometimes to get JS to layout the items nicely, although it seems that when you have done this once, it is fine. I need to do more testing to be sure.

This is what my layout currently looks like....

https://ibb.co/n36V6rr


If anyone's got any tips to make it cleaner/less hacky, please do share them.
Last edited by toivo on Mon Jul 15, 2019 7:16 pm, edited 1 time in total.
Reason: mod note: moved to 3.x Coding on request

User avatar
leolam
Joomla! Master
Joomla! Master
Posts: 19603
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

Re: How to get a masonary blog layout?

Post by leolam » Mon Jul 15, 2019 6:19 pm

Why don't you use an extension for this and going the hard way of coding this? Kind of weird. Power of Joomla is it's tremendous extension power?

Leo 8)
Joomla's #1 Professional Support Provider:
-> Joomla Professional Support: https://gws-desk.com -
-> Joomla Specialized Hosting Solutions: https://gws-host.com -
-> Joomla Webmaster Services: gws-webmaster.services

brendanhedges
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 115
Joined: Sat Mar 04, 2017 1:28 am
Contact:

Re: How to get a masonary blog layout?

Post by brendanhedges » Mon Jul 15, 2019 8:10 pm

leolam wrote:
Mon Jul 15, 2019 6:19 pm
Why don't you use an extension for this and going the hard way of coding this? Kind of weird. Power of Joomla is it's tremendous extension power?

Leo 8)
Hi,
A couple of reasons really, firstly I could not find an extension that was a native blog layout component or a plugin that worked within the Joomla core. There were just modules, I looked at a couple of them but decided that they did not really fit the bill. I was also concerned about the URL structure, I wanted to maintain the standard Joomla one.

Secondly, I searched around on Google for a while and couldn't find an example to follow. It seemed many people were asking 'how to', myself included, so I thought I would give it a go in my limited capacity as a code newbie. Actually, although it was a a pain to get it working, it was a great learning curve. And for someone still quite green I was please I managed to get it working.

:)

User avatar
leolam
Joomla! Master
Joomla! Master
Posts: 19603
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

Re: How to get a masonary blog layout?

Post by leolam » Tue Jul 16, 2019 2:49 am

Example 1 : http://demo.minitek.gr/#minitek_wall_pro
Example 2: https://demo.rockettheme.com/joomla-ext ... ksprocket/ (load 'mosaic)

All these kind of extensions follow native Joomla URL-structure


Leo 8)
Joomla's #1 Professional Support Provider:
-> Joomla Professional Support: https://gws-desk.com -
-> Joomla Specialized Hosting Solutions: https://gws-host.com -
-> Joomla Webmaster Services: gws-webmaster.services


Post Reply

Return to “Joomla! 3.x Coding”