Using the Content Plugin in Articles

 

 

This article concentrates on using the Content plugin to show simple links to Downloads in Joomla! articles. 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'.

Single00
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.

Single00A

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.

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.

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

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

 Single02  
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 <ol> ... </ol>.

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

 Single03  
The direct entry or code view would be: <div>{jd_file onlinelayout==Files icon link and featured v3.2}</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 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" .

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 heignt to 48px would equalise the rows.v

<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 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.

JCE03JCE04

 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

  • Thursday, 30 June 2016