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 images.  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.  The two layout classes are the Downloads layout and the Download Details layout.  In the layouts, for historic reasons, images are referred to as 'screenshots'.

After adding an image the result in the Downloads view is shown as a thumbnail as something like shown opposite.

AddImage01
When an image is added to a download then jDownloads may be set to automatically create a thumbnail picture.  If the automatic creation is not set then jDownloads remakes the thumbnail every time!  The thumbnail is  shown by the active Downloads or Download Details layout.  If the user clicks on the thumbnail then a lightbox function is actioned in a separate window or tab showing the image at full size.

Note: All Download image directories are stored in the Joomla! subdirectory: /images/jdownloads/.  By default none of these images are deleted if jDownloads is uninstalled.
AddImage02
Adding Images
Images may be added Automatically or Manually.  Automatic image creation may occur in certain situations as noted in the jDownloads Options section below.  Images may be added from the backend Admin or from the front end Create or Edit Upload form. 

First we will show adding images manually.

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 Additional Data Tab to get the actual selection panel as shown opposite.
AddImage03

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

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

The images will be uploaded when you Save or Save & Close.  If selected in Options, thumbnail versions will be created.
AddImage04
If you look at the Download again you will see that thumbnails of each image has been added.

To remove an image then 'untick' near its top left corner.  The image will be removed when you do a Save or a Save & Close.

You may also view the image at full size in a separate tab or window by clicking on it.
AddImage04A
 
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.
AddImage05
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.  Using tabs is strongly recommended.

In this example the relevant User Group setting has been set to allow a maximum of 3 images.

AddImage23
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.  AddImage17A 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.
After clicking on the browse button you can select an image from your device as decribed above.  In this example two images have been selected.  The first one is a Koala and the second one is a wobbegong, both of these are Joomla! demonstration images.

The images are uploaded saved when you do a Save or Save & Close.  jDownloads will optionally make and save thumbnail versions as well as saving the main images.

The view in the Downloads Details view is like that on the far right.  In the Downloads viwe only the first image will appear as the layout is only configured for one image.
AddImage18 AddImage24
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.

Options - Basic Setup
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,   "Contact your hosting service if the GD library is not installed" will be shown.

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

The first two determine if thumbnails are to be created automatically.  The usual situation is Yes for both.

The next four are the maximum height and the maximum width of the thumbnais and the enlarged images. 

When resizing jDownloads maintains the aspect ratio, that is only the relevant maximum is used.
AddImage26
The final setting allows all thumbnails to be re-sized to a new set of sizes. AddImage27
Set the field to 'Yes' and click on Save. After resizing has completed this field is automatically reset to 'No'.
 


Options - Automatic Image Generation from PDF files
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."

If the downloadable file is a pdf file and if the 'Create Thumbnails from PDF files' is set to Yes these settings will create a preview file and its thumbnail automatically.

This action may also be turned on for auto monitoring.

The preview picture and the thumbnail are generated to the sizes as specified opposite. 

jDownloads maintains the aspect ratio, that is only the relevant maximum is used.
AddImage28

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" when viewing the raw html code is shown below that is in 'code view' not 'editor' view.

 <div class="jd_image_right">{screenshot_begin}<a href="/{screenshot}" rel="lightbox"><img src="/{thumbnail}" /></a>{screenshot_end}</div>

To show a second image then just copy the above line and then add a 2 to make {screenshot_begin} into {screenshot_begin2} and simarly make {screenshot_end} into {screenshot_end2} as illustrated below.  Obviously for yet more images add further lines but changing to 3, 4 and so on as appropriate.  The 'index' value referes to the order in which pictures were added.

<div class="jd_image_right">{screenshot_begin2}<a href="/{screenshot}" rel="lightbox"><img src="/{thumbnail}" /></a>{screenshot_end2}</div>

For more details on editting layouts see the DOCUMENTATION LINK HERE

Colin Mercer June 2019

Print Email

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