V5-Beta Is attribute data-cropped="true" correctly working?

[acwolff]

This album containes fixed-size thumbnails which are all cropped., so I added attribute data-cropped="true" to all thumbnails like the 7th panoramic image:

<a  href="slides/080515_01_W2_Kioni_Anogi_360PF1.jpg" data-pswp-width="13548" data-pswp-height="1920" id="6"
data-cropped="true" data-caption='idem via expanded view'>
 <div class="box" style = "width:120px">
   <img   src="thumbs/080515_01_W2_Kioni_Anogi_360PF1.jpg" width="120" height="80" alt="2008-05-15" title="2008-05-15"  /><br>
 </div>
</a>

I don't think that the addition lof this attribute eads to a smoothly zoom-out transition, try-it-yourself.

Do I something wrongly?
Or is the difference in aspect ratio too extreme?

This album has been made with the same images but now with a thumbnails page made with the Justified Gallery, only images 6 and 7 are cropped and do have the data-cropped="true" attribute, but I am not impressed by the results off this added attribute.

[dimsemenov]

The aspect ratio of thumbnail image itself must match the large image, you crop it via CSS (either via background-size:cover, or object-fit: cover;).

[acwolff]

Well I don’t think my thumbnails are cropped via CSS, it is done with a JAVA ConstrainRatioFilter, so that explains why ir does not work.
i will investigate the methos you indicated. Could you give a link to some example code?

Thanks for your quick response!

[BilouMaster]

You can see cropped thumbnails on my gallery, thumbnails are cropped with this kind of CSS:

.gallery {
    display: flex;
    flex-wrap: wrap;
}
.gallery:after {
    content: '';
    flex-grow: 5;
}
.thumb {
    margin: 2px;
    flex-grow: 1;
    max-height: 250px;
    overflow: hidden;
}
.thumb > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

With the scheme:

<div class="gallery">
    <a class="thumb" ... >
        <img ... >
    </a>
    <a class="thumb" ... >
        <img ... >
    </a>
    <a class="thumb" ... >
        <img ... >
    </a>
</div>

My <a> tags got a style="width: ..." with ... = 0.7 * original thumbnail width, it's a try on aspect-ratio optimization, working on Firefox but not on Chrome....

[acwolff]

Thanks @BilouMaster for this hints, this will help me a lot to solve this!
But I see in your gallery no zoom-out animation if you click on a thumbnail, you did not like that?

[BilouMaster]

I don't know... I think I have zoom-out animation... 😅

[acwolff]

Well if I open your nice gallery on my Windows 10 PC I see indeed a zoomed animation effect.
But I was looking at your gallery on my iPad with the Chrome browser, in that case you don't see this animation effect.

[acwolff]

If I use this CSS and HTML code:

.thumbs .pano {
  height: 80px;
  width: 160px;
  object-fit: cover;
}

<a  href= "slides/080515_01_W2_Kioni_Anogi_360PF1.jpg"
data-pswp-width="13548" data-pswp-height="1920" id="6" data-cropped="true"
data-caption='idem via expanded view'>
<div class="box"  style = "width:160px">
<img   src="thumbs/080515_01_W2_Kioni_Anogi_360PF1.jpg"  class="pano"
width="400" height="56" alt="2008-05-15" title="2008-05-15"  /><br>
</div>
</a>

it works OK on my PC see https://www.andrewolff.nl/Test_Photopswipe_V5/PSP5-coverPano/ but on my iPad I see no zoom effect.