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 lightbox in 3 clics
  • Use Droppics from the editor and in frontend
  • Manage videos among images
  • AJAX multi upload
  • Thumbnails 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'n drop
  • SEO optimized

 

I. DROPPICS INSTALL

1.1 Install

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

image7

 

Then click on Browse > Upload and Install button, component, modules and plugins will be installed 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).

image9

 

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

 

Login to your account to update

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

image10

 

Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com

image11

 

The button will turn orange, congrats! 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 explain that.

image12

 

Note: one single login will allow you to update all the JoomUnited extensions (regarding your membership). Login 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 then manage them directly from your editor. Droppics works on every Joomla standard WYSIWYG editor, both for frontend and backend. For example you can add a gallery in a custom Joomla module.

2.1 Open gallery manager from text editor


When Droppics is installed you have an editor plugin button displayed below or in your editor (depending of 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 gallery in the left column

new-gallery
 

Note: a default gallery is already created on component install


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

upload-images

 

Then select one or some images to upload them. The uploader is HTML 5 powered, 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'n drop. Without saving button, order is saved automatically.

dragndrop-image-order

 

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

insert-gallery-content


 
Gallery will be materialized 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, then on Droppics button, you will reload the gallery selected.

Note: if activated in the configuration you can setup display paramaters in each gallery on the right side.

 

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
  • Load sub galleries or not
  • Some additional paramaters are available on slideshow themes like transition delay, effect...

 

2.3 Sub galleries

In Droppics you can manage multi-level galleries. In order to add gallery sublevel just drag’n drop image categories to sort or change levels.

order-image-gallery

 

To activate subgallery navigation, you'll need to setup the parameter in the parent category (right column)

sub-galleries

 

If you've disabled the gallery settings and setup that 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 through on frontend. All your sub-galleries with auto-generate navigation thumbnails.

subgalleries-frontend
 

The subgallery thumbnail is automatically generated using the first image of the image category. Once you're in a subgallery you can force an image to be loaded as a Previous navigation from the menu Option > Main Parameters

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 amount 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 selection by clicking on it. You can select several pictures by maintaining CTRL. The first method to move or copy pictures is to use drag'n drop. Drag'n drop alone will move the picture, drag'n drop + MAJ 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, the right panel will be developed and you’ll be able to setup on the top part:

  • 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 paramatere can be setup by default for all your images in the component option.

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:

  • Enlarge 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" add the link behavior on single image but also on 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

 

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

image-replace

 

 

3.2 Create custom image sizes

You can create some custom sized images from the original one (the original will remain untouched). Click on new size, define at least a width and a file name to generate a new image. The image file 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 Droppics button, the image will be opened again with all it's parameters.

re-open-image

 

For SEO purpose you are able to define title, alt and change original filename

seo-image-info

 

3.2 Applying effects on image

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

open-effect

 

Then you’ll have a screen with effect tools.

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 to Droppics parameters, use the menu Component > Droppics > Options.

global-parameters


 

  • Thumbnail size: the size of all thumbnail generated on import, in gallery and for single images
  • Picture size: the size of the enlarged image, used in the lightbox for example
  • The full picture size: the size of the original image stored on the server, use to generate new sizes
  • Display lightbox title: display the image title when an image is opened in a lightbox
  • The jQuery call to avoid conflict, don’t touch if it works ;)
  • The image 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 admin categories/sub-categories view opened or closed
  • Define infinite scrolling options: load image progressively, not all images on page load

Note: if you change image size you’ll get a Thumbnail regeneration notice that explains that you need to regenerate it. Please click on it and regenerate all images sizes.
 

thumbnail-regeneration

 

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

 

4.2 Permission and frontend image management


Droppics is using Joomla default ACL to set access to image management. By default Super admin user will always have access to all galleries.
 
If you need to restrict access for some user, put them at least in 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:

  • The Droppics configuration access
  • The interface access 
  • The image/gallery creation
  • The image/gallery deletion
  • Edition/own edition

droppics-permission

Droppics gives an option to manage images from frontend using the editor button (like in admin side) or using a dedicated interface. On Droppics install a template is added to do that.
Then use a Joomla menu to load Droppics on frontend. All the persmission you've setup will be respected of course.

Add a Joomla menu and setup the Droppics frontend template style

droppics-menu

 

Then, if you're allowed, you can manage images from the website 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

 

So, all the themes 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 setting allowed and not allowed in image categories. On the second picture you can only switch the theme but not change theme settings.

theme-options

 

4.3 Remote videos

Droppics can manage remote videos from Youtube, Vimeo and Dailymotion among images. To activate the option use the menu Component > Droppics > Options > Add remote videos
You can also define here the default width of the video, 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.4 Droppics image importer

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

image-import

 

Then from the Droppics main interface you'll be able to select some media and import it in the category you want

importer-selection

 

4.5 Image watermark

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

enable-watermark

Then select watermark image to apply hover your images, it can be any image, just beware of the dimension.

select-watermark

 

Watermark position, there are 5 positions for you to place watermark:

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

watermark-position

 

 

Here is all types of size to apply watermark.

  • All sizes
  • Thumbnails
  • Full
  • Custom size

Note: Watermark will be applied only after saving the settings and regenerate the thumbnails (hit 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 witch is a stack of photo with a nice effect to switch between
  • Custom advanced slideshow theme with custom text editor over images

 

gallery-theme-image-params

 

 


Once you applied a theme on gallery you may be able to setup theme related option on single image. For example here I've setup the gallery theme as the advanced slideshow, so I'm able to add some text over the image

Custom-slideshow-theme


Or on the masonry theme, I can setup the image max width

masonry-config

 

VI. DROPPICS TIPS ANS TRICKS

Droppics is built to be used in every WYSIWYG editor field, you just need to have content plugin to be called. Most of the time it’s activated by default.
It’s not the case in the Joomla HTML custom 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, but we don't use the standard MVC Overrides but the Joomla default plugin system.
Droppics themes are plugins and they are located in the folder /plugins/droppics

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