Add "width" and "height" attribute to image card

Ideas
1

Adding the width and height attribute to all images to use these values with available gallery libraries.

When using the gallery card the resulting HTML code of each of the img tags include a width and height attribute, which shows information about the original size of each image.

For example (gallery with one image):

<figure class="kg-card kg-gallery-card kg-width-wide">
  <div class="kg-gallery-container">
    <div class="kg-gallery-row">
      <div class="kg-gallery-image" style="flex: 1.67371 1 0%;">
        <img src="http://192.168.178.39:2368/content/images/2020/10/1-1.png"
             width="1267"
             height="757"
             alt=""
             srcset="http://192.168.178.39:2368/content/images/size/w600/2020/10/1-1.png 600w, 
                     http://192.168.178.39:2368/content/images/size/w1000/2020/10/1-1.png 1000w, 
                     http://192.168.178.39:2368/content/images/2020/10/1-1.png 1267w"
             sizes="(min-width: 1200px) 1200px">
      </div>
    </div>
  </div>
</figure>

When using the “classical single image” card the resulting img tag is missing this information.
Using the image card:

<figure class="kg-card kg-image-card">
  <img src="http://192.168.178.39:2368/content/images/2020/10/1.png"
       class="kg-image"
       alt=""
       srcset="http://192.168.178.39:2368/content/images/size/w600/2020/10/1.png 600w, 
               http://192.168.178.39:2368/content/images/size/w1000/2020/10/1.png 1000w, 
               http://192.168.178.39:2368/content/images/2020/10/1.png 1267w"
       sizes="(min-width: 720px) 720px">
</figure>

From the srcset you can get the width of the original image, but not the height.

Unfortunately this is a necessary information to use the PhotoSwipe library, as seen here or in the “Getting started” guide.

2

Adding those attributes is unfortunately a breaking change for some widely-used themes. We’re looking at adding the attributes in the next major.

1 Like
3

In the meantime, you can use PhotoSwipe’s gettingData event to calculate the image size on the fly. Here is an useful issue/discussion on their repo. Serving images of unknown size - suggestion/solution · Issue #796 · dimsemenov/PhotoSwipe · GitHub

4

Thanks for the hint; this is how I will do it for now.
(Unfortunately the opening animation does not handle this approach very well, but that’s just a minor problem.)
Looking forward to the next major release :+1:

5

Also second that, keep getting dinged SEO for not having the width and height attributed.