Using the Content Plugin in Articles and Modules

This article concentrates on using the Content plugin to show simple links to Downloads in Joomla! articles. It may also be used in Custom Modules.  For example showing an 'inline' link to a Download such as illustrated below (from v45 onward)

Note: If you have allowed Registered Users to create Content the be aware that in Joomla! Global Configuration - Filtering that the default for Registered is 'No HTML'.  You need to set to say 'Default Blacklist'.

If you are entering into an article directly using a basic editor such as Code Miror or similar then it would appear as opposite. <div>Now display the download link {jd_file file==25}in the middle of a sentence.</div>
Using a conventional WYSIWYG type editor such as JCE  the entry in the article would look like that opposite. Note the JCE editor will show the type of 'block' with DIV at top left.


Now in the above the Download and its surrounding text is in a <div> ... </div> block.  If it is put in a Paragraph block <p> ... </p> then there will be a line break immediately before the Download part  Single05A
The direct code as entered is: <p>This Download is in a Paragraph block {jd_file file==25}so there is a line break.</p>
The view in  the JCE editor is as shown opposite Single05B

The reason is in the basic HTML definition of a Paragraph which cannot hold another block element such as <div>.  This is consistent with ordinary language where a Paragraph does not contain an 'internal paragraph'.

See the Appendix below about changing the 'mode' of typical WYSIWYG editors such as JCE and Ark from Paragraph to Div dynamically.

Use In Custom Modules

Adding a Download link to a custom module is the same as in an article.  This is in the Module tab where your default editor will be shown to gether with any 'buttons' such as Download.

But there is one more action required. 

Select the Options tab, then ensure that the 'Prepare Content' field is set to Yes as indicated opposite.


In-line Layouts

There are three specific layouts available as 'inline' suitable for use in articles as indicated below. They are basically variations of the same layout. :

  1. Files link only v3.2    -----------------    Single04A This is a standard default Files layout which comes wilth jDownloads.
  2. Files link and icon v3.2 --------------   Single04BNever shows the featured star, layout available from the Layout library.
  3. Files icon link and featured v3.2 --- Single04C   Only shows feature star if Download is featured, layout available from the Layout library.

Set the required inline layout  by using, for example  {jd_file onlinelayout==Files link only V3.2} before the first actual Download.  Also you can set the default Content Plugin in the jDownload Configuration - Plugin Tab.

It maybe that the Downloads are to be listed with some text as shown opposite.

Layout "Files link and icon v3.2" is used.

Direct entry of the text and code would appear as shown opposite: <div>{jd_file onlinelayout==Files link and icon v3.2}</div>
<div><em>Some heading text</em></div>
<div>1st file:{jd_file file==25}</div>
<div>2nd file: {jd_file file==31}</div>
<div>3rd file: {jd_file file==65}</div>
<div>4th file: {jd_file file==5}</div>
<div><em>Some Ending Text</em></div>
In the JCE editor it would look like:  Single02AA  

It is also possible to show several Downloads as an unordered list.   Here the Downloads are contained in a <ul> ...</ul> rather than a <div> sequence. It could of course be an Ordered list by using <ol> ... </ol>.

Layout "Files icon link and featured v3.2" is used.

The direct entry or code view would be: <div>{jd_file onlinelayout==Files icon link and featured v3.2}</div>
    <li>{jd_file file==25}</li>
    <li>{jd_file file==31}</li>
    <li>{jd_file file==65}</li>
    <li>{jd_file file==5}</li>
 The view in the JCE editor:  Single03A  

As well as inserting individual Download links there are also Content Plugin calls to list Downloads from  

  • Show Downloads from a single or several Categories: For example {jd_file category==15,3,41,6 count==12} will list upto 12 Downloads from those categories with IDs 15, 3, 41 and 6.
  • Listing latest, top and last updated from any category: {jd_file cat_updated==17,3,15 count==6} lists the 6 most recently updated Downloads selected from the categories with IDs 17, 3 and 15.
  • Listing latest, top and last updated from multiple categories: {jd_file cat_hottest==12,13,3 count==5} lists the 5 most downloaded Downloads from the categories with IDs 12,13 and 3.
The next example shows a listing of all the Downloads in a specific category. again using layout "Files icon link and featured v3.2" . Category01
The direct code entered is <div>{jd_file category==3 count==0}</div>
In the JCE Editor it would appear as: Category01A

And now examples of Latest, Hottest and Updated.



Only the top 3 in each case are shown in this example, again using layout "Files icon link and featured v3.2" .

Direct code is: <div><strong>Latest</strong></div>
<div>{jd_file latest==3}</div>
<div>{jd_file hottest==3}</div>
<div>{jd_file updated==3}</div>

In the JCE editor it would appear as:


With a little more effort the sequential listing could be arranged in columns as illustrated. LatestHottestUpdated03

In this case the direct code would be as opposite. 


The different vertical spacing is because the 'featured star' is 48px high. So adding some custom CSS setting the minimum heignt to 48px would equalise the rows.v

<div style="float: left;">
    <div>{jd_file latest==3}</div>
<div style="float: left;padding-left:8px;">
    <div>{jd_file hottest==3}</div>
<div style="float: left;padding-left:8px;">
    <div>{jd_file updated==3}</div>

Some Technical Details

When the Plugin code is generated from the short code { ...  } then jDownloads adds specific CSS class names to the plugin enclosing <div> dependent upon the actual form of the plugin.

For example with a file short code such as {jd_file file==25} then the plugin code itself starts with <div class="jd_content jd_content_plugin jd_content_file">

For say a Hottest short code {jd_file hottest==3} the plugin code starts with <div class="jd_content jd_content_plugin jd_content_hottest">

This then allows each type of Content plugin to have its own styling. For instance in the three column example above each column could have had its own background colour.

Appendix - Selecting <div> mode

The 'default' mode of most WYSIWYG editors such as JCE and Ark is the Paragraph mode.  It is very sraight forward to change the mode to <div>.

JCE Editor



For the JCE editor the 'editing' controls typically appear as opposite.


A simple Pull Down selection offers several 'modes'.

In this case select Div.

Obviously one can switch back and forth between the modes.


An advantage of the JCE editor is that it may be set to show the 'mode' of each block as indicated in the second picture opposite.

In most instances I use the Div mode all the time.


 Ark Editor



The default setup for Ark is shown opposite.

 For Ark select Normal (DIV).  This then uses <div> ... </div> blocks.  ARK02

Colin Mercer July 2016

Print Email