Allow Joomla Users to Manage Their Own Articles on the Frontend

It's really useful for writers on a website to be able to easily find and manage their articles. With Joomla, there's no central control panel for writers to do that. Fortunately there's an outstanding extension called Shack Article Layouts which solves that problem. Here's how to use it ...

After installing the Shack Article Layouts extension, the key step is to create a menu link to Shack Article Manager.

  • For the "Menu Item Type", choose "Shack Article Manager".
  • Notice all the tabs for this menu link? Shack Article Manager has dozens of different options for your frontend article management:

sam menu link

On the frontend of the site, visitors will be able to click this menu link and see the main Shack Article Manager screen. If you allow them, they can click "New article" and create content directly from the frontend of the site.

create articles

Here's a view of Shack Article Manager screen as an administrator sees it. They have full access to all the articles on the site:

new article

Options for Shack Article Manager

Shack Article Manager is highly configurable. For example, you can allow users to add content in any category, or you can restrict them to a single category:

single category

You can fully customize the frontend display of Shack Article Manager. Each element of the display can be shown or hidden, depending on your needs:

layout

Shack Article Manager also has permissions that are easy to apply. You can decide if users can publish, feature, trash, view, or edit their published articles.

permissions


Video guide to Shack Article Manager

https://www.youtube.com/watch?v=70-8Y1ke73Y&t=105s

Video guide to allowing user to add content

https://www.youtube.com/watch?v=p2GonHV_eFo

Creating a Joomla Development Site

This tutorial will show you how to create a development site in Joomla. You can make changes to your test site and then, when you've tested and are happy with them, automatically push out those changes to your live site. This is professional development behavior, because it reduces the potential for mistakes and allows you eliminate most errors before they become public.

To create a development site we're going to use an extension called Working Copy.

Install Two Joomla Sites

tutuploadsmedia_1283445482694.png

In order to synchronize a Joomla live site and a Joomla development site, you first need to make sure you have both of them. So, I've installed a live site and then a development site inside it, in a folder called /child/. You can use other arrangements, but this is a simple way to get started.

Note: Please make sure that you keep your development site private from visitors and from search engines. That means at least password-protecting the folder.

Getting Working Copy Set Up

tutuploadsmedia_1283440999825.png

We need to install Working Copy on both of our Joomla websites. When we've done that, login in to one of them and go to Components >> Working Copy >> New.

tutuploadsmedia_1283442606589.png

There are three pieces of information you need to enter in this area:

1) Choose a name for this entry and enter the path to the child website.
2) Enter the database information for the child site. If you don't know it, you can find this in the site's configuration.php
3) Enter the database information for the main live site.

That's all you need to do here. There other, more advanced settings, but that's enough to test Working Copy and get it working.

However, don't forget to enter this exact same data into both your live site and your child site.

Make a Change To Your Child Site

tutuploadsmedia_1283444707036.png

Now let's make a change on our child site - it doesn't need to be large. In fact, to test Working Copy, I recommend making only a minor alteration. In this case I modified the name of one article. I then went to the front of the site to check that the change was complete.

Seeing the Changes in Working Copy

tutuploadsmedia_1283443770945.png

Now in your child site, go to Components >> Working Copy >> Differences and you'll see a list of the things that have changed. In this case it will an update to the jos_content table (when I edited my article) and an update to the jos_banner table (when I visited the site and saw the advertising banners).

Applying Changes to the Live Site

tutuploadsmedia_1283444044496.png

Select the changes you'd like to see made on your live site and click "Commit". You should see a blue "Commit completed" message.

Check Your Changes

tutuploadsmedia_1283444979433.png

Go to your live site and check to see whether the change has been made.

Changing Files

tutuploadsmedia_1283445775514.png

OK, OK, you might say. That was fairly simple. We were able to move some database tables over. Well, let's have a look at how can we also move over file updates.

For, this example I've uploaded a module from Rockettheme to my child site, but any extension will do. You can see that 2-15 are file changes and 16-17 are module updates.

Check the Changes

tutuploadsmedia_1283446080416.png

Now, go over to your live site and look for the new extension. It should have been successfully transferred.

Commit the Changes

tutuploadsmedia_1283445957394.png

Now select those changes, click "Commit" and you should get a message saying that you've successfully moved the test changes to your live site.

Webinar by the Creator of Working Copy

Happy Birthday Joomla and Joomlashack

Joomlashack and Joomla Birthday SaleWOW, time flies! It's hard to believe, but almost five years ago, on Sept 1st 2005, Joomla was officially launched. Just a day later, on Sept 2nd, Joomlashack was founded.

Like Joomla, we've gone through some big changes since then, especially the past year or so--a new team, new Premium Joomla Templates, launching Joomlashack University, releasing new Joomla Extensions and now our own Wordpress Themes & Drupal Themes, too!

Big changes, indeed--but one thing that will never change at the 'Shack is our commitment to bringing you the very BEST Joomla (and other CMS) products at the very BEST value anywhere.

We want to thank you all for making Joomlashack so successful these past 5 years. Here's to another 5!


Wordpress for Joomla! Training now available in Joomlashack University

Wordpress for JoomlaWe recently released a very informative, in-depth training lesson in our Joomlashack University on how to set up and use the Wordpress for Joomla! extension by corePHP. Wordpress for Joomla! is a powerful new Joomla extension that allows you to use Wordpress blogging software inside your Joomla website. With Wordpress for Joomla, you can enjoy the best blogging platform integrated with the best content management system available. You can even use Wordpress plugins and Joomla modules all at the same time, on the same blog. It's amazing.

In this new Quickshot preview of Wordpress for Joomla, JSU instructor Forest Linden gives you a very brief overview of just a few of the many cool features that Wordpress for Joomla! has to offer.

Read more: Wordpress for Joomla! Training now available in Joomlashack University

4 New Joomla Templates Released: Avalon, Orion, Evenflow & Veer

It pleases us to announce our partnership with Simplethemes. Casey Lee, owner of Simplethemes was one of the founders of Joomlashack, and so it is with great pride that we have signed an agreement with Casey to become the exclusive retailer of his wonderful and professional Joomla Templates.

We are proud to release these 4 new premium Joomla templates and you can look forward to a new template from Casey every month from now on.

We have 3 more template launches coming up during the next 4 weeks. Please also look into the new Joomla lessons added recently in our University; and our first Joomla extension, Lifestream, which was released last week.

Read more: 4 New Joomla Templates Released: Avalon, Orion, Evenflow & Veer

Lifestream 1.1 Released: New support for Flickr, Youtube and Tumblr

 

layouts_thmb

Lifestream 1.1 has been officially released (a week ahead of schedule no less)!

Lifestream 1.1 for Joomla integrates your social network feeds and displays them ALL on 1 website!

Version 1.1 adds Flickr, Youtube and Tumblr support to Lifestream for a total of 6 social network integrations so far (Facebook, Twitter and RSS Feeds were included in the initial release of Lifestream two weeks ago)

New customers can get their copy of Lifestream for just $24 here.

Registered customers of Lifestream can now download version 1.1 for free in our downloads shop here.

Don't forget..LinkedIn and Last.fm plugins will be released in early October. Customers of all previous versions of Lifestream will be able to download these new plugins (plus any future plugins) for free for 6 months after their purchase.

Read more: Lifestream 1.1 Released: New support for Flickr, Youtube and Tumblr

Lifestream Extension for Joomla Released!

 

layouts_thmb

Today, we're excited to announce the release of our very first Joomlashack extension called Lifestream!

Lifestream for Joomla integrates your social network feeds and displays them ALL in one place!

It's a powerful new component & module that dynamically updates your website with all your social network activities and RSS feeds. You can set it to display as separate streams or as one integrated social stream that includes all of your social network updates. You can display your 'life streams' in side-by-side windows, tab view or in one window.

Imagine the power and convenience of sharing your Flickr pics, YouTube videos, Facebook status updates, blog posts, RSS feeds, Twitter tweets and more...all from one website. Cool huh?

Lifestream for Joomla now makes that possible!

Read more: Lifestream Extension for Joomla Released!

Creating a New Joomla Offline Page

This is Part 3 of a series of tutorials on Joomla's offline page:

Joomla allows a site to be taken offline with a setting in the Administrator Global Configuration panel.  When this happens, frontend access is no longer permitted and a special offline page is displayed. 

How is the Offline Page Created?

By default, the offline page is created from the System Template.  You'll find a file called offline.php in the /templates/system/ folder. The file itself is fairly straight-forward and can be divided into five parts:

Joomla Offline Page

Part 1. This single line provides error messages, for example if you try to login but enter the wrong information:

<jdoc:include type="message" />

Part 2. This places a Joomla logo on the page:

<div id="frame" class="outline">

<img src="/joomla_logo_black.jpg" alt="Joomla! Logo" align="middle" />

Part 3. This places your site name on the page:


<h1> <?php echo $mainframe->getCfg('sitename'); ?> </h1>

Part 4. This places an offline message on the page:

<p>

<?php echo $mainframe->getCfg('offline_message'); ?> </p>

Part 5. This final and longest part of the code places a login box. This code runs from:


<?php if(JPluginHelper::isEnabled('authentication', 'openid')) : ?>

all the way down to:
<?php echo JHTML::_( 'form.token' ); ?>
 

Creating Your Own Joomla Offline Page

You could of course just edit the default offline.php but you'd lose any changes as soon you upgraded your Joomla site. The best way to do this is to create a file called offline.php in your template folder. Copy the following files:

  • /templates/system/offline.php
  • /templates/system/css/offline.css
  • /templates/system/css/offline_rtl.css

and add those file to:

  • /templates/your_template/offline.php
  • /templates/your_template/css/offline.css
  • /templates/your_template/css/offline_rtl.css

This will give you a platform to safely customize the files.

An Introduction to MVC for Joomla Templates

MVC can be a scary acronym for the uninitiated.  It stands for Model-View-Controller and the concepts behind MVC are responsible for the extra flexibility that is now afforded to the designer.  While parts of the theory can be rather involved and complicated, the only part that the designer need worry about is the V for View.  This is the part that is concerned with output.

Different extensions display output in different ways.

Components

Components are fairly complex and have the ability to display different information in different ways.  For example, the Articles Component (com_content) is able to display a single article, or articles in a category, or categories in a section.  Each of the ways of representing the different types of data (an article, or a category, or a section) is called a view (this comes from our MVC terminology).  Most components will have many views.  However, the view doesn't actually display the output.  This is left up to what we call a layout and it is possible for a view to have a variety of layouts.

The main thing to remember here is that components can have multiple views, and each view can have one or more layouts.  Each view assembles a fixed set of information, but each layout can display that information in different ways.  For example, the Category view in the Articles component assembles a number of articles.  These articles could be displayed in a list or in a table (and probably other ways as well).  So this view may have a list layout and a table layout to choose from.

Modules

Modules, on the other hand, are very simple.  They generally display one thing one way.  Modules don't really have views but they do support a layout.  Some developers might even support a choice of layouts through module parameters.

Template versus Layout

It is very important to distinguish between the role of template and the role of layouts.  The template sets up a structural framework for the page of the Web site.  Within this framework are positions for modules and a component to display.  What actually gets displayed is governed by the module layout, or the combination of view and layout in the case of the component.

The following image shows the structural layout of a typical Joomla! template (rhuk_milkyway, the default for 1.5).  The module positions are displayed by adding tp=1 to the URL (eg, index.php?tp=1).  You can clearly see where the module output is contained within the overall template, as well as the main component output starting in the lower-centre region.  However, what is actually output in those regions, is controlled by the layouts.

Screenshot

Ancillary Customisation

While not strictly related to the MVC, there are two other important areas to consider when looking at customising the output of Joomla!.

In addition to layouts, modules have what we call chrome.  Chrome is the style with which a module is to display.  Most developers, designers and probably some end-users will be familiar with the different built-in styles for modules (raw, xhtml, etc).  It is also possible to define your own chrome styles for modules depending on the designer result.  For example, you could design a chrome to display all the modules in a particular position in a fancy javascript collapsing blind arrangement.

In the screenshot above, you can just make out the names of some of the built-in module chrome used (rounded, none and xhtml).

The second area has to do with controlling the pagination controls when viewing lists of data.

Creating Tables Inside Joomla Articles

This tutorial will show you how to create tables inside Joomla articles. Because the default Joomla editor doesn't have a table-creation feature, we're going to recommend that you upgrade to Joomla Content Editor. Instructions on how to install it are here.

Getting Started

tutuploadsmedia_1279302864735.png

Open an article and put your cursor in the article where you'd like the table to be.

Insert a New Table

tutuploadsmedia_1279302938634.png

Click your mouse on the "Inserts a new table" button in the third row of your JCE Editor.

Choosing the Table Options

tutuploadsmedia_1279303033552.png

You'll see a pop-up looking like this. The first thing to do is choose the number of columns and row for your article. Cellpadding is the amount of space INSIDE each cell. Cellspacing is the amount of space BETWEEN each cell. Border will set a line around the outside of the whole table. Width and height allow you set fixed dimensions for the table, otherwise the table will adjust to fit the content inside. When you're done, click insert.

Writing Inside the Table

tutuploadsmedia_1279303232758.png

Click your mouse inside the table cells and start typing .... you should end up being able to fill in all the cells you need:

tutuploadsmedia_1279303548938.png

Modifying Your Table

tutuploadsmedia_1279303591717.png

You'll notice that when your table is selected, many new buttons along the 3rd row will light up. These are extra options for modifying our table. From left to right they are:

  • delete table
  • table row properties
  • table cell properties
  • insert row before
  • insert row after
  • delete row
  • insert column before
  • insert column after
  • delete column
  • split merged table cells
  • merge table cells