Adding images to a Download

As well as adding text to describe the contents of a Download one can also add multiple images, audio previews and video previews.  This article deals with adding an image.  As always the actual display of what is shown and where it is shown on the front end view is determined by the active layout.   Typically the two layout classes are the Files layout and the Details layout. In the layouts for historic reasons images are referred to as 'screenshots'.

When an image is added to a download through the upload process as described later then jDownloads automatically creates a thumbnail picture.  It is this thumbnail which is actually shown by the active Files or Details layout .  If the user clicks on the thumbnail then a lightbox function is actioned in a separate window showing the image at full size.

After adding an image the result is a thumbnail perhaps something like shown opposite.

AddImage01
And if one clicks on the image the result is a full size version in a lightbox view, in a separate window or tab. AddImage02

Adding Images

Images may be added Automatically or Manually. Automatic image creation may occur in certain situations as defined in the jDownloads Configuration section below. First we will show adding images manually.

 

Images may be added from the backend Admin  or from the front end Create or Edit Upload Form.

To add one or more images from the back end select Downloads from the jDownloads Control Panel and then click on the selected Download. Or create a new Download.

Then Select the Images Tab to get the actual selection panel as shown opposite.

AddImage03

Click on the Browse button and select the image from your device.

Each image will be uploaded as it is selected and a thumbnail version will be created.

Several images may be added if required. Here two have been added.

AddImage04

Adding an Image from the front end is similarly straight forward.  Either use an Upload menu item to create a new Download (see article Create Download Menu Item) or click on the edit pencil of an existing Download as shown opposite.

In either case select the Images Tab  or go to the Images section.

Note: Tabs appear if you have selected to use tabs in the "Use Tabs in Frontend Upload Form" field in the "Group Creation/Editing Settings" section of the User Groups Settings for the relevant User Group.

AddImage05

If the Images Tab or section does not appear it is likely that you have not 'ticked' the 'Add an Image' box in the "Group Creation/Editing Settings" section of the User Groups Settings for the relevant User Group.  Alternatively it could be that the user belongs to multiple User Groups and you have not 'ticked' the 'Add an Image' box in the User Group with the highest Ranking.  See articles Introduction to User Group Settings and Which User-Group is Used? for more information on User Groups Settings. 

jDownloads supports up to 10 images per Download

AddImage17

After clicking on the browse button you can select an image from your device in the normal way.  In this example two images have been upload.  The first one is a Koala and the second one is a wobbegong, both were originally downloaded from the Joomla! demonstration. 

When you have finished uploading then Save as usual.

jDownloads will automatically make and save thumbnail versions as well as saving the main images.

AddImage18

The Download as shown in the Files layout will appear something like that shown opposite.

It is immediately obvious that only one thumbnail is being shown even though two images were uploaded!

This is not a bug.  It is just that the default Files layouts only have one placeholder to show images.  As noted later this is a case of editing the layout to include the number images you wish to show.

AddImage19

However if one views the Download Details then both images appear.

Actually the default Download Details layout is setup to show up to the maximum of 10 images.

As would be expected clicking on an image thumbnail will show the full size image in a lightbox view either in the same window or in a separate window/tab dependent upon your browser setup.

AddImage20
   
   

Configuration - Basic Setup

The setup is in Configuration - Pictures tab

Note to create thumbnails your web hosting service needs to have the GD library installed.  If it is installed then a message, in green text, "Status: GD Library is present." If it is not installed then a message in red text appears.  Contact your hosting service if the GD library is not installed

There are three basic setting in the 'Thumbnails Settings' section in the Configuration - Pictures tab

.The two principle settings are the maximum height and the maximum width of a thumbnail image.  When resizing jDownloads maintains the aspect ratio, that is in general only the relevant maximum is used.

The third setting allows all thumbnails to be re-sized to a new set of sizes. Set the field to 'Yes' and click on Save. After resizing has completed this field is automatically reset to 'No'.

Configuration - Automatic Image Generation

If the upload is a graphics file of type jpg, png or gif then there are configuration options to to have a preview file created automatically.  Parameters define the size ofthe preview picture and the thumbnail is generated to the standard thumbnail size as specified above.  This action may also be turned on for auto monitoring.

Similarly if the upload file is a pdf then jDownloads may be set to auto-generate an image of the front page

Note this option requires Imagmagik to be present.  If it is then there will be a status message, in green text, "Status: ImageMagick PHP Module 'Imagick' is present." If it is not installed then a message in red text appears.  Contact your hosting service if Imagmagik is not installed.

How Images are Displayed - Layouts

If one looks at the main part of a Files layout the Image is actually displayed by a {thumbnail} place holder.  For example a fragment of a part of the "Standard Files Layout without Checkboxes v2.5" when viewing the raw html code is shown below.

<td valign="top">{screenshot_begin}<a href="/{screenshot}" rel="lightbox"> <img src="/{thumbnail}" alt="" align="right" /></a>{screenshot_end}</td>

 Note the enclosing {screenshot_begin} and {screenshot_end} place holders.  Also <a tag with its the reference to the lightbox to show the full picture.

 To show more images the lines containg sections  such as those opposite need to be included

 That is the relevant files layout needs to be edited.  In this example Flie layout "Standard Files Layout without Checkboxes v2.5" was modified.

 

{screenshot_begin2}<a href="/{screenshot2}" rel="lightbox"> <img src="/{thumbnail2}" align="right" /></a>{screenshot_end2}
{screenshot_begin3}<a href="/{screenshot3}" rel="lightbox"> <img src="/{thumbnail3}" align="right" /></a>{screenshot_end3}

As described in articles http://www.jdownloads.net/documentations/item/editing-a-layout and http://www.jdownloads.net/documentations/item/simple-example-of-layout-editing the first action was to make a copy, so now we are using "Standard Files Layout without Checkboxes v2.5 (2)"

The result of editing the layout is shown opposite where now both images are shown.  The way the layout is modified may not be clear to some less experienced users. So details of the changes made are given in the appendix below.

AddImage22

 Appendix  Editing "Standard Files Layout without Checkboxes v2.5 (2)" to show more images.

The main section of the layout is in thee parts:

  1.  a {files_title_begin} part
  2. a <table> part
  3. a second <table> part

It is the third part which is modified.  The Header and Footer sections are not changed in this example

First Part.

This is just giving the Files title to allow for different languages.

{files_title_begin}<div style="background-color:#EFEFEF; padding:6px;">{files_title_text}</div>{files_title_end}

Second Part.

This part give the Download title and its basic charaacteristics.

<table width="100%" style="padding:3px; background-color:#F5F5F5;">
   <tr valign="middle">
      <td width="55%">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</td>
      <td width="20%">
          <p align="center">{rating}</p>
      </td>
      <td width="25%">
          <p align="center">{url_download}</p>
      </td>
   </tr>
   <tr><td>{tags}</td></tr>
</table>

 

Third Part.

This is the part which has been changed.  The Table, which is set to occupy 100% of the available width, has two rows <tr>....</tr>

The first row has just one cell, <td> ... </td> .   It will output an Audio preview if one is included with the Download.

The second row has been re-arranged.  It has three Cells with widths set to 75%, 15% and 10% respectively.

The first cell contains the images arranged in an enclosing <div> with an unorder list <ul> ...</ul> and then with with each image sequence as an individulal list element <li>...</li>.  As shown up to three images if present will appear on the front end.  With more images they will automatically flow in the available space cascading images as required.  To gain confidence try with say 6 or 7 images.  Also try with different sized thumbnails.

The enclosing <div> requests the browser to reserve some space in the cell and which it will compute from the dimensions of the items in the cell. 

Note at the end of the list there is a <div style="clear: both;"> </div>  . This effectively tells the browser to start a new 'area' below the existing areas.  It may be thought of as the equivalent of a spacial 'new line'.

<table width="100%" style="padding:3px;">    
   <tr>
      <td width="75%" align="left" valign="top">{description}<br />{mp3_player}<br />{mp3_id3_tag}</td>
</tr>
<tr>
      <td width="75%" align="left" valign="top">     
            <div id="thumbs">
                <ul id="jdmain">
                    <li>{screenshot_begin}<a href="/{screenshot}" rel="lightbox"> <img src="/{thumbnail}" alt="" align="right" border="0" hspace="10" vspace="0" /></a>{screenshot_end}</li>
                    <li>{screenshot_begin2}<a href="/{screenshot2}" rel="lightbox"> <img src="/{thumbnail2}" alt="" align="right" border="0" hspace="10" vspace="0" /></a>{screenshot_end2}</li>
                    <li>{screenshot_begin3}<a href="/{screenshot3}" rel="lightbox"> <img src="/{thumbnail3}" alt="" align="right" border="0" hspace="10" vspace="0" /></a>{screenshot_end3}</li>
                </ul>
            <div style="clear: both;"> </div>
            </div>
</td>
      <td width="15%" valign="top"> {created_date_title}<br /> {filesize_title}<br /> {hits_title}</td>
      <td text-align="right" width="10%" valign="top">{created_date_value}<br />{filesize_value}<br />{hits_value}</td>
   </tr>
</table>

 

Colin Mercer July 2015

  • Tuesday, 14 July 2015
  • Posted in: FAQ