Pour la dernière partie de cette série, nous allons vous guider à travers les étapes finales de la création d'un site Web de photographie à partir de zéro à l'aide du système de gestion de contenu (CMS) Drupal.
Les sites Web créés à l’aide d’un CMS sont plus sophistiqués que ceux constitués de pages de texte fixes ou «statiques» et sont essentiels pour afficher des images.
En tant que CMS open source à usage général, Drupal possède une grande communauté de développeurs contributeurs et est populaire auprès des gouvernements, des entreprises à but non lucratif et des établissements d'enseignement.
Construire un site Web dans Drupal est plus complexe que de le faire dans d'autres CMS comme WordPress, il plaira donc aux personnes familiarisées avec l'informatique qui aiment l'idée d'aller «derrière le rideau» d'un site Web.
La récompense sera un site Web sur mesure et sécurisé construit sur une plate-forme hautement personnalisable où des fonctionnalités supplémentaires sont accordées via l'installation de modules (fonctionnalités supplémentaires) et de thèmes (qui déterminent l'apparence).
Pour arriver à ce point, nous avons commencé la construction de notre site dans un environnement local, en utilisant l'hôte local Acquia Dev Desktop.
Commencez par télécharger Acquia Dev Desktop et exécutez le programme d'installation, puis lancez le logiciel et sélectionnez Démarrer à partir de zéro.
Utilisez la valeur par défaut suggérée pour localiser les fichiers de base de code sur votre système, entrez le nom de votre site et acceptez les invites par défaut pour la version de PHP et le nom de la base de données. Choisissez v8.9.1 sous Installer une distribution Drupal, entrez les informations requises et Drupal sera installé.
Ensuite, installez le module Media Gallery et le thème Showcase Lite. Alors commencez à créer vos galeries…
Ce dont vous aurez besoin pour créer un site Web photo dans Drupal
- L'ordinateur
- accès Internet
- Images prêtes à être téléchargées
- Application de développement (nous utilisons Acquia Dev Desktop)
- Durée: 1 semaine (build)
Les trois étapes du développement d'un site Drupal
1. Commencez par configurer votre nom de domaine
Contrairement à wordpress.com, Drupal n'offre pas d'option d'hébergement, vous devrez donc prendre ces dispositions vous-même.
Avant de commencer, vous devrez également acquérir un nom de domaine pour votre site - visitez Domain.com, Bluehost ou www.123-reg.co.uk, ou recherchez un fournisseur en ligne.
Entrez le nom de votre site et vous obtiendrez une liste des extensions disponibles (.com, .co.uk, etc.) et des frais d'inscription.
2. Développez votre site Drupal sur votre propre ordinateur
Vous pouvez installer Drupal sur un site d'hébergement Web et le créer là-bas, mais le développement de votre site sur un hôte local (votre propre ordinateur) rend les choses beaucoup plus faciles. Vous pouvez créer le site à votre propre rythme, en corrigeant les éventuels problèmes et en affiner l'apparence et la convivialité au fur et à mesure.
3. Déployez le site fini chez votre hébergeur
Lorsque votre site est prêt, vous pouvez le déployer sur votre fournisseur d'hébergement. Le transfert des fichiers vers le site hôte et la configuration de tous les paramètres peuvent prendre jusqu'à un jour, mais votre site Web photo est prêt pour sa grande révélation.
Créez un site Web photo Drupal en 10 étapes
En utilisant l'environnement local Acquia Dev Desktop, nous continuons à développer notre
site avant le test et le déploiement ultérieur sur une plate-forme d'hébergement de site Web…
01 Créer des liens de menu pour les galeries
Après avoir créé certaines galeries, nous les avons liées à la navigation principale afin que les visiteurs du site puissent les parcourir facilement. Dans la zone Admin, nous avons cliqué sur Structure puis Menu principal de navigation et d'édition.
Nous avons saisi un titre pour le lien du menu, puis tapé "/ media_gallery / 1" dans le champ Lien, en répétant cette étape pour les autres galeries, en remplaçant "/ 1" par "/ 2", "/ 3", etc.
02 Amélioration de l'affichage des images
Nos galeries bénéficieraient d’une «lightbox» pour afficher les photos. La sélection d'une image ouvrirait une superposition contextuelle sur laquelle nous pouvons cliquer pour afficher toutes les images affichées dans la galerie.
Colorbox est un plug-in Lightbox populaire qui a fonctionné avec plusieurs versions de Drupal, il est donc bien établi et activement maintenu.
Vous pouvez trouver sa page ici - jetez un œil à la description du plug-in pour voir ce qu'il peut faire.
03 Téléchargez le module Colorbox
Vous remarquerez dans la description qu'il existe deux éléments distincts dans Colorbox - un module et un plug-in - et le plug-in est un téléchargement séparé.
Commençons par le module. Faites défiler la page jusqu'en bas et localisez la version de Drupal 8 (c'est la première des deux cases vertes), passez la souris sur le lien tar.gz, cliquez avec le bouton droit de la souris et sélectionnez Copier l'adresse du lien.
De retour dans la zone d'administration du site, cliquez sur l'onglet Étendre, cliquez sur Installer un nouveau module, collez l'URL et cliquez sur Installer.
04 Téléchargez le plug-in Colorbox
Revenez à la page de téléchargement de Colorbox; immédiatement sous Dépendances, cliquez sur le lien Colorbox Plugin 1.x. Cela enregistrera un fichier d'archive compressé à l'emplacement désigné de votre ordinateur pour les téléchargements.
Vous devez maintenant créer un répertoire sur votre système pour les fichiers du plug-in Colorbox. Conformément aux instructions de la page de téléchargement de Colorbox, créez un répertoire pour que le chemin d'accès aux fichiers devienne (nom du site) / bibliothèques / colorbox /, puis décompressez l'archive à cet emplacement.
05 Placez les fichiers de plug-in non compressés
L'archive étant décompressée, vous devriez pouvoir voir 14 fichiers dans le répertoire, y compris le très important fichier JavaScript jquery.colorbox-min.js.
Si votre dossier affiche quelque chose de différent, assurez-vous de chercher au bon endroit - le dossier (nom du site) / modules / colorbox présente une syntaxe très similaire. (Ce dossier doit contenir 22 fichiers, dont huit sous-dossiers - voir l'encart ci-dessus.)
06 Activer le module Colorbox
Après avoir déjà installé le module Colorbox, nous devons maintenant l'activer. (Ce processus n'est pas automatique.) Revenez à la zone d'administration de votre site et cliquez sur l'onglet Étendre.
Faites défiler les deux tiers de la page; sous la section Médias, cochez la case à gauche de Colorbox. En bas de la page, cliquez sur Installer.
Accédez à Rapports et exécutez un rapport d’état: si Colorbox n’est pas répertorié dans Erreurs détectées, tout va bien.
07 Découvrez l'effet de notre nouvelle lightbox
Voyons maintenant quelle différence le fait d'avoir une lightbox d'image a fait. Cliquez sur Retour au site dans le coin supérieur gauche de l'écran et appelez l'une des galeries que vous avez ajoutées à la navigation principale.
Cliquez sur une image et elle s'ouvrira dans une superposition pop-up. Une paire de boutons dans le coin inférieur gauche vous permet de vous déplacer dans les images de la galerie, tandis qu'un X en bas à droite ferme la fenêtre contextuelle - tout fonctionne bien.
08 Revoir les informations de la légende de l'image
Une autre caractéristique de Colorbox est sa capacité à afficher une légende pour les images, qui apparaît à partir du bas de l'image en cours de visualisation lorsque vous passez la souris dessus.
À l'heure actuelle, il utilise le texte alternatif (une brève description utilisée par les lecteurs d'écran ou lorsqu'une image ne se charge pas) que nous saisissons pour chaque photo lors du téléchargement des fichiers image. Pour modifier les légendes, ouvrez le fichier image dans le menu Contenu / Fichiers.
09 Ajoutez d'autres pages clés sur le site
L'affichage de l'image étant meilleur maintenant, nous pouvons commencer à créer le site et à ajouter d'autres éléments clés. Tout d'abord, créons une page À propos pour décrire les services photographiques que nous proposons.
Cliquez sur l'onglet Contenu, cliquez sur Ajouter du contenu et sélectionnez Page de base. Entrez le texte souhaité plus une image en ligne recadrée à une taille appropriée. (Nous avons utilisé 200 x 200 pixels.) D'autres pages à construire incluent la page d'accueil.
10 Évaluer les progrès et ajouter d'autres éléments
Nous avons donc maintenant un site Web de photographie entièrement fonctionnel, organisé en une série de galeries qui affichent les images dans une superposition contextuelle avec des informations de légende.
C’est un bon début, mais ce n’est que le début. D'autres éléments de site que vous pourriez envisager d'ajouter incluent des articles de blog réguliers, pour ouvrir une conversation avec les visiteurs de votre site - et c'est une autre fonction que Drupal prend en charge dès la sortie de la boîte.
Dernières étapes: déployez votre site local sur le net
Vous avez donc terminé votre build et résolu quelques aspérités en le testant complètement. Il est maintenant temps de déployer votre site sur Internet et de le révéler à un public mondial. Voici comment procéder…
1. Trouvez un fournisseur de services d'hébergement
Une fois que votre site est entièrement conçu et testé, et que tous les bogues ou problèmes ont été résolus, il est prêt à être diffusé auprès d'un public mondial.
La première étape consiste à trouver un fournisseur d'hébergement. Assurez-vous que votre fournisseur d'hébergement peut prendre en charge PHP et MySQL, tous deux requis par Drupal.
2. Téléchargez un client FTP sur votre ordinateur
Le protocole de transfert de fichiers (FTP) est le moyen par lequel vous téléchargez les fichiers de votre site local vers votre fournisseur d'hébergement Web. L'un des clients FTP les plus populaires est FileZilla, qui fonctionne à la fois sur Windows et macOS. Vous pouvez trouver FileZilla ici.
3. Téléchargez les fichiers à l'aide du Panneau de configuration
Votre fournisseur vous donnera accès à un panneau de contrôle, pour une gestion de site tout-en-un - cPanel est une option populaire. Suivez les instructions de votre fournisseur pour le déploiement, mais sachez que le transfert de fichiers et la configuration des paramètres peuvent prendre jusqu'à une journée entière.
est le magazine de photographie préféré au monde. Chaque numéro contient les dernières nouvelles, des critiques, des tutoriels, des conseils d'achat d'experts, des astuces et des images inspirantes. De plus, chaque numéro est accompagné d'une sélection de cadeaux bonus intéressants pour les photographes de tous niveaux.
Meilleurs sites d'hébergement de sites Web pour les photographes: mettez votre portfolio en ligne
Meilleures options de stockage cloud gratuites pour les photographes: plateformes et applications
Meilleurs cours de photographie en ligne - des guides pour débutants aux masterclasses
Meilleurs constructeurs de sites Web pour les photographes
Meilleurs gestionnaires de mots de passe
Meilleur ordinateur portable étudiant
Meilleur logiciel de retouche photo
