Documentation Droppics

 

introduction

Droppics est une extension Joomla utilisée pour générer des galeries et gérer les images de manière intelligente et productive.

 

Droppics-main

Caractéristiques principales:

  • Créez une galerie avec une lightbox en 3 clics seulement
  • Utilisez Droppics dans l'éditeur et dans l'interface
  • Gérer des vidéos parmi des images
  • AJAX multi-upload
  • Génération de vignettes lors du téléchargement
  • Personnalisation de l'affichage sans CSS
  • Régénérez des images à partir de formats originaux et personnalisés
  • Thème de conception de la galerie inclus
  • Galeries multi-niveaux
  • Commandez des images et des galeries par glisser-déposer
  • SEO optimisé

 

I. INSTALLATION DE DROPPICS

1.1 Installer

Notre composant est compatible avec Joomla 3.x. Toutes les fonctionnalités et les intégrations tierces sont incluses dans toutes les adhésions.
Pour installer notre composant, vous devez télécharger le fichier .zip et utiliser le programme d'installation Joomla standard.

 

joomla-install

 

Cliquez ensuite sur Parcourir> Bouton Télécharger et installer. Le composant, les modules et les plugins seront installés et activés par défaut.

 

1.2 Mise à jour et mise à jour automatique

Pour mettre à jour l'extension, vous pouvez installer une nouvelle version par-dessus l'ancienne en téléchargeant le fichier .zip à partir de JoomUnited ou utiliser le programme de mise à jour automatique (conseillé).

 

droppic-update

 

Le programme de mise à jour automatique, qui envoie la notification de mise à jour, est intégré à l'extension Joomla que vous avez installée. Vous serez averti comme avec n'importe quelle autre extension du tableau de bord, ou vous pouvez vérifier manuellement en utilisant le menu: Extension> Gérer> Menu de mise à jour.

 

Connectez-vous à votre compte pour mettre à jour

Vous devez vous connecter à votre compte JoomUnited pour mettre à jour toutes vos extensions JoomUnited Joomla. Pour vous connecter, accédez à la configuration principale du composant, puis cliquez sur le bouton Onglet mise à jour en direct. En bas, vous trouverez un bouton de connexion.

 

mise à jour en direct

 

Entrez vos mêmes informations d'identification JoomUnited que vous avez utilisées pour vous connecter à www.joomunited.com

 

login-joomunited

 

Le bouton deviendra orange - félicitations! Vous pouvez maintenant mettre à jour toutes les extensions JoomUnited sur ce site! Si votre adhésion est expirée, vous obtiendrez un lien de renouvellement et un texte expliquant cela.

 

lié au compte

 

Remarque: un seul identifiant vous permettra de mettre à jour toutes les extensions JoomUnited (en ce qui concerne votre adhésion). La connexion n'expire que si vous la déconnectez.

II. GALERIES DROPPICS

L'idée principale de Droppics est de définir des paramètres d'image et de galeries dans le composant, puis de les gérer directement à partir de votre éditeur. Droppics fonctionne sur chaque éditeur WYSIWYG standard Joomla, aussi bien pour le front-end que pour le back-end. Par exemple, vous pouvez ajouter une galerie dans un module Joomla personnalisé.


Lorsque Droppics est installé, un bouton de plug-in d'édition est affiché ci-dessous ou dans votre éditeur (en fonction de l'éditeur utilisé).

 rédacteur-gérant

Cliquez dessus pour ouvrir la lightbox principale Droppics.

 

galerie de la lightbox

 

2.2 Gérer les galeries

Pour créer une galerie, cliquez sur Nouvel album dans la colonne de gauche.

 

nouvelle galerie

 

Remarque: une galerie par défaut est déjà créée lors de l'installation du composant.


Pour ajouter de nouvelles images dans votre galerie, vous pouvez faire glisser un média dans la partie centrale ou cliquer sur Bouton Sélectionner des fichiers.

 

Importer des images

 

Une fenêtre de notification apparaîtra dans le coin supérieur droit après le téléchargement, la commande, le déplacement, la suppression ou la modification des images par l'utilisateur.

 

notification-popup-file

 

Sélectionnez une ou plusieurs images pour les télécharger. Le programme de téléchargement est optimisé par HTML5, vous pouvez donc envoyer de grandes images. Ils seront automatiquement redimensionnés aux tailles définies dans les paramètres globaux (1200px par défaut).


Vous pouvez réorganiser vos images lors de leur téléchargement par glisser-déposer. L'ordre est enregistré automatiquement, c'est pourquoi il n'y a pas de boutons pour enregistrer

dragndrop-image-order

Pour insérer la galerie dans votre article, cliquez sur le bouton Insérer cette galerie bouton dans la colonne de droite

 

contenu-galerie-insert


 
La galerie se matérialisera dans votre article avec un Icône Droppics.

 

galerie-matérialisée

 

Enregistrez votre contenu et vous avez terminé - votre première galerie est déjà en ligne! Si vous cliquez sur l'image de la galerie Droppics dans l'article, puis sur le bouton Droppics, vous rechargerez la galerie sélectionnée.

Remarque: si cette option est activée dans la configuration, vous pouvez configurer les paramètres d'affichage dans chaque galerie à partir du menu de droite.

 

Le thème par défaut vous permet de définir:

  • Taille de la frontière
  • Rayon de la frontière
  • Couleur de la bordure
  • Couleur et taille de l'ombre de l'image
  • Marge à gauche, marge en haut, marge à droite, marge en bas
  • Que ce soit pour charger des sous-galeries ou non
  • Certains paramètres supplémentaires sont disponibles dans le thème du diaporama, tels que le délai de transition, l'effet ...

 

2.3 Sous-galeries

Dans Droppics, vous pouvez gérer des galeries multi-niveaux. Pour ajouter un sous-niveau de galerie, il suffit de faire glisser les catégories d’images pour trier ou modifier les niveaux.

 

order-image-gallery

 

Pour activer la navigation dans les sous-galeries, vous devez configurer le paramètre dans la catégorie parente à partir du menu de droite.

 

sous-galeries

 

Si vous avez désactivé les paramètres et la configuration de la galerie à partir de la configuration globale, utilisez le menu Composants> Droppics> Options> Sélectionner le thème à configurer.

 

paramètres-sous-galeries

 

Comme vous avez des sous-galeries, vous pourrez les naviguer dans l’interface. Toutes vos sous-galeries généreront automatiquement des vignettes de navigation.

 

sous-galeries-frontend
 

La vignette de la sous-galerie est générée automatiquement à l'aide de la première image de la catégorie d'images. Une fois dans une sous-galerie, vous pouvez également choisir une image à utiliser comme bouton de retour dans le menu contextuel. Option> Paramètres principaux menu.

 

catégorie de repli

 

Un état par défaut du niveau de la galerie peut être défini dans les options globales de la partie admin: ouvrez Droppics avec toutes les catégories d'images ouvertes ou fermées. Cela peut vous faire gagner de la place si vous avez un grand nombre de galeries.

 

close-image-category

 

2.5 Copier - Couper - Coller des images

Une fois qu'une image a été téléchargée sur Droppics, vous pouvez effectuer une ou plusieurs sélections en cliquant dessus. Vous pouvez sélectionner plusieurs images en maintenant la touche CTRL enfoncée. La première méthode pour déplacer ou copier des images consiste à utiliser le glisser-déposer. Glisser-déposer seul déplace l'image, glisser-déposer tout en maintenant la touche Maj enfoncée pour copier les images.

 

glisser-déposer l'image

 

Vous pouvez également utiliser les boutons en haut à droite.

 

boutons copier-coller

 

III. GESTION D'IMAGES UNIQUES


3.1 Options d'affichage d'image unique

Avec Droppics, vous pouvez utiliser les mêmes images dans vos galeries ou comme une seule image dans votre contenu. Ouvrez Droppics, cliquez sur une image et le panneau de droite changera. Dans la partie supérieure, vous pouvez définir:

  • Rayon de la frontière
  • Marge
  • Taille de la frontière
  • Couleur de la bordure
  • Taille de l'ombre
  • Couleur de l'ombre
  • Alignement

 

image-parameter1

 

N'oubliez pas de cliquer sur Enregistrer une fois que vous avez terminé votre modification.

Tous ces paramètres peuvent être configurés par défaut pour toutes vos images dans les options du composant.

 

paramètre de fichier unique

 

Ensuite, vous pouvez définir une action sur un clic image avec un lien externe facultatif et une légende (texte sous votre image):

 

image-parameter2

 

L'action au clic déterminera si l'utilisateur va:

  • Ouvrir l'image dans une lightbox
  • Suivre un lien vers un article ou un menu
  • Suivre un lien vers une URL personnalisée
  • Ne fais rien

Légende de l'image:

  • Suivez le lien personnalisé dans la vue de la galerie
  • Afficher la légende

L'option de case à cocher "Suivre le lien personnalisé dans la vue Galerie" ajoute le comportement du lien à une seule image, mais fonctionne également dans la vue Galerie si vous insérez la galerie entière dans votre contenu. Cette fonctionnalité est fréquemment utilisée pour les pages de portfolio.

Le lien vers les menus et les articles est complété par un outil pour vous aider à trouver votre contenu plus facilement dans une liste.

 

galerie de liens d'images

 

Lorsque vous cliquez sur une seule image, vous avez la possibilité de remplacer l’image sur l’ensemble de votre site Web Joomla. Téléchargez-en une nouvelle et Droppics régénérera toutes les tailles d'image, y compris les tailles personnalisées, et la remplacera dans votre contenu!

 

remplacer l'image

 

Si activé le Aperçu de l'image paramètre dans les réglages, vous pouvez même activer un effet d’image survolé à la souris.

 

image de survol

 

Et le processus de téléchargement aussi.

 

processus de téléchargement

 

3.2 Créer des tailles d'image personnalisées

Vous pouvez créer des images de taille personnalisée à l'aide des fichiers d'origine. L'image d'origine reste intacte. Clique sur le nouvelle taille bouton radio, définissez au moins une largeur et un nom de fichier pour générer une nouvelle image. Le nouveau nom et la nouvelle taille du fichier image seront ajoutés à la liste.

 

taille d'image personnalisée

 

Les tailles d'image personnalisées peuvent également être générées automatiquement lors du téléchargement. Pour définir les tailles personnalisées, utilisez le menu: Composant> Droppics> Options> Images individuelles> Tailles personnalisées.

Vous pouvez ensuite ajouter les formats personnalisés d’image que vous souhaitez créer par défaut lors du téléchargement.

 

image de taille personnalisée

 

Une fois que l'image personnalisée est générée, vous l'aurez dans votre liste d'images. Ensuite, cliquez simplement sur insérer cette image à ajouter dans votre article.

 

image dans le contenu
 
En cliquant à nouveau sur l'image et sur la Droppics bouton, l'image sera ouverte à nouveau avec tous ses paramètres.

 

re-open-image

 

À des fins de référencement, vous pouvez définir un titre, un texte alternatif et modifier le nom de fichier d'origine.

 

seo-image-info

 

3.3 Appliquer des effets sur l'image

Vous pouvez appliquer des filtres et des effets sur les images. A droite de la taille de l'image, cliquez sur le bouton Icône du stylo «modifier».

 

effet ouvert

 

Vous verrez un écran avec des effets.

 

image-effet-vue


 
Vous pouvez appliquer des modifications et des effets:

  • Surgir
  • Redimensionner
  • Miroir
  • Tourner
  • Appliquer des effets de style

 

IV PARAMÈTRES DROPPICS


4.1 Paramètres d'extension


Pour accéder aux paramètres Droppics, utilisez la commande Composant> Droppics> Options menu.

 

paramètres globaux

 

  • Taille de la vignette: la taille de toutes les vignettes générées lors de l'importation d'images ou affichées dans des galeries et sous forme d'images uniques
  • Taille moyenne: la taille de l'image agrandie, utilisée dans la visionneuse, par exemple
  • Taille de téléchargement d'origine: la taille de l'image d'origine stockée sur le serveur, utilisée pour générer de nouvelles tailles
  • Images sensibles: lui permettre de générer 2 nouvelles tailles d’images avec des largeurs de 768px et 300px qui seront chargées sur les écrans des appareils mobiles
  • Afficher le titre de la lightbox: affiche le titre de l'image quand une image est ouverte dans une lightbox
  • Taille des images dans la lightbox: la taille des images s'affiche dans la lightbox; si tu choisis Grand, n'oubliez pas de régénérer les images de son dossier si vous ne l'avez jamais fait auparavant
  • Qualité JPG: définir la qualité de vos images .jpg
  • Compression PNG: utilisez-le si vous souhaitez compresser vos images lors du téléchargement

 

option de recadrage

  • Recadrage de l'image: vous pouvez recadrer vos images lors du téléchargement en fonction de la taille que vous avez définie au début, sinon le rapport entre les images sera respecté
  • Fermer les catégories: charger la vue ouverte / fermée des catégories / sous-catégories d'administrateurs
  • Définir des options de défilement infini: charger l'image progressivement, plutôt que toutes les images du chargement de la page
  • Eléments d'abord chargés: Nombre d'éléments chargés initialement
  • Eléments chargés en ajax: Nombre d'éléments chargés en ajax
  • Charger le thème dans la catégorie: Charger et modifier les paramètres de thème dans chaque catégorie de fichier
Remarque: si vous changez la taille de l’image ou activez la fonction responsive, vous devez effectuer une Régénération des vignettes. Cliquez sur le bouton et régénérez toutes les tailles d'image.

 

régénération des vignettes

Cela peut prendre un certain temps en fonction du nombre d’images, soyez patient :)

4.2 Gestion des autorisations et des images frontales


Droppics utilise la liste de contrôle d'accès par défaut de Joomla pour définir l'accès à la gestion des images. Par défaut, le super administrateur aura toujours accès à toutes les galeries.
 
Si vous devez limiter l'accès à certains utilisateurs, placez-les au moins dans le groupe des administrateurs ou créez un nouveau groupe d'utilisateurs Joomla. Par exemple, si vous souhaitez qu'un utilisateur administrateur accéder et éditer uniquement leurs propres images, ensemble "Éditer" droit de "refuser" et "éditer propre" en "autorisé". Vous pouvez également limiter:

  • Accès à la configuration Droppics
  • Accès d'interface
  • Création d'image / galerie
  • Suppression d'image / galerie
  • Edition / propre édition de fichier

 

droppics-permission

Droppics offre la possibilité de gérer les images depuis l’interface en utilisant le bouton de l’éditeur (comme dans le côté de l’administrateur) ou en utilisant une interface dédiée. Lors de l'installation de Droppics, un modèle est ajouté à cet effet.
Utilisez un menu Joomla pour charger Droppics dans le frontend. Naturellement, toutes les autorisations que vous avez configurées seront respectées.

Ajoutez un menu Joomla et configurez le Style de modèle frontal Droppics.

 

droppics-menu

 

Ensuite, si vous y êtes autorisé, vous pouvez gérer les images à partir de l'interface du site Web.

 

Frontend-image-edition

 

4.3 Thèmes et paramètres d'image

Avec Droppics, vous pouvez autoriser la définition du thème et du paramètre d’image dans chaque catégorie d’image et d’image, ou uniquement en tant que paramètre global.

 

paramètres de chargement

 

Tous les paramètres de thème de la configuration globale ne seront appliqués que si vous n'autorisez pas les modifications dans la catégorie d'image.

 

thèmes-configuration

 

Voici l'illustration des paramètres de thème autorisés et non autorisés dans les catégories d'images. Dans la deuxième image, vous pouvez uniquement changer de thème, mais pas les paramètres.

 

Options du thème

 

4.4 Vidéos à distance

Droppics peut inclure des vidéos distantes de Youtube, Vimeo et Dailymotion parmi les images. Pour activer cette option, utilisez le Composant> Droppics> Options> Ajouter des vidéos distantes menu.
Vous pouvez également définir la largeur par défaut de la vidéo lorsqu'elle est ajoutée en tant que vidéo unique ou chargée dans une lightbox.

 

vidéo à distance

L'activation de ce paramètre ajoutera un bouton au-dessus du bouton de téléchargement.

 

add-remote-video

 

La seule chose que vous devez ajouter est l'URL de la vidéo.

 

add-remote-video-url

 

4.5 Importateur d'images Droppics

Droppics dispose d’un importateur de supports capable de parcourir et d’importer des images de votre serveur. Pour activer cette option, allez à la Composant> Droppics> Options> onglet Paramètres principaux> Afficher le paramètre d'importation d'images.

 

importation d'images

 

Utilisez ensuite l’interface principale Droppics pour sélectionner des supports et les importer dans la catégorie souhaitée.

 

sélection des importateurs

 

4.6 Image en filigrane

Droppics peut automatiquement appliquer un filigrane (copyright) sur vos images. Tout d'abord, vous devez activer le Images en filigrane fonction de la configuration du composant.

 

activer le filigrane

 

Sélectionnez ensuite l'image en filigrane à appliquer sur vos images - il peut s'agir de n'importe quelle image, mais faites attention à la dimension.

 

choisir un filigrane

 

Il y a 5 positions où vous pouvez placer le filigrane:

  • Centre
  • En bas à gauche
  • En bas à droite
  • En haut à droite
  • En haut à gauche

 

position du filigrane

 

Les tailles possibles lorsque le filigrane est appliqué sont les suivantes:

  • Toutes les tailles
  • La vignette
  • Grand
  • Moyen
  • Format personnalisé

Remarque: Le filigrane sera appliqué uniquement après avoir enregistré les paramètres et régénéré les vignettes (cliquez sur le bouton "Régénérer les vignettes").

 

image en filigrane

 

V. THÈMES DROPPICS

5.1 Présentation des thèmes


Droppics est livré avec 6 thèmes:

  • Thème par défaut
  • Thème Masonry: c’est un thème réactif qui affiche des murs de photos
  • Diaporama pour afficher un carrousel d'images
  • Un thème de design de type polaroid
  • Thème Heapshot, qui est une pile de photos avec un bel effet permettant de basculer entre elles
  • Thème de diaporama avancé personnalisé, avec un éditeur de texte personnalisé sur les images

 

galerie-theme-image-params

 

 


Une fois que vous avez appliqué un thème à une galerie, vous pouvez éventuellement définir des options relatives à un thème sur une seule image. Par exemple, ici, j'ai configuré le thème de la galerie en tant que diaporama avancé. Je peux donc ajouter du texte sur l'image.

 

Thème de diaporama personnalisé


Dans le thème masonry, vous pouvez définir la largeur maximale de l'image.

 

masonry-config

 

VI. CONSEILS ET ASTUCES DROPPICS

Droppics est conçu pour être utilisé dans tous les champs de l'éditeur WYSIWYG - il suffit que le plug-in de contenu soit appelé. La plupart du temps, il est activé par défaut.
Notez que ce n'est pas le cas dans le module HTML personnalisé de Joomla - vous devez l'activer comme ci-dessus.

 

module personnalisé

 

Dans l'onglet Option, vous devez définir le option Préparer le contenu à Oui.

 

6.2 Créer / remplacer un thème Droppics

Vous pouvez personnaliser et ajouter des thèmes à Droppics. Nous n'utilisons pas les substitutions MVC standard, mais le système de plug-ins par défaut de Joomla.
Les thèmes Droppics sont des plugins et sont situés dans le dossier / plugins / droppics.

Vous devrez copier un plugin et changer le nom du plugin pour créer votre nouveau plugin (pluginname.xml et le nom de la classe du plugin).
Ensuite, installez-le via le programme d'installation standard de Joomla. Cela devrait figurer dans la liste des thèmes. Vous pouvez ensuite effectuer toutes les modifications souhaitées dans ce thème et les mises à jour ne l’affecteront pas.