Les outils de développement de Chrome indiquant qu'il manque encore certaines ressources. Corrigez tous ces types d'erreurs avant de passer à l'étape suivante.
Habillage HTML personnalisé - Convertir le design d'un site existant en skin HTML
Cet article a été traduit automatiquement et peut contenir des inexactitudes.
Voir l’original en anglais
Si vous organisez un événement et que vous souhaitez que le style de votre site DPG corresponde exactement au design d'un site existant, vous pouvez cloner le HTML du site principal pour en faire un skin utilisable avec DPG.
Créer un skin personnalisé est entièrement facultatif ; pour la plupart des utilisateurs, la meilleure solution consiste à utiliser nos templates faciles à personnaliser.
Le skin HTML se compose d'une page complète de votre code HTML, à laquelle sont ajoutés des inserts DPG qui intègrent la galerie et le reste du code requis de DPG dans les zones où vous souhaitez qu'il s'affiche.
Beaucoup de gens choisissent d'écrire eux-mêmes le skin HTML du site DPG, en s'appuyant sur le code du site principal. Dans ce tutoriel, nous allons toutefois vous montrer une méthode rapide pour convertir un design existant en skin DPG.
Dans ce guide, nous utiliserons :
Si vous n'avez pas de développeur dans votre équipe mais que vous souhaitez un skin HTML personnalisé, nous pouvons fournir ce service moyennant un coût supplémentaire. Contactez support@digitalphotogallery.com pour plus de détails.
Cloner le HTML sur votre disque local
Assurez-vous d'avoir installé Homebrew, puis exécutez la commande pour installer wget :
brew install wget
Créez un nouveau dossier, accédez-y avec cd et utilisez la commande suivante pour cloner les ressources du site web avec lequel vous réalisez l'intégration :
wget -U firefox -p -k -H http://www.targetdomain.com/Téléverser les ressources sur votre propre serveur ou CDN
Téléversez vos ressources clonées vers un emplacement accessible en ligne ; dans cet exemple, j'utilise Transmit avec Amazon S3.
Si vous avez le contrôle total du site principal et que les emplacements des ressources sont prévisibles, vous pouvez créer des liens vers ces ressources au lieu de les cloner.
Relier toutes les ressources
Lorsque vous avez exécuté la commande wget, celle-ci a téléchargé le HTML de la page que vous avez ciblée. Localisez ce fichier sur votre disque local et, dans le code, recherchez et remplacez toutes les ressources liées par leur nouvelle adresse. Testez régulièrement la page locale dans un navigateur pour vérifier votre progression.
Pendant que vous reliez les ressources, vous pouvez également supprimer tout code de suivi inutilisé.
Une fois qu'il n'y a plus d'erreurs, vérifiez le domaine d'où proviennent les ressources afin de vous assurer qu'aucune n'est servie depuis une adresse que vous ne contrôlez pas.
Fichier d'exemple à ce stade.
Découvrir les layouts de page de DPG
Consultez cet article pour apprendre à obtenir le code d'insert DPG actuel et découvrir comment appliquer votre code HTML à votre galerie DPG.
Convertir le HTML téléchargé en skin
Maintenant que vous disposez d'une copie parfaite de la page d'origine, vous pouvez commencer à la modifier pour y ajouter les inserts DPG.
Ajoutez les inserts DPG pour l'en-tête.
Supprimez le HTML du contenu et remplacez-le par l'insert de contenu DPG.
Ajoutez des inserts à la fin de la page.
Créez le layout de votre page dans DPG.
Testez votre layout sur une seule page. Une fois que vous savez qu'il fonctionne correctement, appliquez-le à toutes les pages.
Vous disposez désormais d'un site DPG entièrement fonctionnel qui correspond à votre site web principal. Enfin, ajoutez sur votre site principal les liens pointant vers la nouvelle galerie de photos.
Code finalisé de cet exemple.