Skip to content

Medium Figures are stripped inappropriately #76

@indrora

Description

@indrora

In some Medium articles as of late, the format has changed to be figure > div > div > img+srcset

as an example: https://sofiapandelea.medium.com/monitor-replacement-using-a-projector-for-a-home-office-setup-231d2891b3ae

<figure class="pe pf pg ph pi mg mp mq paragraph-image"><div role="button" tabindex="0" class="pj pk fj pl bh pm"><div class="mp mq pd"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*07K9pRH3oBz_c9hk 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*07K9pRH3oBz_c9hk 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*07K9pRH3oBz_c9hk 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*07K9pRH3oBz_c9hk 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*07K9pRH3oBz_c9hk 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*07K9pRH3oBz_c9hk 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*07K9pRH3oBz_c9hk 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"><source data-testid="og" srcset="https://miro.medium.com/v2/resize:fit:640/0*07K9pRH3oBz_c9hk 640w, https://miro.medium.com/v2/resize:fit:720/0*07K9pRH3oBz_c9hk 720w, https://miro.medium.com/v2/resize:fit:750/0*07K9pRH3oBz_c9hk 750w, https://miro.medium.com/v2/resize:fit:786/0*07K9pRH3oBz_c9hk 786w, https://miro.medium.com/v2/resize:fit:828/0*07K9pRH3oBz_c9hk 828w, https://miro.medium.com/v2/resize:fit:1100/0*07K9pRH3oBz_c9hk 1100w, https://miro.medium.com/v2/resize:fit:1400/0*07K9pRH3oBz_c9hk 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"><img alt="" class="bh ln mm c" width="700" height="525" loading="lazy" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*07K9pRH3oBz_c9hk"></picture></div></div></figure>

however once readability has sliced and diced, all you get is <figure></figure>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions