Layouts Overview - an introduction

This article gives a general overview of Layouts available withjDownloads 3.2 v42 and higher . These layouts, all identified with  v3.2 in their name, use a <div> based structure so as to be even more responsive, especially on smaller devices. Layouts are the html code fragments that jD uses to dynamicly construct particular page views on the front end.  With an understanding of layouts you may control the look and feel of the views created by the jDownloads Component. Some people consider them as 'mini-templates'.  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.

Example images of the layouts on different devices are available at http://www.jdownloads.com/index.php/downloads/category/9-layout-views-v3-2.html  Please note that since the images were taken there have been minor enhancements.

First where does one find the layouts?  On the jDownloads Admin  Control Page just click on Layouts.  This takes you to the main Layouts page. For more details see http://www.jdownloads.net/documentations/item/editing-a-layout

There are a total of 18 layouts in the initial release of the v3.2 versions, including four new ones. New installations of jDownloads only have the v3.2 div based layouts.  Updating from jDownloads from jDownloads 3.2 v41 or earlier will have both the div layouts and the now deprecated v2.5 table based layouts. For consistency the older v2.5 table style layouts remain as the activated ones. The v3.2 set has some new layouts.

Only the v3.2 div based layouts are discussed in detail here but reference is made to the older v2.5 set. If you are new to jD then it is suggested you try out the various layouts in each class to see which suits your site best.  The v3.2 layouts have been designed to produce views that are generally consistent with the older style v2.5 layouts but with emphasis on responsiveness to screen size and resolution. If you anticipate your site will be used on multiple different devices then we strongly recommend you switch to the v3.2 versions.  Please also note that the v3.2 layouts make use of CSS classes so that it is easy to override by using jd_custom.css.

To switch from v25 to v32 layouts see the v25 to v32 note at the end of this document.

For simplicity jD organises Layouts  into six sections denoting their primary purpose and this is reflected in the Layouts page in the jD Admin section. Only one Layout in a section is 'activated' at any one time.

  • Categories - Four layouts. The regular Categories layouts are used in the initial view of a 'List All Categories' menu type item.  The special Subcatgories layout in this set is never activated but is used automatically whenever a single category is shown.
    1. Standard Categories Layout v3.2.  Top level Categories are shown in a single column, good when using category descriptions.
    2. Categories Example with 4 columns v3.2. Top level Categories are shown in four columns. A bit cramped when used on small devices.
    3. Categories Example with 2 columns v3.2. This is a new layout. It works well on all devices.
    4. Subcategories ( Standard Categories Layout for paginated Subcategories 3.2).  Used automatically whenever sub cats are shown. It only has a Main part but also a Before and After sub parts.
  • Category - One layout. This layout is used when there is a single layout being shown, any sub categories are displayed by the special Subcategories layout.
    1. Standard Category Layout v3.2. Shows the selected Category and any available subcategories.
  • Files - Seven layouts.  Used to diplay initial details of a Download with links to initiate the Download.  For more information on configuring the links see  http://www.jdownloads.net/documentations/item/download-actions-direct-via-summary-page-or-via-download-details
    1. Standard Files Layout v3.2.   A relatively simple layout that features mini icons for information details.
    2. Standard Files Layout with Checkboxes v3.2.  Like its v2.5 counter part this layout only works with views initiated by the 'List All Categories' or the 'Show Single Category' menu item types.  It provides checkboxes that allow selecting multiple Downloads for downloading.
    3. Standard Files Layout without Checkboxes v3.2.  Similar to the above layout but without checkboxes.
    4. Files Layout Full Info v3.2  As the name suggests it shows more information.
    5. Alternate Files Layout v3.2.  A compact layout that has a 'read more' function that shows the active Download Details view.
    6. Files Layout Single Line v3.2. A layout that is well suited for use with the Content plugin. New layout when minimal info is to be shown.
    7. Files link only v3.2, another new layout well suited to the Content plugin as it is just the Download title.
  • Download Details - Three layouts.  See link above when this view is used.  As the name suggests it is intended to provide more information about the Download to the user.
    1. Standard Details Layout v3.2 - Full Info.  This is the usual default Download Details layout.
    2. Example Details Layout v3.2.  This is an alternative form of the Full Info layout above.
    3. Example Details Layout with Tabs v3.2.  This is a more compact layout showing the same information with a tab structure.
  • Summary - One layout
    1. Standard Summary Layout v3.2.  This layout is often the last one in initiating a download.  It will always appear if the Download requires acceptance of a licence, a Captcha, a passwod or similar specific actions.
  • Search - Two layouts. Used for jD searches.  Note these layouts cannot change what is searched as that is embedded in the main jD code. They do not have a 'main' part.
    1. Search Form Vertical Layout v3.2 - Standard. This search layout has the criteria arranged in a vertical column.
    2. Search Form Horizontal Layout v3.2.  A new layout that is more compact.

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.

To gain some understanding of which part of a layout does what, it is not necessary to know the details of the HTMLcode used, or even understand HTML in any depth.  In the discussions and examples below we show both the HTML code and the resultant view on the screen, but we do not delve into the technical details in this article!  The objective is to give an overview.  Perhaps the only HTML knowledge that is helpful is to understand that in nearly all cases each HTML statement type has a defined 'start code' and a defined 'end code'.  In this article the most frequently used start and end pairs are <div> and </div>. And most usefully such a statement may have other statements contained within it.  Indenting is used to give a clearer visual picture.

As described in more detail in the article http://www.jdownloads.net/documentations/item/editing-a-layout?category_id=36  there are four parts to every layout.  That article also shows where different parts from different layouts are used in constructing a view. 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 seee which 'lines' need deleting or modifying.  And of course you can always ask in the Forum.

Using CSS classes gives considerable uniformity and allows simple overrides by using either style="..." clauses in the HTML or by adding your specific CSS in your jd_custom.css file. To learn more about the jd_custom css file see http://www.jdownloads.net/documentations/item/custom-css.  However to gain some understanding of which part of a layout does what, we repeat that it is not necessary to know the exact details of HTML and CSS.  Below we show both the HTML code and the resultant view on the screen, but we do not delve into the technical details in this article!

The four parts of a layout are: header sub header, main and footer.  The header and the footer parts are the simplest so we will take a look at those first. 

As noted earlier 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

http://www.jdownloads.net/documentations/item/simple-example-of-layout-editing?category_id=36

Header

A typical header part  generates a view such as illustrated opposite. The ciorresponding HTML code is given below the image of the view

For example the Add and its icon only appears if you have permission to create a new Download. The Up does not appear if there is no preceding Category.

layout header01

The HTML code is very straight forward. There is a surrounding <div>  ... </div> pair with five other <div> .. </div>. pairs inside.  The outer <div> pair is often called a 'wrapper'. Each of the inside <div> pairs has a { ... } placeholder which from its name one can understand what it creates.

The placeholders are replaced by jD with the appropriate images and text. If parts of the information does not exist or they not meant to appear then they are automatically removed. For example the Add and its icon only appear if you have permission to create a new Download. The Up and its icon do not appear if there is no preceding Category. Hence one might also see headers such as below, all generated from the same header layout.

layout header04

layout header03

 layout header00
layout header02  

So if one did not wish to see,for example, the search icon and text then the edit could be to simply remove the line <div style="">{search_link}</div> in the copy of the layout, and then activate the modified layout.  Note that you would in this situation have to modify the header parts of layouts in different layout sections.

Footer

The footer is even simpler.

The navigation on the right appears if you have turned Navigation on in the Configuration.

And the 'Powered by jDownloads' may be turned off if you have contributed.

layout footer01
The HTML code is again very straight forward. layout footer00

Subheader

This is the subheader taken from Files Layout Full Info v3.2

The exact form of some parts, such as the small arrowheads in the navigation, may vary depending on what images your site template provides.

layout subheader01

Once more the HTML code is fairly straight forward and it is reasonably obvious which line is responsible for which part of the view.

Note the two lines with class="jd_clear". These in effect force the browser to continue the view as a fresh "block" on the page, a sort of graphical new line.

layout subheader00

Main 

The main part of the Layout is obviously more complex as it is showing many possible parts of the entire Download. 

The example opposite is  using  the Standard Files Layout without Checkboxes v3.2.

This example has been used because it has many of the possible parts of a Download. 

It is important to note that if the Download does not have some parts then they will not appear or take any space in the view.

To show the relationship between the layout code and the generated view then the main view has been split into three parts just for illustration purposes.

layout main01C

The first part is the Title with Ratings, Featured symbol, and so on together with the Description and the first Image. As an attempt to illustrate which bit of code is reponsible for which part of the view various 'code fragments' are linked by an arrow to the part they generate.  Note the wrapper div around the title parts and that it has the {featured_class} place holder.  This is to allow featured Downloads to say have a different background colour or other ways to make it stand out in addition to the feature symbol.

layout main02A 

 The second section of the layout code in this example creates the detailed information block.  It has a very obvious structure so it is relatively simple to remove or add extra 'lines'.

Available place holder 'pairs' in files 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}

layout main02B

The video or audio together with any supplementary information come from just two lines in the layout.

layout main02C

The HTML makes extensive uses of class="   " clauses and generally has a blank style="" to make it easier to add overrides to any styling.  This will be dealt with in more depth in a separate article.

Just for comparison the images below show the same view on an Apple iPhone 5, which has a CSS resolution 320x568 and pixel resolution 640x1136,  and a Samsung Galaxy Y, which has a CSS & pixel resolution 240x320. More modern phones typically have a better resolution than the Samsung Galaxy Y.

layout I5 01 layout I5 02 layout Samsung Y 01 layout Samsung Y 02
       

Converting from v25 to v32 layouts

To switch over is generally very simple as each of the Standard v25 layouts has a corresponding v32 layout.  You need to Activate  the corresponding layout in each of the six types.  These have been designed to mimic the old table based v25 layouts.

The only exception is the switch from 'Standard Categories Layout for paginated Subcategories' to 'Standard Categories Layout for paginated Subcategories 3.2'.  These layouts are never activated.  Rather they are 'edited' by changing the "Use for Subcategories?" field to Yes for the v32 version and to No for the table based v25 version.

  • This 'editing' is to click on the 'Standard Categories Layout for paginated Subcategories' name which will open up the editor.  Ensure you have the Edit Layout tab active and scroll down to the "Use for Subcategories?" field.  It is the fifth item. Then use the pulldown to change from 'Yes' to 'No', then Save & Close. 
  • For the 'Standard Categories Layout for paginated Subcategories 3.2' the same procedure except setting field "Use for Subcategories?" to Yes. Remember to sSave & Close.

Colin Mercer March 2016 revised July 2016

  • Saturday, 05 March 2016