0

hello friends i am trying to get the size (height and width) of an image from an hrf and put these values ​​in its attribute

This is driving me crazy

this is my html:

<figure>
    <a href="image-large-1.jpg">
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg">
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg">
        <img src="image-small-3.jpg"/>
    </a>
</figure>

this is what I want :

<figure>
    <a href="image-large-1.jpg" original-size="1000x800">   //the sizes  are example
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg" original-size="1200x700">   //the sizes  are example
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg" original-size="900x980">  //the sizes  are example
        <img src="image-small-3.jpg"/>
    </a>
</figure>

the "original-size" attribute I want to get it from " a hrf "

I was trying with this code that I found here, I get the original size of the image-large from the href (in the console.log) but I cannot print them in the html

help me please

         $(".containerGallery figure a").each(function() {
                var imgSrc, imgW, imgH;
                function myFunction(image){
                    var img = new Image();
                    img.src = image;
                    img.onload = function() {   
                        return {
                            src:image,
                            width:this.width,
                            height:this.height};
                        }
                    return img;
                }
                var x = myFunction($(this).attr('href'));
                x.addEventListener('load',function(){
                    imgSrc = x.src;
                    imgW = x.width;
                    imgH = x.height;
                });
                $(this).each(function() {
                    x.addEventListener('load',function(){
                        console.log(imgW+'x'+imgH);
                        $(this).attr('original-size', imgW+'x'+imgH);
                    });
                }); 
            });
3
  • Any image loads automatically with it's original Width x Heightso if you really just want to get their Width and Height, you could just use javascript to get them and then add them as attributes to the elements you wish!
    – Adnane Ar
    May 27, 2020 at 22:10
  • original-size is an invalid attribute. if you want to store the size to an HTML tag, use data-original-size.
    – terrymorse
    May 27, 2020 at 22:37
  • thank for your coments i have been very helpful to me to understand more javascript
    – jet
    May 27, 2020 at 23:39

2 Answers 2

0

The JavaScript code in the question is overly complex and redundant.

Here's some simplified code that accomplishes the same thing.

// get all <a> elements inside <figure> elements
const atags = Array.from(document.querySelectorAll('figure a'));

// iterate over every <a> tag
atags.forEach(atag => {

  // create blank image element
  var img = new Image();

  // when the image loads, store its dimensions to the atag's
  // `data-original-size` attribute
  img.addEventListener('load', () => {
    let imgW = img.width,
      imgH = img.height;
    atag.dataset.originalSize = `${imgW}x${imgH}`;
    console.log('atag:', atag);
  });
  
  // load image from atag's href
  img.src = atag.href;

});
<figure>
  <a href="https://i.picsum.photos/id/1077/200/300.jpg">
    <img src="https://via.placeholder.com/40" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/913/200/200.jpg">
    <img src="https://via.placeholder.com/50" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/1058/100/100.jpg">
    <img src="https://via.placeholder.com/60" />
  </a>
</figure>

1
  • wouuuu this code worked perfectly, I was about to break my pc, thank you very much you are the GOAT
    – jet
    May 27, 2020 at 23:32
0

Here is script that does absolutely what you're looking for!

const getOriginalSize = (target, url) => {

  const image = document.createElement("img");
  image.src = url;
  
  image.onload = function(){
  
    target.setAttribute("original-size", `${image.naturalWidth}x${image.naturalHeight}`);
  
  }
  

  return image;
}
<figure>
    <a href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"/>
    </a>
</figure>

<figure>
    <a href="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg">
        <img src="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg"/>
    </a>
</figure>


<script>

  document.addEventListener('DOMContentLoaded', () => {
  
    document.querySelectorAll("figure").forEach( (figure) => {
    
      figure.querySelectorAll("a[href]").forEach( function(targetAhref) {
      
        getOriginalSize(targetAhref, targetAhref.href);
        console.warn("image loaded and size registred!");
      
      } );
    
    } );
  
  } );

</script>

2
  • 1
    That gets the size of the <img> tag, not the image in the <a href="">
    – terrymorse
    May 27, 2020 at 22:38
  • Ah! you are right I did not notice that the ahref link is different of img src! Not problem im going to fix that real quick!
    – Adnane Ar
    May 27, 2020 at 22:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.