NOTICE: page under construction, back to read more about this documentation. Current version is v1.1

Mapk

MK Advanced Articles

 

One module, 10+ different styles for your Joomla! articles.

Current version: 2.0

Say goodbye to lot of modules, say hello to MK Advanced Articles!

MK Advanced Articles has been developed with the idea of using core content articles of Joomla! as source and mix them with the best jQuery, CSS solutions for: carousel, slider, portfolio, photo gallery and more.

Basic idea is simple: choose the sources among your categories; decide what to take and show (title, intro text, intro image, date, author...); choose the output style.

The one with the carousel and the slider

Thanks to the carousel style you can easy set up your articles to produce a carousel of articles, image gallery or a full width slider. Notice that you need a fluid row (or 100% width) in order to have a full width slider, moreover your intro images must be large enough to cover the max device width (1280px could be our case). In the following example I show how to set 2 different carousels.

First one is a carousel with dots, arrows and I decided to show intro image and linked title. Remember, the carousel is touch enabled. It means you can swap next or previuos elements simply dragging with your mouse or try it on smartphone or tablet.

And here we go with the slider. To obtain this result you need a little playing with parameters... but this is the fun! Here my setup:

  • Create a slider category and inside it an article for each slide
  • From MK Advanced Articles choose carousel style in MK Design options
  • Scroll down to Carousel settings and activate slider and put margin to 0 (other parameters if you want)
  • NEW: now you can activate auto play, set interval and pause on mouse hover.
  • In responsive settings set all to 1 item for each device.
  • From filtering and ordering options set your dedicated category
  • In Display options set all to No but intro image.

The one with the bootstrap

Bootstrap is a must have in every template, it makes life easier for designers. Responsive styles performing doesn't matter if you use the right classes... and here we go.

First of all let's see which of the MK Design themes support the bootstrap options:

  • Simple
  • Postcard (not full supported)
  • Hover
  • Grid

Other themes have their own style (for example the carousel and blog) with appropriate parameters or no one if they have a fixed number of articles per row.

In MK Advanced Articles for Joomla! you can simply choose the bootstrap version to use, v2 or v3, and if your template doesn't use as default library just ask the MK module to get bootstrap for you. Essentially you don't need to know how bootstrap works to make row items responsive, just take in mind you have a row with items inside.

Let's give a look to backend panel in MK bootstrap options:

bootstrap demo1

  1. Decide if load libraries or not. Default is No thanks because we suppose that every responsive template already uses bootstrap.
  2. Choose your bootstrap version. If you are not sure about which one you have, look at the source code of your homepage and search for bootstrap.css (or bootstrap.min.css), open the link and see for the version in the comment at begenning of the file.
  3. This is only for Bootstrap v2.3.2: you must simply decide how many items (articles) you want to see on a desktop device. Scaling on screen resolution will automatically adapts number of items per row.
  4. This is only for Bootstrap v3.3.4: it's more interesting! Icons help you to understand in which device you are setting the number of items per row. lg devices and md devices usually have the same number of items so you can decide to ignore this (but if you have a template that works with the high resolution over 1280 here you can set the value). Looking in the above example, if we open our page on a desktop/laptop device we will see 4 articles in the same row (remember that also depends from the theme you choosed, this example is for the "Simple"), going to a tablet device we will have 2 articles and only 1 if we watch out page on a smartphone. 

 In the above example you will see 4 items if you are looking at this page from a desktop device. Try to resize the browser window till the 2 breakpoints and you'll see how it works!

The One Where Nana Dies Twice

Sed vulputate ornare felis sed porttitor. Mauris sit amet velit est. Mauris egestas tincidunt diam nec...

Demo articles 1063 mapk

Read More...

The One Where Underdog Gets Away

Ut ac metus sit amet orci dictum facilisis non sit amet tellus. Maecenas quis suscipit velit....

Demo articles 990 mapk

Read More...

The One with the Blackout

Ut in lacus auctor, feugiat arcu ac, facilisis nibh. Quisque convallis nisi et suscipit laoreet....

Demo articles 884 mapk

Read More...

The One with the Butt

Donec sagittis tellus justo, id euismod mi sagittis at. In lacus lorem, imperdiet nec fermentum...

Demo articles 873 mapk

Read More...

The One with the East German Laundry Detergent

Nulla porttitor bibendum tortor sed vestibulum. Vestibulum vitae dignissim elit. Curabitur vel...

Demo articles 742 mapk

Read More...

The One with the Monkey

Cras diam orci, luctus et vehicula sed, hendrerit a libero. Donec dictum a nibh non vehicula....

Demo articles 938 mapk

Read More...

The One with the Sonogram at the End

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac tempus velit. Nulla vel lectus...

Demo articles 928 mapk

Read More...

The One with the Thumb

Sed quis lorem lorem. Ut nec volutpat erat. Aenean nec rhoncus libero. Pellentesque in sapien et...

Demo articles 932 mapk

Read More...

The one with the Hover and friends

The One Where Nana Dies Twice

Sed vulputate...

The One Where Underdog Gets Away

Ut ac metus sit...

The One with the Blackout

Ut in lacus...

This is the example from a single category source limited to 3 articles. The result is rendered with the hover theme and the Romeo effect. There are no particular parameters to set, just choose the effect among the 29 available and be careful at the output. It is required to set a different intro text length depending on the chosen effect, in the below exaple I choosed a value of 20. Also remember that not all display options will be available, in fact if you try to show date or author name it will not affect the result.

Actually every hover effect support the title, image (mandatory sure) and intro text. In future version will be also possible to have author, visits and other stuffs visible in some effects.

Bootstrap options supported