Share
Il existe de nombreuses options pour créer et afficher des diaporamas en ligne (comme ici et ici, par exemple). Pour ce tutoriel, j'ai décidé d'intégrer SlideShowPro à Expression Engine..
Pour installer et utiliser Expression Engine, vous devez d'abord créer une base de données. Pour ce tutoriel, j'ai créé une base de données appelée eeTuts.
Téléchargez les fichiers d'installation sur expressionengine.com. Selon vos besoins, vous devrez peut-être payer pour une licence. Une fois que vous avez décompressé les fichiers d'installation dans votre répertoire Web, la structure devrait ressembler à ceci:
Avant de procéder à l'installation, il est recommandé de renommer le répertoire système sous un autre nom. Le répertoire système fournit un accès au panneau de commande et la modification du nom peut aider à masquer ce répertoire aux utilisateurs généraux. Je suis allé de l'avant et a changé le nom pour contrôler.
Pointez sur le fichier install.php avec votre navigateur Web pour commencer l'installation. Dans ce cas, nous utilisons la version 1.6.7. Pour plus d'informations sur le processus d'installation, consultez la documentation d'Expression Engine, disponible à l'adresse suivante: http://expressionengine.com/docs/installation/installation.html.
D'après mon expérience, les erreurs d'installation surviennent le plus souvent en raison de l'absence des autorisations de dossier / fichier appropriées et / ou de l'accès à la base de données..
Une fois Expression Engine installé, vous devriez voir plusieurs tables dans la base de données. Si vous n'avez pas changé le préfixe de la table lors du processus d'installation, toutes les tables doivent commencer par "exp_". Une fois installé, 68 tables sont créées.
Une fois l'installation réussie, le panneau de commande et le site par défaut sont disponibles..
Connectez-vous au panneau de contrôle avec la configuration des informations d'identification dans l'installation et l'écran d'administration doit apparaître..
Bien qu'Expression Engine soit fourni avec un outil de téléchargement de fichier par défaut, je vais installer une extension de fichier populaire, disponible ici. Je fais ceci principalement pour montrer comment installer des extensions, mais secondairement, cette extension de fichier fournit des options supplémentaires qui pourraient vous être utiles. Veuillez consulter la documentation de cette extension pour plus d'informations. Une fois le fichier d’extension téléchargé et décompressé, faites défiler jusqu’au répertoire de contrôle et placez ext.mh_file_ext.php dans le répertoire extensions, le fichier lang.mh_file_ext.php dans le répertoire language-> english et le dossier icons dans le répertoire images ( situé au-dessus du répertoire de contrôle). Ensuite, activez cette extension en allant dans Admin -> Utilitaires -> Gestionnaire d'extensions, cliquez sur Activer les extensions, puis activez l'extension particulière, dans ce cas l'extension de téléchargement de fichier..
Créons maintenant un répertoire personnalisé vers lequel les fichiers seront chargés..
Créez un nouveau dossier dans le répertoire images et appelez-le Portfolio. Assurez-vous de donner à ce répertoire des autorisations d'écriture. Maintenant, cliquez sur Admin -> Administration du blog -> Préférences de téléchargement de fichier. Créez une nouvelle destination de téléchargement de fichier avec les informations d'identification suivantes:
Chemin du serveur vers le répertoire de téléchargement: / chemin / vers / images / Portfolio /
URL du répertoire de téléchargement: http://example.com/images/Portfolio/
Assurez-vous que seules les images sont sélectionnées. Laissez tout le reste et soumettez.
Dans le panneau de configuration, cliquez sur l'onglet Admin (à droite du panneau de configuration) -> Administration du blog -> Gestion du blog. Cliquez sur "Créer un nouveau blog", appelez-le Portfolio et créez le portefeuille de noms abrégés. Laissez les options restantes seules et cliquez sur soumettre.
Cliquez sur Admin -> Administration du blog -> Champs personnalisés du blog, cliquez sur le bouton "Créer un nouveau groupe de champs de blog" et appelez-le groupe Portfolio. Nous devons affecter ce groupe au weblog Portfolio. Notez qu'un lien vers l'emplacement devrait vous être demandé pour affecter le groupe. Sinon, accédez à Admin -> Administration du blog -> Gestion du blog, puis cliquez sur Modifier les groupes pour le blog Portfolio. Attribuer le blog du portefeuille au groupe du portefeuille.
Pensez à un blog en tant que conteneur de données. La beauté de ces conteneurs (weblogs) réside dans le fait que vous pouvez personnaliser le conteneur de données pour utiliser différents types de champs (zone de saisie, zone de texte, etc.). Le groupe de champs définit les champs (zone de saisie, zone de texte, etc.) affectés au blog. Une fois qu'un blog est créé, il doit être affecté à un groupe de champs afin que les types de champs appropriés apparaissent. Lors de la création d'une entrée dans le weblog, les champs créés dans le groupe de champs assigné apparaissent. C’est l’une des parties géniales d’Expression Engine, dans la mesure où vous pouvez créer des conteneurs de données et des types de champs personnalisés et afficher facilement ces informations..
Remarque: Si vous n'aimez pas le terme weblog, vous pouvez modifier le nom de cette référence dans le panneau de configuration (certaines personnes désignent ces conteneurs de données sous forme de sections.). Une fois que la version 2.0 d'Expression Engine est arrivée, le terme weblog ne sera plus utilisé pour faire référence à ces conteneurs de données (le canal sera utilisé à la place)..
Cliquez sur Publier -> Portefeuille. L'écran devrait ressembler à l'image suivante. Publiez quelques enregistrements sur le blog. Vérifiez votre répertoire Portfolio Upload pour vous assurer que les images sont publiées dans ce répertoire. Après la publication de quelques images sur le blog, créons les modèles..
Cliquez sur l'onglet Modèles. Cliquez sur le bouton "Créer un nouveau groupe de modèles" (à droite de l'écran). Appelez ce groupe "principal" et cochez la case pour que le modèle d'index devienne la page d'accueil du site. Maintenant, cliquez sur le modèle d'index dans le groupe de modèles "principal" et collez le code suivant dans cette zone de texte:
Diaporama du moteur d'expression Bonjour!
Cliquez sur Mettre à jour pour enregistrer le fichier.. Remarque: Dans ce cas, j'ai déjà généré le fichier Flash et le code Flash. Vous pouvez préférer d'autres méthodes d'intégration du code Flash, telles que l'utilisation de swfobject (http://code.google.com/p/swfobject/).
Maintenant, dans le groupe de modèles "principal", créez un nouveau modèle (partie centrale de l'écran), appelez-le portfolio_xml et définissez le type sur xml (vous pouvez le nommer comme vous voulez. J'utilise simplement _xml pour m'aider davantage identifier le fichier). Collez le code XML suivant dans ce modèle:
exp: weblog: entrées weblog = "portfolio" / exp: weblog: entrées
Vous remarquerez que la balise Entrées de blog Web Expression Engine est utilisée, qu’elle référence le blog Web de portefeuille et qu’elle extrait les champs personnalisés que nous avons créés (image_file, title, image_caption). La balise "légende" dans la balise d'image est ce qui alimente la section légende de SlideShowPro. Le format fichier_image nom_fichier / fichier_image est spécifique à l'extension de fichier que nous avons installée. En utilisant ce code, le nom complet du fichier téléchargé est capturé. La galerie xml, album, lgpath et tnpath sont spécifiques à SlideShowPro. Mettez à jour le fichier pour le sauvegarder. Maintenant, rendez le fichier et affichez la source. Lors de la visualisation du code source du fichier XML, les données que vous avez ajoutées au weblog devraient ressembler à ceci:
Si les données n'apparaissent pas, relisez à nouveau les étapes et assurez-vous que les données se trouvent dans le bon blog, le nom abrégé correct du blog est référencé, que toutes les balises sont orthographiées correctement et que toutes les balises sont correctement fermées. Copiez l'adresse de ce fichier XML rendu, car nous l'ajouterons au composant SlideShowPro..
SlideShowPro n'est pas gratuit, et bien que cela puisse dissuader certains utilisateurs, il existe plusieurs possibilités pour intégrer d'autres solutions gratuites. Une fois que vous avez compris le fonctionnement des entrées et des blogs, il ne vous reste plus qu'à lier d'autres outils aux entrées et à capturer ces données. Plus d'informations sur SlideShowPro peuvent être trouvées ici. Une fois que vous avez installé les extensions SlideShowPro (voir la documentation du site pour plus d’informations), ouvrez le composant et faites défiler vers le bas pour modifier les paramètres XML. Collez l'adresse que vous venez de copier du fichier XML rendu dans la ligne Chemin du fichier XML. Laissez le type de fichier XML à la valeur par défaut. Personnalisez les autres paramètres comme bon vous semble. Enregistrez et publiez ce fichier pour générer le swf.
À ce stade, le fichier swf rendu doit afficher les images. Sinon, vérifiez que votre fichier XML contient des données. Notez également que vous devez utiliser des fichiers jpg, car les fichiers png ne semblent pas être pris en charge. Placez le fichier swf rendu dans le répertoire racine du site, afin de le faire correspondre à l'emplacement de référence du fichier flash dans le code du modèle d'index..
Enfin, si vous souhaitez ajouter de la musique au diaporama, ajoutez simplement ce qui suit au modèle xml (assurez-vous que le fichier son est dans le bon répertoire. Dans ce cas, j’ai créé un répertoire son, à la racine, ci-dessus. le répertoire de contrôle et mettez le fichier son à cet endroit.):
Il existe quelques autres exemples (que j'ai rencontrés au moins) qui donnent des informations supplémentaires sur l'utilisation de SlideShowPro avec Expression Engine. Pour en savoir plus, vous pouvez trouver ces liens utiles:
Accentsconagua
/ exp: weblog: entrées