On Fri, Jan 23, 2026 at 1:56 PM Travis Briggs <[email protected]> wrote:

> So if I have the following response from the mobile API, with a "lazy
> load" image:
>
>  <span
>           class="mw-file-element gallery-img pcs-widen-image-override
> pcs-lazy-load-placeholder pcs-lazy-load-placeholder-pending"
>           style="width: 1500px"
>           data-class="mw-file-element gallery-img pcs-widen-image-override"
>           data-src="//
> upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/1200px-BMW.svg.png
> "
>           data-width="1200"
>           data-height="1500"
>           data-alt="Logo used in vehicles since 1997"
>           data-data-file-width="2400"
>           data-data-file-height="3000"
>           data-data-file-original-src="//
> upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/800px-BMW.svg.png
> "
>           ><span style="padding-top: 100%">
>
> And I want to convert it to an actual <img> tag at a smaller size, also
> embedding the image binary in our app (Kiwix), I should no longer request
> https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/*400px*
> -BMW.svg.png (and then set the width/height attributes to 400px by 320px
> in the app), but instead request
> https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/*330*
> *px*-BMW.svg.png and set the height to 264px?
>

While poking at Popups and other bits I added a helper function to mw.util
to replicate the steps logic from the PHP side as a helper for JS logic
that does this sort of thing. Something like this should work for this use
case:

let url = '//
upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/1200px-BMW.svg.png
';
let target = 400; // not necessarily a standard size
let info = mw.util.parseImageUrl( url );
if ( info && info.resizeUrl ) {
    // this should force the target to a standard size
    target = mw.util.adjustThumbWidthForSteps( target, info.width );
    // and this will rewrite the URL
    url = info.resizeUrl( target );
}

Probably we should encapsulate this whole bit into an easier to use single
function. :)

-- brooke
_______________________________________________
Wikitech-l mailing list -- [email protected]
To unsubscribe send an email to [email protected]
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/

Reply via email to