layout shift on long pages with media?

[mestela]

Sorry to necro a thread, but the old one seemed to die...

On this page if I use a url with an anchor tag, you'll see it go to the right place, then get pushed away as all the images and video load in after the text:

https://tokeru.com/cgwiki/HoudiniDops.html#rbd_follow_targets

One of the answers in the older github discussion implied there should be a vite plugin to deal with this. I tried mesure media but it didn't seem to help with vitepress. I think I installed it correctly:

import { defineConfig } from 'vite';
import vitePluginMeasureMedia from 'vite-plugin-measure-media';
import ffprobe from '@ffprobe-binary/ffprobe';

export default defineConfig({
    plugins: [vitePluginMeasureMedia({ bin: ffprobe, })], // when using custom ffprobe binary
})

The build process goes without errors, but suspiciously fast. When I preview and inspect an image tag, I can see that the images don't have any width or height attribs.

Would love to get an answer to this! Vitepress is incredible, but the jumping when using anchors is a bit distracting. If I had say 20 images I'd just go in and add the required attribs by hand, but I have hundreds of images and video on these pages...

[brc-dd]

Try one of these - https://github.com/boyum/markdown-it-image-size or https://github.com/ulfschneider/markdown-it-fitmedia

You need to add them via markdown.config

[mestela]

That worked, thanks! Took a bit of careful poking to enable the plugin alongside the other markdown plugin i have for video, here's that markdown blog in my config.mts, hopefully this'll help someone else in future:

 markdown: {
    config: md => {
        md.use(markdownHtml5, {
            html5embed: {
                renderFn: function (prop, att) {
                    var tag = '<video controls autoplay muted playsInLine loop preload="metadata" >';
                    tag += '<source src="$1" type="video/mp4">';
                    tag += '</video>\n';
                    return tag.replace('$0', prop.url.replace('.mp4', '.jpg')).replace('$1', prop.url);
                }
            },
        })
        md.use(markdownItFitMedia, {  //default options
          imgDir: './docs/../docs/',
          lazyLoad: true,
          decoding: 'auto',
          aspectRatio: true,
          imgSizeHint: true,
          fitWrapElements: ['iframe', 'video']
      })    
  }  
},