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

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 Editing a Layout  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 Custom CSS in Layouts.  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! 

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.

Colin Mercer March 2016 revised July 2016

Print

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