Featured Downloads

jDownloads supports featured Downloads.

Downloads may be featured just like Joomla! articles with an featured01trans30symbol.  Actually as described later there are several different 'star' images from which you may select. And you can add your own star symbol.

Further you may have different styling in the usual Layouts that just applies to featured Downloads.  An example is shown below where the first download has been featured and the following one is a 'regular' Download.  In this demonstration the 'featured' Downloads use a bright yellow based colouring but in the released version a more muted styling is used to blend better with most templates.

featured example2

Configuration Settings

The first question to answer is how to do you make a Download featured.  Again like Joomla! it is done from the backend.  Simply go to the Downloads tab from the jDownloads control panel. This shows a 'Featured' column. Just click on the 'star' icon to change the status.  You can also sort into featured and regular Downloads by clicking on the Featured column heading

featured03A 

The next aspect is to choose your default 'star' symbol.  This is found in Configurarion - Pictures tab at the end of the Icon Settings section, which is just before the CSS Buttons Settings section

featured04

Layout Changes

Implementing the Featured Downloads requires changes to existing layouts to include additional placeholdes.  There are three extra place holders

  • {featured_pic}
  • {featured_class}
  • {featured_detail_class}

To illustrate the changes we will use the "Standard Files Layout without Checkboxes v2.5" layout.  Actually we will use a modified version that has used style= " ... " to add existing style elements as this is compatible with HTML5 where some previously used descriptors are now 'deprecated'. Because various different levels of styling are available this article progressively defines four different layouts. Three of these are useful in regular Downloads listing, and the fourth one is aimed at use with the Content plugin.  Note that all layouts will, over time, be bought up to at least this standard.

If you are unsure about editing Layouts then you may find the articles in the layout section of the documentation useful Editing a Layout

The main part of the "Standard Files Layout without Checkboxes v2.5" comprises three sections:

  1. a Files Title - {files_title...} - section
  2. the first table which will be referred to here as the Intro Section
  3. a second table wich contains the decscription, some details and any preview pics, and any video or audio preview, which is called here the Details Section

  Displaying the featured download Star symbol

The simplist level of denoting that a download is 'featured' is to just add a 'Star' image to the download.  This uses the place holder {featured_pic} in the activated Files layout.  In many respects it is just like the {file_pic) placeholder.

Using for example the Standard Files Layout without Checkboxes v2.5, a new layout was constructed by using the layout Save & Copy function. 
The first edit to this layout is the addition of a 'star' in the Intro section of the Download which will only show if the Download has been marked as featured.  The result is illustrated opposite.

featued10

The relevant part of the layout is shown opposite. It has a additional line which, solely for documentation purposes, is highlighted.  The widths of the other <td> elements in the line weere adjusted appropriately.

The new line includes the placeholder {featured_pic}

 

The advantage of incuding it in its own table cell <td> is to keep all parts visually aligned whether or not the Downloaded had been 'featured'.

<table style="width: 100%; padding:3px; background-color:#F5F5F5; border-collapse: collapse important!; ">
   <tr  style="vertical-align: middle;">
      <td style="width:65%;">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</td>
      <td style="width:10%;font-weight: normal; text-align: center;">{rating}
      </td>
      <td style="width:10%; text-align: center;">{featured_pic} </td>
      <td style="width:15%; text-align: center;">{url_download}</td>
   </tr>
   <tr><td>{tags}</td></tr>
</table>

Styling the Intro Section Layout to support Featured Downloads

The second example layout adds the class= "{featured_class}" into the Intro <table> element.    Note the " marks around {featured_class}

If the Download is Featured it will change this to class = "jd_featured".

If the layout is not featured then no class name is generated.

Clearly to have any effect then the relevant css must be included.

The result is shown in the first example above.

<table class= "{featured_class}" style="width: 100%; padding:3px; background-color:#F5F5F5; border-collapse: collapse important!; ">
   <tr  style="vertical-align: middle;">
      <td style="width:65%;">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</td>
      <td style="width:10%;font-weight: normal; text-align: center;">{rating}
      </td>
      <td style="width:10%; text-align: center;">{featured_pic} </td>
      <td style="width:15%; text-align: center;">{url_download}</td>
   </tr>
   <tr><td>{tags}</td></tr>
</table>

 A new class .jd_featured is included in jdownloads_fe.css.  For this example the css as shown opposite was used.

It may be overridden by including a different version in jdownloads_custom.css

.jd_featured {
    font-weight: bold;
    color: green;
    background: linear-gradient(to bottom, #F2D413 0%,#DDEA69 100%);
}

Featuring the Detailed Section

The third edit of the layout added the class= "{featured_detail_class}" into the second <table> element.   The other parts of the layout are the same as the example above

If the Download is Featured it will change this to class = "jd_featured_detail".

featued11

The modified Layout is shown opposite. 

Having two classes available simplifies the styling.

<table class = "{featured_detail_class}"  style="padding:3px; border-collapse: collapse !important; width: 100%;">    
   <tr style="border-bottom: 2px solid #6C6C6C !important;">
      <td   style="vertical-align: top; text-align:left; width: 70%;">{description}<br />{mp3_player}<br />{mp3_id3_tag}</td>
      <td style="vertical-align: top;">{screenshot_begin}<a href="/{screenshot}" rel="lightbox"> <img src="/{thumbnail}" align="right" /></a>{screenshot_end}
      </td>
      <td   style="vertical-align: top; text-align:left; width: 15%;"> {created_date_title}<br /> {filesize_title}<br /> {hits_title}<br /> </td>
      <td style="vertical-align: top; text-align:right; width: 10%;">{created_date_value}<br />{filesize_value}<br />{hits_value}<br /></td>
   </tr>
</table>
The css in this example is much the same for both classes but of course there are many posibilities. .jd_featured_detail {
    font-weight: bold;
    color: #963D3D;
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
}

 Featured Content Items

The Content Layout in this example appears as a single line

using a layout called "Files Layout Single Line V3.2"

<table class ="{featured_class}" style=" width: 80%; padding:3px; border: 2px solid black;">
   <tr style="vertical-align: middle,">
      <td  style="width: 70%;">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</td>
      <td style="width: 15%;text-align: left;">{url_download} </td>
      <td style="width: 15%; text-align: right;">{featured_pic} </td>
   </tr>
</table>
 The result is shown opposite.  featured07

The actual CSS used is shown opposite. It provides for both old and new browsers.

 

 /*  items for featured */
.jd_featured {
background: #feffe8 !important; /* Old browsers */
background: -moz-linear-gradient(top,  #feffe8 0%, #d6dbbf 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #feffe8 0%,#d6dbbf 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #feffe8 0%,#d6dbbf 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ) !important; /* IE6-9 */
}
.jd_featured_detail {
background: #d6dbbf !important; /* Old browsers */
background: -moz-linear-gradient(top,  #d6dbbf 0%, #feffe8 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d6dbbf 0%,#feffe8 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d6dbbf 0%,#feffe8 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6dbbf', endColorstr='#feffe8',GradientType=0 ) !important; /* IE6-9 */
}
Its appearence in the released version is much less bright. featured08

Colin Mercer Nov 2015

Print Email

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