Droppics documentation

 

Introduction

Droppics is a Joomla extension used to generate galleries and manage images in a smart and productive way.

Droppics-main

Main features:

  • Create a gallery with a lightbox with just 3 clicks
  • Use Droppics from the editor and in the frontend
  • Manage videos among images
  • AJAX multi-upload
  • Thumbnail generation on upload
  • Display customization without CSS
  • Regenerate images from original & custom sizes
  • Gallery design theme included
  • Multi-level galleries
  • Order images and galleries with drag and drop
  • SEO optimized

 

I. DROPPICS INSTALL

1.1 Install

Our component is compatible with Joomla 3.x. All the features and 3rd party integrations are included in all memberships.
In order to install our component you have to download the .zip file and use standard the Joomla installer.

image7

 

Then click on Browse > Upload & Install button. The component, modules and plugins will be installed and activated by default.

 

1.2 Update & automatic updater

In order to update the extension you can install a new version over the old one by downloading the .zip file from JoomUnited or use the automatic updater (recommended).

droppic-update

The automatic updater, which pushes the update notification, is embedded in the Joomla extension you've installed. You'll get notified like with any other extension in the dashboard, or you can check manually using the menu: Extension > Manage > Update menu.

 

Log in to your account to update

You need to log in to your JoomUnited account to update all your JoomUnited Joomla extensions. In order to log in, access the main configuration of the component, and then click on the Live update tab. At the bottom, you'll find a login button. 

image10

 

Enter your the same JoomUnited credentials that you use to log in on www.joomunited.com

image11

 

The button will turn orange - congratulations! You can now update all the JoomUnited extensions on this website! If your membership is expired you'll get a renew link and a text that explains that.

image12

 

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). The log in won't expire unless you disconnect it.

II. DROPPICS GALLERIES

The main idea of Droppics is to set parameters of image and galleries in the component, and then manage them directly from your editor. Droppics works on every Joomla standard WYSIWYG editor, both for the frontend and for the backend. For example, you can add a gallery in a custom Joomla module.


When Droppics is installed you have an editor plugin button displayed below or in your editor (depending on the editor in use).

 editor-gallery-manager

Click on it to open the main Droppics lightbox.

lightbox-gallery

 

 

2.2 Manage galleries

In order to create a gallery, click on New Album in the left column.

new-gallery

Note: a default gallery is already created upon component installation.


 To add new images in your gallery you can drag and drop media in the center part or click on Select files button.

upload-images

 

A notification popup will be displayed in the top right corner after images are uploaded, ordered, moved, removed or edited by the user.

notification-popup-file

 

Select one or some images to upload them. The uploader is powered by HTML5, so you can send big images. They will be resized automatically to the sizes defined in the global parameters (default is 1200px).
You can reorder your images when they are uploaded using drag and drop. Order is saved automatically, which is why there are no buttons to save.

dragndrop-image-order

 

In order to insert the gallery in your article, click on the Insert this gallery button in the right column.

insert-gallery-content


 
The gallery will materialize in your article with a Droppics icon.

gallery-materialized

Save your content and you're done - your first gallery is already online! If you click on the Droppics gallery image in the article, and then on the Droppics button, you will reload the selected gallery.

Note: if activated in the configuration you can set up display parameters in each gallery from the right-hand menu.

 

The default theme allows you to define:

  • Border size
  • Border radius
  • Border color
  • Image shadow color and size
  • Margin left, margin top, margin right, margin bottom
  • Whether to load sub-galleries or not
  • Some additional parameters are available in the slideshow theme, like transition delay, effect...

 

2.3 Sub-galleries

In Droppics you can manage multi-level galleries. In order to add a gallery sub-level just drag and drop image categories to sort or change levels.

order-image-gallery

 

To activate sub-gallery navigation, you'll need to setup the parameter in the parent category from the menu on the right.

sub-galleries

 

If you've disabled the gallery settings and setup from the global configuration, use the menu Components > Droppics > Options > Select the theme to setup.

settings-subgalleries

 

Since you have sub-galleries, you will be able to navigate them in the frontend. All your sub-galleries will auto-generate navigation thumbnails.

subgalleries-frontend
 

The sub-gallery thumbnail is automatically generated using the first image in the image category. Once you're in a sub-gallery you can also choose an image to use as a back button from the Option > Main Parameters menu.

fallback-category

 

A default state of the gallery level can be set in the global options for the admin part: open Droppics with all image categories opened or closed. It can save you space if you have a massive number of galleries.

 

close-image-category

2.5 Copy - Cut - Paste images

Once a picture has been uploaded to Droppics, you can make a single/multiple selections by clicking on it. You can select several pictures by pressing and holding CTRL. The first method to move or copy pictures is to use drag and drop. Drag and drop alone will move the picture, drag and drop while pressing and holding Shift will copy the pictures.

drag-drop-image

You can also use the top right buttons.

copy-paste-buttons

 

III. SINGLE IMAGE MANAGEMENT


3.1 Single image display options

With Droppics, you can use the same images in your galleries or as a single image in your content. Open Droppics, click on an image, and the right panel will change. From the top part you can define:

  • Border radius
  • Margin 
  • Border size
  • Border color
  • Shadow size
  • Shadow color
  • Alignment

image-parameter1

 

Don't forget to hit save once you're finished with your modification.

All those parameters can be setup by default for all your images in the component options.

single-file-parameter

 

Then, you can define an action on image click with an optional external link and a caption (text under your image):

image-parameter2

 

The action on click will determine if the user will:

  • Open the image in a lightbox
  • Follow a link to an article or a menu
  • Follow a link to a custom URL
  • Do nothing
  • See a caption below the image

The checkbox option "Follow custom link in gallery view" adds link behavior to a single image, but it also works in the gallery view if you insert the whole gallery in your content. This feature is frequently used for portfolio pages.

The link to menus and articles is completed by a tool to help you to find your content easier in a list.

image-link-gallery

 

When clicking on a single image, you have an option to replace the image all over your Joomla website. Upload a new one and Droppics will regenerate all image sizes including custom sizes, and replace it in your content!

image-replace

 

If activated in the settings, you can even activate a mouse hover image effect.

hover-image

 

 

3.2 Create custom image sizes

You can create some custom sized images using the original files, and the original image will remain untouched. Click on the new size radio button, define at least a width and a file name to generate a new image. The image file's new name and size will be added to the list.

image-custom-size

 

The custom image sizes can also be generated automatically on upload. To define the custom sizes use the menu: Component > Droppics > Options > Single images > Custom sizes.

Then you can add the image custom sizes you want to be created by default on upload.

custom-size-image

 

Once the custom image is generated you’ll have it in your image listing. Then simply click on insert this picture to add in in your article.

image-in-content
 
By clicking back on the image and on the Droppics button, the image will be opened again with all its parameters.

re-open-image

For SEO purposes you can define title, alternative text and change the original filename.

seo-image-info

 

3.3 Applying effects on image

You can apply filters and effects on images. At the right side of the image size, click on the “edit” pen icon.

open-effect

 

You will be shown a screen with effects.

image-effect-view


 
You can apply modifications and effects:

  • Crop
  • Resize
  • Mirror
  • Rotate
  • Apply some styling effects

 

IV. DROPPICS PARAMETERS


4.1 Extension parameters


To access the Droppics parameters, use the Component > Droppics > Options menu.

global-parameters

  • Thumbnail size: the size of all thumbnails that are either generated when importing images, or which are displayed in galleries and as single images
  • Medium size: the size of the enlarged image, used in the lightbox, for example
  • Original upload size: the size of the original image stored on the server, used to generate new sizes
  • Responsive images: enable it to generate 2 new image sizes with widths of 768px and 300px that will be loaded on mobile device screens
  • Show lightbox title: display the image title when an image is opened in a lightbox
  • Images size in lightbox: the size of the pictures show in lightbox; if you choose Large, remember to regenerate pictures for its folder if you have never done it before
  • JPG quality: set your .jpg images' quality
  • PNG compression: use it if you want to compress your images on upload

crop-option

  • Image cropping: you can crop your images on upload based on the size you've defined at the beginning - otherwise the image ratio will be respected
  • Close categories: load the admin categories/sub-categories view opened or closed
  • Define infinite scrolling options: load image progressively, rather than all images on page load
  • Elements firstly loaded: Number of elements loaded initially
  • Elements loaded in ajax: Number of elements loaded in ajax
  • Load theme in category: Load and change theme parameters in each file category
Note: if you change image size or activate the responsive feature you need to perform a Thumbnail regeneration. Please click on the button and regenerate all image sizes.

thumbnail-regeneration

It may take a while depending on the number of images, just be patient :)

4.2 Permission and frontend image management


Droppics uses Joomla's default ACL to set access to image management. By default, the Super admin user will always have access to all galleries.
 
If you need to restrict access for some user, put them at least in the administrator group or create a new Joomla user group. For example if you want an administrator user to access and edit only their own images, set “edit” right to "denied" and "edit own" to “Allowed”. You can also restrict:

  • Droppics configuration access
  • Interface access 
  • Image/gallery creation
  • Image/gallery deletion
  • Editing/own file editing

droppics-permission

Droppics gives an option to manage images from the frontend using the editor button (like in the admin side) or using a dedicated interface. When installing Droppics, a template is added to do just that.
Use a Joomla menu to load Droppics in the frontend. Naturally, all the permissions you've set up will be respected.

Add a Joomla menu and set up the Droppics frontend template style.

droppics-menu

 

Then, if you're allowed, you can manage images from the website's frontend.

Frontend-image-edition

 

4.3 Themes and image settings

With Droppics you can allow the theme and image parameter to be defined in each image and image category, or only as a global setting.

load-theme-parameters

 

All of the theme settings from the global configuration will only be applied if you don't allow the modifications to be done in the image category.

themes-configuration

 

Here's the illustration of the theme settings allowed and not allowed in image categories. In the second picture, you can only switch the theme, but not change theme settings.

theme-options

 

4.4 Remote videos

Droppics can include remote videos from Youtube, Vimeo and Dailymotion among images. To activate the option use the Component > Droppics > Options > Add remote videos menu.
You can also define the default width of the video for when it's added as a single video or loaded in a lightbox.

remote-video

Activating this setting will add a button above the upload button.

add-remote-video

 

The only thing you need to add is the URL of the video.

add-remote-video-url

 

4.5 Droppics image importer

Droppics has a media importer that is able to browse and import images from your server. To activate the option use the Component > Droppics > Options > Load image importer menu.

image-import

 

Then use the Droppics main interface to select some media and import it in the category you want.

importer-selection

 

4.6 Image watermark

Droppics can automatically apply a watermark (copyright) on your images. First, you need to enable the Images watermark feature from the component configuration.

enable-watermark

Then select the watermark image to apply over your images - it can be any image, but pay attention to the dimension.

select-watermark

 

There are 5 positions where you can place the watermark:

  • Center
  • Bottom Left
  • Bottom Right
  • Top Right
  • Top Left

watermark-position

 

 

The possible sizes when the watermark is applied are:

  • All sizes
  • Thumbnail
  • Large
  • Medium
  • Custom size

Note: The watermark will be applied only after saving the settings and regenerating the thumbnails (click the ''regenerate thumbnails'' button).

image-watermark

 

V. DROPPICS THEMES

5.1 Themes presentation


Droppics comes with 6 themes:

  • Default theme
  • Masonry theme: this is a responsive theme that display photo walls
  • Slideshow theme to display an image carousel
  • A polaroid-like design theme
  • Heapshot theme, which is a stack of photos with a nice effect to switch between them
  • Custom advanced slideshow theme, with a custom text editor over images

 

gallery-theme-image-params

 

 


Once you apply a theme on a gallery you may be able to set up theme-related options on a single image. For example, here I've set up the gallery theme as the advanced slideshow, so I'm able to add some text over the image.

Custom-slideshow-theme


In the masonry theme, you can set up the image's max width.

masonry-config

 

VI. DROPPICS TIPS AND TRICKS

Droppics is built to be used in every WYSIWYG editor field - you just need to have the content plugin called. Most of the time it’s activated by default.
Note that this is not the case in the Joomla custom HTML module - you need to activate it like above.

custom-module

 

In the option tab you need to set the option Prepare content to Yes.

 

6.2 Create/override a Droppics theme

You can customize and add themes to Droppics. We don't use the standard MVC Overrides, but the Joomla default plugin system.
Droppics themes are plugins and they are located in the /plugins/droppics folder.

​You'll have to copy one plugin and change the name of the plugin to create your new plugin (pluginname.xml and the class name of the plugin).
Then install it through the standard Joomla installer. It should be shown in the list of themes. You can then do all the changes that you want in this theme and it will not be affected by updates.