[Servimg] Comment désactiver les images cliquable ?

[orpheus]

Bonjour à tous !

Voici mon problème, depuis aujourd'hui (peut-être même avant si ça se trouve, j'ai pas fait gaffe), j'ai remarqué que les liens de mes images hébergés chez Servimg sont cliquable, y compris si je prend le lien direct de l'image comme c'est le cas ici :
https://empiredesouvenirs.forumactif.com/t620-lamu

Or, si je prend un topic avec des images ou les liens n'ont pas été hébergé chez Servimg, j'ai pas ce problème :
https://empiredesouvenirs.forumactif.com/t295-julie-et-stephane

Je souhaiterait donc savoir comment faire pour désactiver les liens cliquables sur mes images hébergés chez Servimg.

Merci.

[The Godfather]

Bonjour @orpheus

Effectivement ça ne date pas d'aujourd'hui. Les images Servimg qui n'ont pas de balise [URL] se voient automatiquement attribuer un lien vers leur fiche Servimg.

Si vous ne voulez pas avoir de lien vers cette fiche, il vous suffit de définir par vous-même un lien pour l'image en question. Dans ce cas, aucun ajout n'est effectué

[Cloo]

Il faut choisir, dans Servimg, le contenu de "Lien direct":

Exemple:

Code:

https://i.servimg.com/u/f88/14/54/12/54/trocve10.jpg

et l'encadrer des balises img, soit manuellement, soit via cet icône:

[Neptunia]

Bonjour ^^


Cloo : ça c'était avant !


Orpheus : la seule parade que j'ai trouvée (hormis l'usage de javascript) c'est en postant l'image en HTML

Code:

<img src="https://i.servimg.com/u/f88/14/54/12/54/trocve10.jpg" alt="" />

[Cloo]

Cloo : ça c'était avant !

Ah ben oui... je l'ai utilisé bien souvent, pourtant! Alors, oui, c'est assez nouveau, le fait que l'image soit cliquable en utilisant cet artifice

[orpheus]

Bonjour @orpheus

Effectivement ça ne date pas d'aujourd'hui. Les images Servimg qui n'ont pas de balise [URL] se voient automatiquement attribuer un lien vers leur fiche Servimg.

Si vous ne voulez pas avoir de lien vers cette fiche, il vous suffit de définir par vous-même un lien pour l'image en question. Dans ce cas, aucun ajout n'est effectué  

Bonjour et merci pour vos éclaircissement The Godfather
Par contre, j'ai pas bien compris, vous entendez quoi par "définir vous même un lien pour l'image" ?

Bonjour ^^

Orpheus : la seule parade que j'ai trouvée (hormis l'usage de javascript) c'est en postant l'image en HTML

Code:

<img src="https://i.servimg.com/u/f88/14/54/12/54/trocve10.jpg" alt="" />

Je viens d'essayer ton astuce sur le sujet de Lamu (voir lien plus haut), lorsque je fais une prévisualisation je n'ai effectivement pas de lien cliquable mais dès que je publie le post, j'ai toujours le lien cliquable.

Je m'y prend peut-être mal ?
Voici le code que j'ai utilisé :

Code:

[center]<img src="https://i.servimg.com/u/f96/18/56/12/14/104_la10.png" alt="" />[/center]

Et dans l'hypothèse ou ça fonctionnerait, cela n'aura aucun impact sur le référencement de l'image ou autres ?

[demeter1]

Bonjour,
ce j devrait résoudre le souci (c'est certainement celui ci qu'évoquait Neptunia)

Code:

/*OUVRIR LES LIENS EN TARGET BLANK*/
$(function(){$("a").each(function(){/^(https|http):\/\/altitudetropicale.forums-actifs.com/.test($(this).attr("href"))||/^\//.test($(this).attr("href"))||$(this).attr("target","_blank")})});


il suffit de remplacer altitudetropicale.forums-actifs.com par l'adresse de votre forum sans le https ou le http

[orpheus]

@demeter1 si je comprends bien, le code que vous me donner est à rajouter dans « Gestion des pages HTML » ?

[Neptunia]

J'avais testé en phpBB3 en prévisualisation puis une fois validé.

Je viens de tester en phpBB2 et je confirme qu'il n'y a pas de lien.

---

Edité :

Non Stéphane, ce n'est pas ce à quoi je pensais.
Si je me fie au commentaire ton script modifie le comportement des liens internes en les ouvrant dans un nouvel onglet.
Moi je pensais à un script qui supprimerait le lien tout en laissant l'image.

[demeter1]

@demeter1 si je comprends bien, le code que vous me donner est à rajouter dans « Gestion des pages HTML » ?

Bonjour Orpheus,
plutôt dans la gestion des javascripts.

Bonjour Hélène,
il modifie effectivement les liens en demandant un affichage sur une autre page.

Pour une image style https://i.servimg.com/u/f96/18/56/12/14/104_la10.png , le clic affichera seulement l'image sur une nouvelle page.Pour faire bref, la redirection vers servimg est supprimée.

[orpheus]

Décidément, je dois avoir un problème sur mon forum car même avec votre méthode Demeter1, j'ai toujours le lien cliquable sur mes images.
Du coup je l'ai enlevé.

Voici le code modifié que j'ai tenté d'utiliser :

Code:

/*OUVRIR LES LIENS EN TARGET BLANK*/
$(function(){$("a").each(function(){/^(https|http):\/\/empiredesouvenirs.forumactif.com/.test($(this).attr("href"))||/^\//.test($(this).attr("href"))||$(this).attr("target","_blank")})});

Je comprends pas d'où vient le problème

[demeter1]

le script est bon; il a été coché sur sujets ?.

[Neptunia]

Ton script ne servira à rien puisqu'il traite les liens commençant par empiredesouvenirs.forumactif.com c'est à dire des liens internes (principalement des liens de sujets)

Ici on parle de liens Servimg donc externes.

A mon avis Stéphane, tu confonds avec ce script (que j'ai retrouvé sur un de tes sujets)

Code:

/*Bloquer la redirection vers servimg ou autre hébergeur */
$(function(){
$('.postbody').find('.postlink').removeAttr('href');
$('.postlink').after('<br />');
});

---

Edité :

Orpheus, j'ai compris pourquoi ça fonctionnait chez moi. En fait j'avais un vieux script encore actif sur le fofo test.

Maintenant celui-ci devrait fonctionner (placement sur les sujets) :

Code:

/* Supprimer lien vers servimg */
   $(function(){
      $('.postbody').find('img[src*="servimg.com"]').unwrap();
   });

 Attention à bien tester de manière extensive. Risque d'effets secondaires non souhaités.

[orpheus]

Orpheus, j'ai compris pourquoi ça fonctionnait chez moi. En fait j'avais un vieux script encore actif sur le fofo test.

Maintenant celui-ci devrait fonctionner (placement sur les sujets) :

Code:

/* Supprimer lien vers servimg */
 $(function(){
 $('.postbody').find('img[src*="servimg.com"]').unwrap();
 });

 Attention à bien tester de manière extensive. Risque d'effets secondaires non souhaités.

Je viens de faire un essai et le script semble fonctionner correctement
Cela dit avant de le mettre en résolu, pourrais-tu me dire quels sont les éventuels effets secondaires que ce script pourrait engendrer ?

[Neptunia]

Initialement mon script ciblait globalement img (toutes les images d'un message) et si par exemple tu mettais une image d'un autre hébergeur (sans lien) mais avec balise de centrage, le centrage ne tenait pas.

J'ai donc laissé cet avertissement (parce que je n'ai pas envie de tester extensivement de mon côté) mais depuis que je cible img[src*="servimg.com"], c'est à dire les images hébergées chez Servimg, il ne devrait plus y avoir de souci.

Maintenant soit on poste un lien direct d'image et Forumactif ajoute le lien vers Servimg. Mon script va virer ce lien
Soit on poste un des autres liens proposés par Servimg et là encore mon script va retirer le lien.

Ya quand même ce problème qui va rester.
Si tu places un code de ce style :

Code:

[url=https://empiredesouvenirs.forumactif.com/f4-annees-80][img]https://i.servimg.com/u/f96/18/56/12/14/104_la10.png[/img][/url]

l'image va rester mais le lien va dégager.

Autrement dit, si tu veux faire des images cliquables, il faudra les héberger ailleurs parce que mon script dégomme tous les liens qu'ils pointent vers Servimg ou ailleurs.
Ou alors placer les boutons où tu veux mais pas dans un message

[orpheus]

Merci pour ton rapport détaillé Neptunia ^^

J'ai donc procédé à une petite vérification sur mon forum, j'ai remarqué qu'effectivement sur certains sujets le centrage avait sauté mais il ma juste fallu éditer le sujet et le re-valider et le centrage est réapparût.

Du coup, je sais pas si je vais garder le script, mais s'il suffit juste de faire ça, c'est pas trop dérangeant encore ^^
Concernant le script qui désactive tout les liens d'image cliquable, ça me dérange pas, c'est même le but recherché. Ça aurait vraiment posé problème si ça empêchait les images de s'agrandir mais ça n'a pas l'air d'être le cas

Avant de passer le sujet en résolu, je vais tout de même attendre une réponse de The Godfather à propos de "définir le lien de l'image", sait-on jamais.

Edit : Ah si finalement, je viens de constater des effets indésirables du script dans un sujet comme celui-ci :
https://empiredesouvenirs.forumactif.com/t198-tabaluga
Ou de toute évidence, le script empêche le redimensionnement automatique de l'image en 450 pixel de largeur alors qu'avant ça fonctionnait.

[Neptunia]

Tu n'as pas dû prendre la bonne version du script, parce que dans ton sujet, l'image est chez zupimages et mon script ne touche qu'aux images chez Servimg.

Par contre il faut voir ce que ça donnerait sur du Servimg : je pense que c'est le lien qui sauterait et non les outils de redimensionnement, mais ça reste à vérifier.

[orpheus]

Je viens de vérifier, j'ai pris ce script :

Code:

/* Supprimer lien vers servimg */
   $(function(){
      $('.postbody').find('img[src*="servimg.com"]').unwrap();
   });

Ce qui sauf erreur de ma part est bien le dernier que tu as publié dans ce topic ?
D'ailleurs je viens de faire un essai, en le désactivant dans le panneau d'admin, les images ont automatiquement retrouvé le redimensionnement ^^
Pour Servimg va falloir que je vois si j'ai de grandes images hébergés dans des sujets sur mon forum mais j'ai bien peur que non.

[Neptunia]

Oui c'est bien le dernier mais :
- J'en avais publié un autre dans le même message et j'ai fait une édition silencieuse.
- Le script ne peut pas casser le redimensionnement de l'image chez Zupimages puisqu'il cible spécifiquement le Servimg. J'avais d'ailleurs bien vérifié ce point en postant une image chez imgur

Pour Servimg va falloir que je vois si j'ai de grandes images hébergés dans des sujets sur mon forum mais j'ai bien peur que non.

Il y a les liens que je t'ai donné hier, mais entrer uniquement les liens directs (les images font 720px de large)

[*Splash*]

Hi tous,
Peut-être à tester, ce script sur les sujets :

Code:

$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

[orpheus]

Hi tous,
Peut-être à tester, ce script sur les sujets :

Code:

$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fancybox.defaults.hideScrollbar = false;
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  if (100 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

J'ai testé pour voir, il a effectivement l'avantage de ne plus ouvrir de nouvel onglet quand on ouvre le sujet mais par contre, l'image reste cliquable et apparaît comme dans une sorte de fenêtre intégré à l'onglet actif, je sais pas si tu me comprend ^^

@Neptunia : dans ce cas je comprends pas pourquoi il impacte des images chez Zupimages car j'ai fait le test : quand j'enlève le script les images de Zupimages sont de nouveaux centrés et apparaissent dans la bonne taille autorisé sur mon forum.
Et quand je le remet, c'est aléatoire : certains sujets s'affichent correctement et d'autres non (aussi bien ceux de Servimg que d'autres hébergeurs).

Ceci étant dit hormis ces désagréments, ton script reste celui qui correspond le mieux à mes attentes.

[Neptunia]

Pour zupimages, faudra que j'active le redimensionnement sur un fofo test pour essayer de voir ce qui cloche. Pas avant cette nuit ...


Pour le script proposé par Fred (*Splash*) il fait office à la fois de zoom au clic et de galerie (avec les flèches de direction) une fois qu'on a zoomé 1 image (flèches du clavier ou bien celles sur l'écran)
Si tu veux tester à grande échelle -> Les Mystérieuses Cités d’Or [1982] [S.Anim]
J'ai d'ailleurs volontairement retiré le lien sur la première image (l'auteur avait pour habitude d'utiliser le lien standard de Servimg (URL + Image))

Ce n'est certes pas ce à quoi tu t'attendais mais ça empêche la redirection sur Servimg qui semblait ta première préoccupation.

Concernant le redimensionnement automatique, si l'unique but est de limiter la taille d'affichage des images (et donc pas besoin des liens Agrandir / Voir en taille réelle) je peux fournir une solution par CSS qui aurait le mérite de pouvoir désactiver la fonction du panneau d'administration (qui entre souvent en conflit avec d'autres scripts)

[orpheus]

Pour le script proposé par Fred (*Splash*) il fait office à la fois de zoom au clic et de galerie (avec les flèches de direction) une fois qu'on a zoomé 1 image (flèches du clavier ou bien celles sur l'écran)
Si tu veux tester à grande échelle -> Les Mystérieuses Cités d’Or [1982] [S.Anim]
J'ai d'ailleurs volontairement retiré le lien sur la première image (l'auteur avait pour habitude d'utiliser le lien standard de Servimg (URL + Image))

Ce n'est certes pas ce à quoi tu t'attendais mais ça empêche la redirection sur Servimg qui semblait ta première préoccupation.

Ah effectivement j'avais pas testé plus en profondeur le script proposé par Splash. Effectivement vu sous cet angle, celui-ci pourrait s'avérer pratique, notamment dans des sujets ou il y aurait plusieurs images à afficher.

Je vais peut être le garder du coup, merci de m'avoir détaillé ses capacités ^^

Concernant le redimensionnement automatique, si l'unique but est de limiter la taille d'affichage des images (et donc pas besoin des liens Agrandir / Voir en taille réelle) je peux fournir une solution par CSS qui aurait le mérite de pouvoir désactiver la fonction du panneau d'administration (qui entre souvent en conflit avec d'autres scripts)

Ah pourquoi pas, en gros l'image sera redimensionné automatiquement tout en faisant disparaître les messages d'affichage si je comprends bien ?
Mais si je fais ça, les membres feront comment pour afficher en taille réelle des images relativement grande (car j'en ai certaines qui font plus de 1000 pixels par exemple) ?

Mais ouais je veux bien le script si ta le temps ^^

Edit : Après test avec le script de Splash, ce que je pensais se confirme, sur des images supérieures à un certains nombre de pixel (combien ? Je l'ignore), l'image est automatiquement redimensionner. J'ai une loupe sur les images trop grandes qui apparaît mais lorsque je clique dessus, aucun résultats.
La seule solution pour afficher l'image en taille réelle est donc un clique droit, ouvrir dans un nouvel onglet mais les gens n'auront peut-être pas forcément l'intuition de le faire si je vire la mention de l'affichage en temps réel ?
Du coup en résumé, le script en lui même ne pose pas de problèmes mais je me demande tout de même si c'est réellement une bonne idée de virer la mention de l'affichage en temps réel ?

[Neptunia]

Alors pour le redimensionnement automatique qui ne fonctionne plus, je n'ai hélas pas de solution vu que chez moi tout est OK comme tu peux le constater par toi-même



Le redimensionnement agit dès 500px de large et j'ai fait un mix de plusieurs hébergeurs, plusieurs type de liens et plusieurs largeurs d'images dont celle qui te posait un souci.

Du coup la seule piste qui me vienne à l'esprit serait un autre script actif sur sujets ou sur toutes les pages qui entrerait en conflit. Ou une personnalisation du template viewtopic_body si quelqu'un y a rajouté un script.

En tout cas mon script fonctionne

---

Sinon pour le redimensionnement géré par CSS (à la place de l'option sur le PA), ça fera effectivement disparaître les liens pour agrandir/voir en taille réelle.

Après si quelqu'un veut quand même voir l'image en taille réelle, sans le fancybox que tu viens d'installer clic-droit > Afficherl'image.
Et avec fancybox c'est encore plus simple -> clic bouton central et l'image s'ouvre dans un nouvel onglet.

Pour redimensionner les images sans script, on passe par le CSS :

Code:

.postbody img, .post-content img {
  max-width: 80%;
}

L'image ne fera que 80% maximum de son conteneur et sera automatiquement redimensionnée en largeur/hauteur dès que sa taille réelle dépasse.

On peut aussi utiliser une largeur en px mais l'avantage de la première méthode est que si tu changes un jour la largeur de ton fofo (ou passes d'une largeur en pixels comme il me semble que tu as à une largeur en pourcentage (comme sur mon fofo), tu n'auras aucun changement à effectuer dans le CSS.

Code:

.postbody img, .post-content img {
  max-width: 450px;
}

---

Edité à 21h15 :

Concernant ton édit que je viens juste de voir, là encore je ne reproduis pas.

Avec un moniteur de 1920*1080 px (Full HD) et une image de 2560*1600px

Au clic sur l'image j'ai 1302*814 et une loupe avec le signe + en guise de curseur
Au second clic sur l'image, j'ai 2560*1600 et un curseur en forme de main.
Si je clique une troisième fois sans relâcher le bouton, je peux déplacer la portion de l'image que je visualise vu que l'image est plus grande que mon moniteur.

[orpheus]

Tout d'abord, merci encore pour ton aide Neptunia, je note ^^

Concernant ton édit que je viens juste de voir, là encore je ne reproduis pas.

Avec un moniteur de 1920*1080 px (Full HD) et une image de 2560*1600px

Au clic sur l'image j'ai 1302*814 et une loupe avec le signe + en guise de curseur
Au second clic sur l'image, j'ai 2560*1600 et un curseur en forme de main.
Si je clique une troisième fois sans relâcher le bouton, je peux déplacer la portion de l'image que je visualise vu que l'image est plus grande que mon moniteur.

Décidément, je comprend pas comment ça se fait qu'on ai deux résultats différents O_o.
Pour te donner un exemple, prenons ce sujet :
https://empiredesouvenirs.forumactif.com/t532-princesse-sarah-test-blu-ray
Les images du coffret pas de soucis, elles s'affichent en taille réelle mais dès qu'on passe aux photos en 1920x1080 (voir capture ci dessous), je n'arrive pas à les afficher en taille réelle, j'ai essayé sous Chrome sous Firefox, même résultats sur les deux navigateurs et ce, en étant connecté et déconnecté. J'ai même essayé de virer mes extensions pour voir si le problème venait pas de là, même résultat.
A l'inverse, si je fais clique droit Afficher l'image, celle-ci s'affiche bien en taille réelle, du coup je comprend pas ...

[Neptunia]

Quand j'avais vu le script de Fred, je l'avais lu en diagonale.

On n'a pas tout à fait le même !

Peut-être que le "mien" te conviendrait mieux ?

Code:

$(function () {
 
var getFancy = function () {
  $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css"/><style>.fancybox-content{transition:none}</style>');
  $.ajax({url:'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js',cache:true,dataType:"script"}).then(function(){
    $.fn.addBack = $.fn.addBack || function (selector) {
      return this.add(selector == null ? this.prevObject : this.prevObject.filter(selector));
    };
    $('body').css('transition-duration')!=='0s' && ($.fancybox.defaults.hideScrollbar = false);
  });
  getFancy = function () {};
};
var contents = $('.post-entry,.post-content,.content,td>.postbody');
contents.find('img').css({maxWidth:'100%'}).load(function () {
  var a = $(this).closest('a');
  if(a.is('[data-fancybox]') || a.length && !/^(.+)@\1$|\b(servimg\.com\/).*@.*\b\2(?!.*\/th\/)/.test(a.prop('href')+'@'+$(this).prop('src'))) return;
  if (150 < this.naturalWidth || 100 < this.naturalHeight) {
    $(this).wrap($('<a data-fancybox="gallery"/>').prop('href', $(this).prop('src'))).unbind('load');
    getFancy();
  }
}).load();
 
});

Source : Diaporama pour visualiser les images dans les messages (fancybox ou lightbox) - Page 2 -> Dernier code du dernier message de Ea

[orpheus]

Ah ben avec ce nouveau script, j'arrive à zoomer sans problème ^^
Du coup, je vais garder ce dernier qui résout définitivement mon problème avec en prime une nouvelle fonction à mon forum.

Merci à toi Neptunia pour le temps passé à la résolution du problème et merci également à tous les autres intervenants qui ce sont penché sur mon problème, vous êtes géniaux !

[Neptunia]

Dernière précision sur la ligne 17 du script :

Code:

 if (150 < this.naturalWidth || 100 < this.naturalHeight) {

Le premier nombre correspond à la largeur de l'image et le second, à sa hauteur.

L'effet zoom ne fonctionne que sur les images de 150 pixels de large ou + ^et/_ou sur les images de 100 px de haut ou davantage.
J'avais ajusté la largeur pour exclure du zoom certaines émoticônes XXL.