• Ajouter des images dans le module "derniers articles"

    Tout est dans le titre. On peut ajouter le nom de l'auteur d'un article, mais pas son image dans le module des derniers articles... On va résoudre ça !

    /!\ Le javascript doit être activé

    En prérequis, il faut afficher le module des derniers articles (avec les options que vous voulez), ainsi qu'un module simple dans lequel on mettre notre javascript

     

    La grande question à se poser pour commencer, c'est comment récupérer l'image d'un article ? Comme on n'a pas accès à la base de donnée, la seule solution est d'aller la chercher directement sur la page de l'article. En javascript, on va donc utiliser les liens des derniers articles pour fouiller sur leur page respective, récupérer la première image, et l'ajouter dans le module.

     

    Commençons par créer la fonction qui va gérer tout ça (pour rappel, le script doit être placé entre des balises <script></script>)

    async function ajoutImageDerniersArticles() {
       console.log('ajouter une image aux derniers articles');
    }

    ajoutImageDerniersArticles()

    Ouvrez la console du navigateur pour vérifier que la fonction est bien appelée (clique droit sur votre page -> inspecter -> onglet "console"). Le message 'ajouter une image aux derniers articles' doit s'afficher lorsque vous enregistrer le module simple

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var link = tabDerniersArticlesLi[i].firstChild.href;
            console.log('ajouter une image pour article', link);
        }
    }

    ajoutImageDerniersArticles()

    Si vous regardez comment est structuré le module des derniers articles, on remarque que chaque lien est dans une liste. Ici, on récupère tous les éléments <li> de la liste dans un tableau. On va donc parcourir tous les éléments de ce tableau pour ajouter une image sur l'article correspondant. Dans la console, vous devriez maintenant avoir autant de messages 'ajouter une image pour l'article http.....' que vous avez définis de dernier articles, avec le lien de l'article correspondant.

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var lien = tabDerniersArticlesLi[i].firstChild.href;
            var image = await getImage(lien);
            console.log('image à ajouter', image);
        }
    }

    ajoutImageDerniersArticles()

    La fonction "getImage" va utiliser le lien de l'article pour récupérer tout le html de la page, qu'on va stocker dans la variable "doc". A partir de là, on peut y chercher ce qu'on veut. Ce qui nous intéresse ici, c'est la première image d'un article. On retourne ce résultat pour qu'il soit stocké dans la variable "image" de la fonction "ajoutImageDerniersArticles".

    Vous avez noté les async / await ? C'est ce qui permet d'exécuter du code asynchrone en JS. Lorsque l'on fait une requête, le résultat peut mettre du temps à arriver, et on ne sait pas combien de temps. On doit dire au code d'"attendre" (await) certaines informations. Et pour que cela fonctionne, les fonction qui attendent des informations doivent être indiquées comme asynchrones (async).

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            var lien = tabDerniersArticlesLi[i].firstChild.href;
            var image = await getImage(lien);
            tabDerniersArticlesLi[i].querySelector('a').prepend(image);
        }
    }

    ajoutImageDerniersArticles()

    Je peux enfin ajouter l'image dans mon lien de dernier article ! Vous pouvez vérifier que tout fonctionne bien et... vous allez probablement remarquer un problème.

    L'image s'ajoute bien si elle existe. Il est même possible qu'elle s'ajoute plusieurs fois, ou que vous ayez une erreur si l'article ne comporte aucune image. On va donc ajouter deux sécurité pour finir ce code.

    async function getImage(lien) {
        var response = await fetch(lien);
        var htmlString = await response.text();
        var doc = new DOMParser().parseFromString(htmlString, "text/html");

       return doc.querySelector('#ulmodules .article_text img');
    }

    async function ajoutImageDerniersArticles() {
        var tabDerniersArticlesLi = document.querySelectorAll('.module_menu_type_lastarticles .module_menu_contenu_block ul li');
        for(var i = 0; i < tabDerniersArticlesLi.length; i++){
            if(!tabDerniersArticlesLi[i].querySelector('img')){
                var lien = tabDerniersArticlesLi[i].firstChild.href;
                var image = await getImage(lien);
                if(image){
                    tabDerniersArticlesLi[i].querySelector('a').prepend(image);
                }
            }       
       }
    }

    ajoutImageDerniersArticles()

    Le premier if permet de vérifié qu'il n'y ai PAS déjà une image dans le lien du dernier article. S'il n'y a pas d'image, on exécute le reste du code, sinon on s'arrête là.

    Le deuxième if vérifie si la requête à bien permis de récupérer une image associé à cet article. Si c'est bien le cas, on ajoute cette image dans le lien, sinon on s'arrête.

    tabDerniersArticlesLi[i].querySelector('a').prepend(image) place l'image avant le titre de l'article. Vous pouvez remplacer "prepend" par "append" pour la placer après

     

    Et c'est tout pour la partie JS. Vous pouvez ensuite customiser tout ça comme vous le souhaitez en CSS.

    Petit exemple à modifier :

    .module_menu_type_lastarticles a {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .module_menu_type_lastarticles a img{
        height: 30px;
        margin: 0 10px;
        border-radius: 50%;
    }

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :