On Joomla, how to show multiple editable articles on the same page?

Question

I have a static website, which I want to make editable by the client. So, I decided to rebuild the website using Joomla. The current static home page uses Zurb's Foundation to display the contents in the following layout. 1st Row: 1 column, 2nd Row: 2 columns, 3rd Row: 1 column

Using Joomal, I have thought of the following options.

1. the whole page is 1 article: the client would need to understand html, to be able to maintain div's and classes. Isn't it?

2. Each column on the page (1 column on the 1st row + 2 columns on the 2nd row + 1 column on the 3rd row) is an article that the client can edit. In effect, the page displays the full contents of 4 articles in the above layout.

I think the 2nd option is the way to go. However, I could not figure out how to display multiple, FULL, EDITABLE articles on the same page. I looked at the extension (Articles Anywhere - https://extensions.joomla.org/extension/articles-anywhere). However, it seems that although this extension can display articles, they won't be editable by authorised users.

Your effort and time to answer my question are highly appreciated...

Answer 1

To display multiple articles on a page you can use the category blog view or the featured view or (with customization) the tagged items view. However you must not use "read more" within the articles. Make sure that the option to display edit icon is turned on and that you are logged in as a user with edit privileges for all of the articles in question. If you are an administrator, publisher or editor by default you will have these.

Answer 2

Throughout the last few days, I managed to achieve what I asked about. I thought of documenting it here for the benefit of others.

Let's say we want to create a page, which looks like the following.

• 1st Row has 1 column: Part-r1-c1
• 2nd Row has 2 columns: Part-r2-c1 & Part-r2-c2
• 3rd Row has 1 column: Part-r3-c1

Basically, you need to do the following.

1. Create a template having module positions for each "Part" of your page layout. Let's call this template "Custom Template". So, you will need to create 4 positions:
   • Part-r1-c1
   • Part-r2-c1
   • Part-r2-c2
   • Part-r3-c1

Creating a custom template is an involved process with quite a learning curve. You need to be patient until you understand how Joomla templates work. I suggest referring to the official documentation and some tutorial videos/articles. I found the following useful.

• Convert an HTML Template to Joomla 2.5/3.0 (3-parts YouTube Video): https://www.youtube.com/watch?v=E13QMWgvwlA&t=3s
• https://docs.joomla.org/Creating_a_basic_Joomla!_template

As an alternative to creating your own template, you can use a Template Extension (or framework). I like T3-Framework http://www.t3-framework.org/.

However, in my opinion, investing time in understanding how Joomla templates work has much higher return on investment than understanding how to customise/customize an existing framework. To build your own template, you need to be comfortable with changing php and xml files though.

2. Create an empty article, and call it something like "Dummy Article".

3. Create a menu item for your page, e.g. "Services". The type of this menu item should be "single article". Choose the "Dummy Article", which you created above, as the article to be displayed. Assign "Custom Template" to this menu item.

4. Create an article for each Part of your page, in which you will write the contents, which your customer would be able to change.

5. Create a module for each Part, and assign it to the related position of the layout, and insert the related article into this module. Inserting articles into modules is not part of standard Joomla (at the current version 3.6.4). To insert articles into modules, you need to use a Joomla extension, like https://extensions.joomla.org/extensions/extension/news-display/articles-anywhere/.

That's it.

I discovered the need for another feature, which I missed asking about in my question. I wanted to make some Parts, which are not editable by the customer. Here's how I did it.

6. Create a category for articles, which you don't want your customer to change. Let's call it "Protected". Change the permissions for this category to Deny access to Editors (with the assumption that you are going to provide your customer with an Editor User ID.)

7. Create articles for each Part of your page, in which you will write the contents, which your customer CANNOT change. Categorise these articles as "Protected."

Good Luck!