- I. DROPPICS INSTALL
- II. DROPPICS GALLERIES
- III. SINGLE IMAGE MANAGEMENT
- IV. DROPPICS PARAMETERS
- V. DROPPICS THEMES
Droppics is a Joomla extension used to generate galleries and manage images in a smart and productive way.
- 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
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.
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).
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.
Enter your JoomUnited credentials, the same you use to login here @ www.joomunited.com
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.
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
2.2 Manage galleries
In order to create a gallery, click on New Album in the left column
To add new images in your gallery you can drag’n drop media in the center part or click on Select files button
A notification popup will be displayed on the top right corner after images are uploaded, ordered, moved, removed or edited by user.
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.
In order to insert the gallery in your article, click on Insert this gallery in the right column.
Gallery will be materialized in your article with a Droppics icon.
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.
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.
To activate subgallery navigation, you'll need to setup the parameter in the parent category (right column)
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
Since you have sub galleries you will be able to navigate through on frontend. All your sub-galleries with auto-generate navigation thumbnails.
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
2.4 Gallery behaviour in backend
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.
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.
You can also use the top right 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
- Border size
- Border color
- Shadow size
- Shadow color
Don't forget to hit save once you're finished with your modification.
Then, you can define an action on image click with an optional external link and a caption (text under your image):
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.
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!
If activated in the settings you can activate a mousehover image effect.
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.
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.
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.
For SEO purpose you are able to define title, alt and change original filename
3.3 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.
Then you’ll have a screen with effect tools.
You can apply modifications and effects:
- Apply some styling effects
IV. DROPPICS PARAMETERS
4.1 Extension parameters
To access to Droppics parameters, use the menu Component > Droppics > Options.
- Thumbnail size: the size of all thumbnail generated on import, in gallery and for 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, use to generate new sizes
- Responsive images: enable it to generate 2 new image sizes @768px and @300px width that will be loaded on mobile screen device
- Show lightbox title: display the image title when an image is opened in a lightbox
- Images size in lightbox: Size of the pictures show in lightbox. If you choose Large, remember to regenerate pictures for its folder if you never done it before
- JPG quality: set your jpg images quality
- PNG compression: use it if you want to compress your images on upload
- 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
- Elements firstly loaded: Number of elements firstly loaded
- Elements loaded in ajax: Number of elements loaded in ajax
- Load theme in category: Load and change theme parmeters in each in file category
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 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
Then, if you're allowed, you can manage images from the website frontend
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.
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.
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.
4.4 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.
Activating this setting will add a button above the upload button.
The only thing you need to add is the URL of the video
4.5 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
Then from the Droppics main interface you'll be able to select some media and import it in the category you want
4.6 Image watermark
Droppics can automatically apply a watermark (copyright) on your images. First you need to enable Images watermark feature from the component configuration.
Then select watermark image to apply hover your images, it can be any image, just beware of the dimension.
Watermark position, there are 5 positions for you to place watermark:
- Bottom Left
- Bottom Right
- Top Right
- Top Left
Here are all types of size to apply watermark.
- All size
- Custom size
Note: Watermark will be applied only after saving the settings and regenerate the thumbnails (hit the ''regenerate thumbnails'' button)
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
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
Or on the masonry theme, I can setup the image max width.
VI. DROPPICS TIPS AND TRICKS
6.1 Load a gallery in a HTML custom module
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.
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.