Layouts Overview - an introduction [NEEDS REFs]

Layouts are how jDownloads displays Categories and Downloads in the Front End.
This article gives a general overview of the Layouts available with jDownloads.  Layouts are the html code fragments that jDownloads uses to dynamicly construct particular page views on the front end.   Some people consider them as 'mini-templates'.   With an understanding of layouts you may control the look and feel of the views created by the jDownloads Component.  The layouts are responsive to different screen sizes as they use a < div> .. < /div> based html structure.

You can edit and change the layouts and this is discussed in other articles about layouts, the principle thing to note about editing layouts however is that you should always make a copy first and resist the temptation to edit an existing  default layout directly.  There are several good reasons for making a copy, firstly if it goes wrong then you can quickly restore back to the relevant layout by simply 'Activating' the default one.  Another reason is that a jDownloads update may change one of the default layouts so all your good work could be lost. It is also simple to Export and Import layouts to make them shareable in the community, and of course to enable keeping layout backups.

First where does one find the layouts?  On the jDownloads Admin Control Page just click on Layouts in the left hand side menu.  This takes you to the main Layouts page. For more details see [NEEDS REF]

Layouts are separated into seven different types as listed below.
  • Categories: These layouts only show the  'top level' Categories. No Sub Categories or Downloads are shown when using layouts from this type.
  • Subcategories: Defines the layout for Subcategories when showing multiple categories that are not the top level categories.
  • Category:  Defines the layout when showing a single Category.
  • Downloads:  Defines the layout of the Download list.  Displayed below the active Subcategories or Category layout.
  • Download Details: Defines the layout of the Download detailed view.
  • Summary: Defines the layout of the Download summary page with the list of those files selected for downloading. This is the page where actual dowloading is initiated.
  • Search form: Defines how the search form and how the results from the frontend search function are shown.
There are typically several layouts in each section but only one layout in a section may be selected as Active. 
Most layouts have several sub sections:

, which is the first part shown.

, gives more details.

Before, rarely used but is before the first of the main section.
Main, this section shows details of a category or Download. It is repeated automatically for each Download.
After, again rarely used but is after all repetitions of the main sub section.

, appears at end of the layout
layout overview 01

The view on the screen may be constructed from subsections of different active layouts.  For instance in the above example the Header and Footer parts came from the relevant active Category header section whilst the rest came from the active Downloads layout.

Also if there is only one layout in a section then it cannot be de-activated.
In the layouts various items of information are displayed by using what are often referred to as placeholders.  These are enclosed in braces { ... }.  An example would be say {filesize_value} which would be replaced with the actual size of the file to be downloaded.  If the information is not available or should not be shown then jD automatically removes them dynamically when creating the executable code that generates the on screen view.  This is illustrated below in the various 'header' views that may be shown depending on circumstances.  The actual layout code remains unchanged as it is just a template, the 'intelligence' comes from the jD code that processes the layouts.

Layouts may of course be edited but always make a copy as the default ones may be replaced at any update!  For more information on editing layouts please see  [NEEDS REF]

The layouts are written as HTML statements and make use of CSS classes.  However to just see how the layouts relate it is not necessary to be an expert in HTML or CSS.  Usually one can see which 'lines' need deleting or modifying.  And of course you can always ask in the Forum.
Place Holders
Layouts use what are called 'place-holders' to place information associated with the Download in the view created by the layout.  These place-hoders are enclosed in { } such as {description} or {home_link}.  They are like an internal jDownload layout plugin.  These place-holders are specific to each type of layout.  More details about individual placeholders are given in[NEEDS REF]

For example the available place holder 'pairs' in the downloads layouts include: {file_name_title} {file_name} - {release_title} {release} - {file_date_title} {file_date} - {price_title} {price_value} - {license_title} {license_text} - {language_title} {language_text} - {filesize_title} {filesize_value} - {system_title} {system_text} - {author_title} {author_text} - {author_url_title} {author_url_text} - {created_date_title} {created_date_value} - {hits_title} {hits_value} - {created_by_title} {created_by_value} - {modified_by_title} {modified_by_value} - {modified_date_title} {modified_date_value} - {rating_title} {rating} - {tags_title} {tags}

Whilst generating the actual view on the screen using the layouts jDownloads will only display the relevant information that the user is permitted to see.

For instance if a Download does not have Download permission for say the Public  user group then the Download button will not appear for public users.  The two Downloads shown opposite are identical except a slight difference in name and that the second one does not have Download permission so it has no Download button.

layout overview 02
But what happens if the name of the Download has been specified to link to a Download Details view?

If the user clicks on that link they will indeed be taken to the Download Details view as illustrated opposite.  As well as not having a download button there will also be an appropriate message saying that it is not possible to download the file! layout overview 03

Another example is that sometimes only parts of the header are shown.  When showing all header parts then the view will be such as illustrated below.
layout header01
The Add button only appears if you have permission to create a new Download. The Up does not appear if there is no preceding Category.  That is if parts of the information does not exist or it is not meant to appear then they are automatically removed by jDownloads. So you may see headers such as below.
layout header04 layout header03 layout header02
Once again please note that if the data is not present then jDownloads just skips the relevant part of the layout.

ColinM August 2019

Print Email

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