Blog layout - responsive image grid positioning

Question

I use the category blog layout and override it to wrap a link around the article intro-image, which points to the article.

Now i want to achieve a responsive image grid positioning like you can see here. This could be achieved by using CSS.

But i don't know which CSS file i have to edit or how to get it working.

Somebody know how to achieve this and also a tip about what the CSS class(es) should look like?

I use Joomla 3.3.6 and the Afterburner2 template with Gantry framework.

---

Thanks for the solutions...(I would rate it but I have not enough reps) After I read them iI tried again and realized that I could change the column count in the settings of the menu item. This appears to me much more intuitive than making an override for the whole blog.php. I mean if I write the count of columns static in blog.php it is very inflexible!?

With that approach I had the problem that the intro text was always shown. Also when I set the option "Show intro text" in article or in menu to "hide". So i set the "more" at the beginning of the article and after that the text of the article. "Show read more" i also set to hide. So on my site with the category blog i only see images. One row with 4 images.

But then I get another problems:

1) I could not change the spacing between the images, because i want to make it a bit smaller.

2) If I reduce the width of the page so that only two images are displayed in one row, they are not exactly side by side. The right one is a bit under the left one.

First I thought that is the correct way I used, but after a while I was unsure again.

Can this be a good way (save it with a CSS override or something) or should I start again with another approach for example, edit the blog.php (at beginning I wanted to edit it, but then I don't how to change the part in blog.php to a 3- or 4-column layout)!?

Answer 1

Gantry has built-in support for columns, and is responsive. You can use it like this (this example will give you 3 columns, each 33.33% wide):

<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image1.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image2.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image3.jpg">
       <div class="clear"></div>
   </div>
</div>

To add CSS code to any RocketTheme template, simply create a new file like this: /templates/YOURTEMPLATE/css/YOURTEMPLATE-custom.css, in your case /templates/rt_afterburner2/css/rt_afterburner2-custom.css. The file will be detected automatically by Gantry.

Basically, to get this to work with the Blog layout, you have to create an override for \components\com_content\views\category\tmpl\blog.php.

Usually, you copy this file to \templates\rt_afterburner2\html\com_content\category\blog.php and modify it, but Gantry has a different way of handling overrides, and you should copy it to \templates\rt_afterburner2\html\joomla\3.3\com_content\category\blog.php (assuming you're using Joomla 3.3 or later).

Answer 2

In Joomla, there's usually several ways to achieve the same (or similar) result.

I would suggest that instead of using the blog layout, you should try RokSprocket. It's a free Joomla module that can display your content (articles) in several ways, and filter them by category, similar to a blog layout. The settings allow you to hide the intro text, set amount of columns, resize images, etc. And the readmore link will display the article, just like the default blog layout does. Take a look at the demo for some ideas.

In your case, I think the "Grid" layout or "Mosaic" layout might work, it really depends on how you configure the module.

To display your module in an article, simply create an empty article and type {loadposition YourModulePosition} in the content. Then publish the RokSprocket module to YourModulePosition. (Or take a look at @FFrewin's solution in this post).

Answer 3

Afterburner 2 is based on the Gantry Framework so you can add custom CSS at /public_html/templates/rt_afterburner2/css. You may need to create the file if it doesn't already exist.

You can use media queries in your CSS to (for example) vary the number of columns depending on the screen width.

Extracting the relevant lines from the media queries file included in the template at /public_html/templates/rt_afterburner2/less/mediaqueries.less can provide a skeleton as a starting point for you to create your responsive layouts for each screen width which might look something like this:

@media only screen and (min-width: 1200px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media (min-width: 768px) and (max-width: 959px) {
  /* three columns */
  .columns {float: left; width: 33%;}
}

@media (max-width: 767px) {
  /* two columns */
  .columns {float: left; width: 50%;}
}

@media only screen and (max-width: 480px) {
  /* one column */
  .columns {float: left; width: 100%;}
}

See http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md for more details about the Gantry responsive grid system.

Answer 4

Not certain if this is allowed, as it can be viewed as self-promotion. If not, sorry, please edit as required.

The visual you linked to is from my new commercial template, Fotofit. It uses only core content, with overrides, and css to achieve the layout and styles and as a result it is 100% customisable. It's also the fastest Joomla template ever created.

The demo site does not use any 3rd-party extensions. The image grid is the featured category view. If 'linked headings' option is enabled then the intro image is also linked to the article.

Best of all, it is on sale currently with 50% off until the end of the day. Discount applied at checkout automatically.