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)!?

  • It's not just CSS, you have to have a solid HTML markup too. For example, Bootstrap uses col-*-* and so on to define columns. After burner is not based on any responsive framework so you will either have to import a grid or write a small one yourself. The best way to start would be to create a separate HTML and CSS file and create a image grid on there and once working, implement it to your Joomla site. If you're having problems with that, show your current code and we ill assist you – Lodder Nov 27 '14 at 10:13
  • ok, thanks, but i thought the Template Afterburner2 is based on the Gantry Framework and this is responsive!? Ok you mean i should create an html and css file out of the whole joomla-cms and edit it until it meets my needs (Best using the Gantry Framework!?). And when i'm having problems with implementing it to my Joomla site i could ask for help again? – oodoloo Nov 27 '14 at 10:34
  • Yes, you're always welcome to ask for help, but always be sure to show us what you've tried so far and provide your code ;) – Lodder Nov 27 '14 at 10:41
  • Yes, ok, i understand. But, from the beginning, i want to walk in the right direction and i'm not sure if this is the right way. Because in the post i linked before, Seth Warburton said that it is possible only with css. So i dont understand why i should now create a html-snippet with a grid layout and then to implement it in my joomla site and in addition i have no idea how to get it from the snippet in my site. – oodoloo Nov 27 '14 at 11:14
  • Yes, it is only possible with CSS. CSS is used for the styling but you also need to make sure that your HTML element used classes that you can target in the CSS file. Please look at some responsive frameworks such as Bootstrap and/or UIKit to see what I mean, then start adding your own styling and if you have any problems with it, come back and re-edit your question and provide your code. – Lodder Nov 27 '14 at 11:21

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).

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.

Grids Layout example

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).

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.

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.

  • Your Template looks very nice - but as i said in the linked post, i want to learn how to do it - not to buy a finished one. – oodoloo Dec 1 '14 at 12:50
  • OK, then I think you will need to take some time to learn the fundamentals of css and html first. – Seth Warburton Dec 4 '14 at 8:25

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.