Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

S5 Masonry

This tutorial will explain how to install and configure the S5 Masonry module.


This is a powerful module that pulls your article from a category or categories and can display them in masonry style format. The module automatically changes on screen resize to fit the screen a user is viewing them on. You can choose to output a "load more" button that will load a set number of articles you define via AJAX. The second method to load articles is "scroll to load" which will load articles once you scroll to the bottom of your screen. You simply assign an intro image under your "Image and Links" parameters area of your article and then if you choose to show it in the module it will show up. The intro text will show up if you've added text to your article before your read more button.

Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.

Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.

1. Installation

The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Refer to your template's module layout to determine the best position to publish this module to, some modules are designed for specific locations.

http://www.shape5.com/documentation/Joomla/Getting-Started/How-To-Install-An-Extension-Into-Joomla

2. Next you need to setup the articles that will appear in the module.

  1. In the backend of Joomla navigate to Content / Category Manager:

  2. On the Category Manager page create a New category called "Masonry" or whatever you would like to call it. This will be the category that you save your articles to. You can create one category or several, and they can be sub categories:

  3. Navigate to Content / Article Manager / Add New Article to create a new article in the newly create category:

  4. Give your article some text, a title and set it to publish to the new "Masonry" category:

  5. Before saving the article proceed to the "Images and Links" tab and select an Intro Image. This image is what will show in the S5 Masonry module:

  6. Repeat these steps as many times as needed to create a volume of articles to display in the S5 Masonry module.
  7. Save the article and proceed to the S5 Masonry configuration via the Extensions / Modules menu link. Once on the Module Manage page open the S5 Masonry module:

3. Next you will need to setup the options in the admin

Now that you have setup articles to display, you need to configure the module itself. Below is a complete list of all the settings under the first "Module" tab.

  1. Show the Categories? - This enables or disables the buttons that toggle between categories.
  2. Category - Here you select the categories that you saved the masonry articles to. Using the "All Categories" option will present an "All" button on the module.
  3. Show Images - If you have specified intro images for your articles, this option will enable or disable them.
  4. Show Article title - Set the title of the articles to be visible or hidden.
  5. Linked Titles - Do you want the titles to be href hyperlinks?
  6. Header Level - Select the type of header tagged to be used here. Keep in mind that some templates may be stylized for a specific setting here.
  7. Show Intro Text? - Do you want to enable or disable the intro text?
  8. Read More Link - Do you want to enable or disable the read more link?
  9. Show Hits? - Do you want to enable or disable the show hits area?
  10. Default Layout or Hover Overlay? - The default layout puts all text below the image and it is always visible. The hover overlay will only show the text on hover and it will show over top of the intro image.
  11. Number of Articles - How many articles should be shown by default.
  12. Load More Articles - How many articles should show when the Load More button is pressed?
  13. Load More Method - The method in which more articles are loaded on the page.
  14. Order Results - The order in which articles are outputted. Keep in mind that the order may differ slightly based on the size of articles and the screen size.

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.