- 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 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
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.
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 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.
Enter your the same JoomUnited credentials that you use to log in on www.joomunited.com
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.
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.
2.1 Open the 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 and drop media in the center part or click on Select files button.
A notification popup will be displayed in the top right corner after images are uploaded, ordered, moved, removed or edited by the user.
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
In order to insert the gallery in your article, click on the Insert this gallery button in the right column
The gallery will materialize 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, and then on the Droppics button, you will reload the selected gallery.
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...
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.
To activate sub-gallery navigation, you'll need to setup the parameter in the parent category from the menu on the right.
If you've disabled the gallery settings and setup 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 them in the frontend. All your sub-galleries will auto-generate navigation thumbnails.
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.
2.4 Gallery behaviour in the 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 number of galleries.
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.
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, and the right panel will change. From the top part you can define:
- 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:
- Open the image in a lightbox
- Follow a link to an article or a menu
- Follow a link to a custom URL
- Do nothing
Caption of the image:
- Follow custom link in gallery view
- Show caption
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.
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!
If activated the Image preview parameter in the settings, you can even activate a mouse hover image effect.
And the uploading process as well.
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.
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 purposes you can define title, alternative text and change the original filename.
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.
You will be shown a screen with effects.
You can apply modifications and effects:
- Apply some styling effects
IV. DROPPICS PARAMETERS
4.1 Extension parameters
To access the Droppics parameters, use the Component > Droppics > Options menu.
- 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
- 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
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 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.
Then, if you're allowed, you can manage images from the website's 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.
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.
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.
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.
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 has a media importer that is able to browse and import images from your server. To activate the option go to the Component > Droppics > Options > Main parameters tab > Show images import parameter.
Then use the Droppics main interface 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 the Images watermark feature from the component configuration.
Then select the watermark image to apply over your images - it can be any image, but pay attention to the dimension.
There are 5 positions where you can place the watermark:
- Bottom Left
- Bottom Right
- Top Right
- Top Left
The possible sizes when the watermark is applied are:
- All sizes
- Custom size
Note: The watermark will be applied only after saving the settings and regenerating the thumbnails (click 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, 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
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.
In the masonry theme, you can set up the image's max width.
VI. DROPPICS TIPS AND TRICKS
6.1 Load a gallery in a custom HTML module
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.
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.