web-dev-qa-db-fra.com

Comment puis-je faire en sorte que tous les uploads post-image aient automatiquement les attributs data-width et data-height?

À l'heure actuelle, toutes mes images ont automatiquement width = et height = lorsqu'un utilisateur ajoute une image à un article de blog. Mais que se passe-t-il si je veux aussi que chaque image ait une largeur de données = et une hauteur de données = et qu’elle soit égale à la taille de l’image? Est-ce possible?

Je veux utiliser ceci: http://davidecalignano.it/project/?medium-lightbox sur un site Web, mais il semble avoir besoin de ces attributs et le ne fonctionnera pas si je dois les ajouter manuellement à chaque image pour chaque article de blog.

imagesimage-sizedefaultattribute
1
jimmyplaysdrums

Oui, vous pouvez. Voir mon violon de travail ici:

http://jsfiddle.net/MonkimoE/0wtgm8a1/

  1. Vous devez ajouter un identifiant.

exemple: <img class="img" id="imageid".....

  1. Supprimer tous les attributs "largeur de données" et "hauteur de données". car il sera ajouté automatiquement.

  2. Ajouter ce javascript:

(vous pouvez changer le '$' en 'jQuery' si cela ne fonctionne pas avec votre thème)

<script> var img = document.getElementById('imageid');  var width = img.naturalWidth; var height = img.naturalHeight;

$( document ).ready(function() {
    $('div.aspectRatioPlaceholder').find('*').attr('data-width', width);
    $('div.aspectRatioPlaceholder').find('*').attr('data-height', height); }); </script>

Mieux vaut utiliser javascript comme dans l'exemple ci-dessus. Mais si vous voulez traiter avec php. vous pouvez modifier vos thèmes/plugins en utilisant ceci:

<?php list($width, $height) = getimagesize("image URL here"); ?>

il produira $ width en tant que largeur réelle de l'image, $ height en tant que hauteur réelle de l'image.

Bonne chance!

2
MonkimoE