jQuery Girl
  1. jQuery Girl
  3. Comment utiliser des photos haute résolution dans les messages texte dans Tumblr?
Intereting Posts
Image et Select Formatter dans la colonne jqgrid Comment obtenir l’id de la ligne sélectionnée en javascript? div contenteditable = “true” Afficher une image PNG en réponse à la demande AJAX jQuery Combiner Raphael et jQuery pour assurer la compatibilité du navigateur JQUERY connexion à un iFRAME Utilisation d’un bindingHandler personnalisé pour mettre à jour la largeur des éléments dans Knockout.js Impossible d’append avec succès un tag d’événement Google Analytics au lien créé par .attr Comment copier du texte en un clic dans Mozilla Firefox? Menu horizontal de JQuery slideUp au lieu de slideDown JQuery récupère l’identifiant de l’élément à partir de données chargées en ajax input, l’événement onchange ne se déclenche pas lorsque la valeur est définie manuellement Survolez problème avec Timeline $ (document) .sur ‘page prête: charge’ – ne fonctionne pas correctement dans ie10 Comment faire en sorte que le script de page reconnaisse une valeur d’élément INPUT modifiée manuellement?

Comment utiliser des photos haute résolution dans les messages texte dans Tumblr?

J’essaie d’utiliser la haute résolution dans les publications Tumblr. Lorsque je télécharge une photo dans un message texte, Tumblr la redimensionne à 500 pixels

Image affichée: 

image

Si je modifie 500 en la valeur data-orig-width ne me donne pas l’image d’origine, je veux simplement une image 1280. Si je change de 500 à 1280, cela me donne une image de 1280

500px: http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_500.jpg

1280px: http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_1280.jpg

J’ai essayé de changer les atsortingbuts de l’image de 500 à 1280 et cela fonctionne, mais seulement si le message contient une image téléchargée, cela ne change pas les images publiées avec l’éditeur html. Si les articles contiennent 2 images qui ont été téléchargées à partir de l’éditeur, le code jQuery affichera deux fois la première image sur 1280, mais la seconde image ne s’affichera pas.

Code jQuery: 

 //Resortingeve image src path var img_url = $('.tmblr-full img').attr("src"); //Resortingeve the width at which the image is displayed, 500px var normal_width = parseInt($('.tmblr-full img').attr("width")); //Replace 500px with the original image width or 1280 var new_url = img_url.replace(normal_width, 1280); //Assign new widths to the src and to the width atsortingbutes $(".tmblr-full img").attr( "width", 1280); $(".tmblr-full img").attr( "src", new_url);

J’ai essayé de changer 

 var img_url = $('.tmblr-full img').attr("src");

à 

 var img_url = $(this).find('.tmblr-full img').attr("src");

Mais ça ne fait rien

Utilisez {block:Posts inlineMediaWidth="1280"} et {/block:Posts} au lieu de {block:Posts} et {/block:Posts} pour obtenir des images “1280px” de grande largeur (si disponibles) dans le corps du message et les légendes de autres posts. La largeur que vous définissez affecte également des choses comme les vidéos.

La raison pour laquelle votre code n’a pas fonctionné pour les images incorporées ajoutées via l’éditeur “HTML”; très probablement parce que la classe tmblr-full est uniquement donnée à la figure contenant l’image téléchargée via l’éditeur “Rich Text”, c’est ce que Tumblr fait.

Remarque: vous n’avez pas posté le code HTML complet de vos messages. Ici, je suppose que la raison pour laquelle vous essayez jQuery est que vous n’êtes pas au courant de ce que je viens de dire ci-dessus.

Documentation sur le thème Tumblr

OK, je pense que quelque chose fonctionne (même si c’est légèrement hacky).

J’utilise cette fonction: 

 var fullImg = $('.post img'); fullImg.each(function(){ var img_url = $(this).attr("src"); var normal_width = parseInt($(this).attr("width")); var new_url = img_url.replace(400, 1280); $(this).attr( "width", 1280); $(this).attr( "src", new_url); });

J’ai testé cela dans jsfiddle en utilisant mon propre tumblr, donc j’ai dû changer et peaufiner quelques petites choses.

Explication.

Premièrement, comme nous appelons le même sélecteur à plusieurs resockets, j’ai mis la mienne en cache dans une variable à laquelle je pourrai me référer ultérieurement (plus rapide et plus facile à gérer).

var fullImg = $('.post img');

Utilisez une variable similaire pour votre sélecteur $('.tmblr-full img') .

Ensuite, chaque fonction effectue une itération sur chaque instance de .post img plutôt que de remplacer le contenu de la première par la même image.

De plus, je n’utilise pas de propriété de largeur ou de hauteur codée en dur dans mon thème, je ne peux donc pas obtenir la propriété de largeur d’image. Les miens sont redimensionnés à 400px, je passe donc cela comme paramètre à remplacer, mais idéalement, cela devrait être pris dans une variable. J’ai essayé de faire ceci sur le src mais je ne pouvais pas le faire fonctionner (en utilisant le split et la sous-chaîne).

Vous devez également garder à l’esprit que si aucune version de l’image 1280px n’existe, cette fonction sera toujours exécutée et tentera de remplacer le code. Vous aurez donc peut-être besoin d’une sorte de test pour vérifier l’atsortingbut src en premier. Quelque chose comme

if(img_url.match('400')){ // then execute the function ...

Voici un jsfiddle: https://jsfiddle.net/lharby/pwgqgvac/

MODIFIER:

J’ai réussi à stocker la taille de l’image dans une variable, ce qui ne devrait donc pas avoir d’importance s’il s’agit d’un nombre différent. 

 var fullImg = $('.post img'); fullImg.each(function(){ var img_url = $(this).attr("src"); var normal_width = parseInt($(this).attr("width")); var url_removed = img_url.split(".")[3]; // split the url at the "." and get the 3rd index url_removed = url_removed.substr(length -3); // get the last 3 chars eg 400 var new_url = img_url.replace(url_removed, 1280); $(this).attr( "width", 1280); $(this).attr( "src", new_url); });

J’ai mis à jour le violon