Apprenez tout ce que vous devez connaitre sur les lancements et leur marketing


Auteur Sujet: Astuce pour afficher des vignettes sur son site  (Lu 794 fois)

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1122
  • Karma: +19/-8
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Astuce pour afficher des vignettes sur son site
« le: 15 janvier 2017 à 18:18:46 »
Salut, si tu cherches un moyen gratuit d'afficher des vignettes de pages web (browser screenshots) tu vas galérer car tous les services sont payants, leur version limitée est vraiment trop basse (du style 100 ou 1000 nouvelles urls par mois) avec des watermarks sur les images ou pire certains ne font que le nom de domaine ou sous domaine, pas les pages.

Bref, après avoir cherché, finalement il y a wordpress qui laissent leur outil en libre service gratuitement, depuis plusieurs années déjà, et il est très simple à utiliser :

Pour composer l'url de l'image en HTML il faut juste mentionner le service :
https://s.wordpress.com/mshots/v1/
puis y ajouter l'url de la page qu'on veut afficher (urlencodée)
puis y ajouter au minimum ?w=XXX pour la largeur de la vignette, il calcule la hauteur pour un format 4x3, on peut ajouter un parametre h pour varier un peu, par exemple faire du 16/9

Donc au final en php :
$url = 'http://www.1tpego.com/forum/index.php/topic,629.0.html'; // l'url de la page que je veux afficher
$imglink = 'https://s.wordpress.com/mshots/v1/'.urlencode($url).'?w=800'; // si on veut la hauteur on ajoute &h=XXX

echo '<img src="'.$imglink.'" alt="le forum 1tpego">';

Voilà ce que ça donne :


L'image est en JPG (environ 100ko pour du 800x600) et avec un cache navigateur de 12 heures, je ne sais pas quel est la durée de leur cache serveur, mais bon c'est déjà très bien comparé à ce qu'on trouve en gratuit en cherchant un peu partout.

Et oui si on veut faire une vignette au format 16/9 et ben on ajoute l'argument &h=XXX (on calcule soi-même pour du 800 ca donne 450 en hauteur, voilà le résultat :


Allez pour montrer que ça marche bien en petit aussi, du 200x150 (sans mettre l'argument h) :


Et du 16/9 (ca donne 200x112,5 donc 112 ou 113 au choix)
« Modifié: 15 janvier 2017 à 18:20:23 par FortTrafic »
Est-ce que tu as un compte 1TPE ?
Si oui, que tu sois affilié ou vendeur, deviens membre du CLUB AFFILIATION FACILE

PS : MA FORMATION WEBMARKETING (avec droit de revente)

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1122
  • Karma: +19/-8
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Re : Astuce pour afficher des vignettes sur son site
« Réponse #1 le: 21 janvier 2017 à 15:53:08 »
Salut, je voudrais rajouter qu'il y a un petit problème avec ce truc c'est que la première fois que la vignette est générée pour une nouvelle url, l'image est noire avec un logo WordPress et un texte marqué "Generating Preview..."

La prochaine fois qu'on visite la page, l'image est bien celle de la vignette.

Donc si on veut éviter ça il suffit d'ajouter un code javascript pour rafraichir l'image après disons 7 secondes par exemple, le temps que la vignette ait été générée, ce service est très rapide pour générer les vignettes.

Donc ce qu'il faut faire c'est ajouter un ID à l'image afin de mettre à jour l'image via le code javascript. Autre chose, pour éviter le cache navigateur il suffit d'ajouter un argument inutile à l'url de l'image (le &rand= dans le code javascript) :

<img id="mshots" src="blablabla">

<script>
setTimeout(function() {
  var monimage = document.getElementById('mshots');
  monimage.src = monimage.src + '&rand=' + Math.random();
}, 7000);
</script>

Bien sûr cela ne fonctionne que si on a qu'une seule vignette sur la page, c'est mon cas donc si tu veux le faire pour plusieurs vignettes sur une seule page, faudra adapter le code javascript.

A noter qu'on peut également mettre le code javascript directement dans le code de l'image, c'est ce que j'ai fait, c'est pas beau c'est sûr mais ça fonctionne :
<img id="mshots" onload="setTimeout(function() { var monimage = document.getElementById('mshots'); monimage.onload = null; monimage.src = monimage.src + '&rand=' + Math.random(); }, 7000);" src="blablabla">

Dans le fond c'est pas terrible parce que même quand la vignette est bonne la première fois, ça va quand même rappeler l'image après 7 secondes, mais bon, je ne vois pas comment faire autrement. Comment déterminer en javascript que la vignette est la version "Generating Preview" ou pas.. J'ai essayé onerror au lieu de onload mais comme wordpress affiche la vignette noire pour le navigateur ce n'est pas une erreur..

Si tu as une idée...
« Modifié: 21 janvier 2017 à 16:10:58 par FortTrafic »
Est-ce que tu as un compte 1TPE ?
Si oui, que tu sois affilié ou vendeur, deviens membre du CLUB AFFILIATION FACILE

PS : MA FORMATION WEBMARKETING (avec droit de revente)

Hors ligne editionsUP

  • Néophyte
  • *
  • Messages: 3
  • Karma: +0/-0
    • Voir le profil
Re : Astuce pour afficher des vignettes sur son site
« Réponse #2 le: 22 janvier 2017 à 20:54:38 »
Tu ne peux pas essayer de trouver un moyen d'afficher toutes tes pages afin que les vignettes se retrouvent en cache ?

Hors ligne FortTrafic

  • Modérateur Global
  • Membre Héroïque
  • *****
  • Messages: 1122
  • Karma: +19/-8
  • Sexe: Homme
  • Les Fameuses Vidéos
    • Voir le profil
    • CLUB AFFILIATION FACILE
Re : Astuce pour afficher des vignettes sur son site
« Réponse #3 le: 22 janvier 2017 à 21:10:48 »
En fait on ne sait pas combien de temps les vignettes restent en cache sur le serveur de wordpress, sans doute plus de 24 heures mais je ne sais pas exactement combien de temps, donc si la vignette d'une page n'est pas appelée depuis X temps, la même chose va se reproduire la prochaine fois que wordpress doit générer la vignette.

Ou alors oui, il faudrait peut-être générer toutes les vignettes tous les jours pour être sûr, c'est vrai ça serait une possibilité. Mais en fait depuis que j'ai trouvé cette façon avec le javascript je suis satisfait du résultat car la bonne vignette s'affiche au pire 7 secondes après, ça fait dynamique :-)
Et quand la vignette est la bonne et que l'image est rechargée, perso avec mes navigateurs je n'ai rien vu, pas de saut d'image ou autre, visuellement on dirait qu'elle ne change pas.
« Modifié: 22 janvier 2017 à 21:15:08 par FortTrafic »
Est-ce que tu as un compte 1TPE ?
Si oui, que tu sois affilié ou vendeur, deviens membre du CLUB AFFILIATION FACILE

PS : MA FORMATION WEBMARKETING (avec droit de revente)