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

Using the jDownloads Content Button plugin to select the Download
In the following the actual code needed in an article or module to referencence a Download looks like the following {jd_file file==25} where the value 25 is the id of the required Download.
This means finding the id value which can be tedious.

The simplest way is to use the jDownloads Content Button Plugin. So the first step is to go to Extensions - Plugins and make sure that both the Content Plugin itself and the Content Button plugin are both active as illustrated opposite.
plugin01
 After activating the plugins then a button like plugin02 will be available on the Edit screen.  The position of the Download Button depends on which editor you are using, sometimes it is in the tool bar and others it is often at the foot of the article.
After clicking on the button then a popup screen like below will appear.  You can then search or scroll for the required login.  Clicking on its name will then insert the correct Content Plugin code in the article or the Module.  Actually you can also use the Content Plugin in the Description part of a Download.
plugin03
Apperance of the Content Plugin in Articles, Modules and Descriptions
If you are using a basic editor such as Code Miror or similar then the Content Plugin code would appear as opposite, where in this example the 25 is the id of the Download. <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 the image opposite.  In this case the Download and its surrounding text is again in a <div> ... </div> block. 
Note that the JCE editor may be set to show the type of 'block' element.


Single00A
So, as might be expected, the result appears as a single line in the Front End. Single00A

Now let us see what happens if a Paragraph block <p> ... </p> is used instead of a Div block <div>...</div>. 
 
The direct code as entered was: <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
But in this case there is a line break immediately before the Download link! Single05A

The reason is quite simple.  The basic HTML definition of a Paragraph is that it cannot hold another block element such as <div>.  This is consistent with ordinary language where a Paragraph does not contain an 'internal paragraph'.  Hence the browser automaticly generates a line break.

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.
  module01
In-line Layouts
There are  specific layouts available as 'inline' suitable for use in articles.  as indicated below. They are basically variations of the same layout.  The first one comes as standard with jDownloads, the other two are available in the Layout Library : in particular the Files section.
  1. Files link only    -----------------    Single04A This is a standard default Files layout which comes wlth jDownloads.
  2. Files link and icon --------------   Single04BNever shows the featured star.
  3. Files icon link and featured  --- Single04C   Only shows feature star if Download is featured.
Set the required inline layout  by using, for example  {jd_file onlinelayout==Files link only} before the first actual Download.  Also you can set the default Content Plugin in the jDownload Options - Plugin Tab.

It maybe that the Downloads are to be listed with some text as shown opposite.
Layout "Files link and icon" is used.
  Single02  
Direct entry of the text and code would appear as shown opposite:
<div>{jd_file onlinelayout==Files link and icon}</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 " was used.
  Single03  
The direct entry or code view would be:
<div>{jd_file onlinelayout==Files icon link and featured}</div>
<ul>
    <li>{jd_file file==25}</li>
    <li>{jd_file file==31}</li>
    <li>{jd_file file==65}</li>
    <li>{jd_file file==5}</li>
</ul>
 
 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" . 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" .
LatestHottestUpdated01
Direct code is:
<div><strong>Latest</strong></div>
<div>{jd_file latest==3}</div>
<div><strong>Hottest</strong></div>
<div>{jd_file hottest==3}</div>
<div><strong>Updated</strong></div>
<div>{jd_file updated==3}</div>
In the JCE editor it would appear as:
 
LatestHottestUpdated01A
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 height to 48px would equalise the rows.
<div style="float: left;">
    <div><strong>Latest</strong></div>
    <div>{jd_file latest==3}</div>
</div>
<div style="float: left;padding-left:8px;">
    <div><strong>Hottest</strong></div>
    <div>{jd_file hottest==3}</div>
</div>
<div style="float: left;padding-left:8px;">
    <div><strong>Updated</strong></div>
    <div>{jd_file updated==3}</div>
</div>
 
Some Technical Details
When the Plugin code is generated from the short code { ...  } then jDownloads adds specific CSS class names to the plugin's 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.
JCE01
A simple Pull Down selection offers several 'modes'.
In this case select Div.
Obviously one can switch back and forth between the modes.
JCE02
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.
JCE03 JCE04
 Ark Editor
 
 
The default setup for Ark is shown opposite.
  ARK01
 For Ark select Normal (DIV).  This then uses <div> ... </div> blocks.   ARK02

Colin Mercer July 2016, updated Feruary 2019

Print Email

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.