Forum HTML Templates VideoStories How exactly does the image resize (the ?mw=xxx&mh=xxx) work?

This topic contains 3 replies, has 2 voices, and was last updated by  Labluzzaman 4 months, 1 week ago.

  • Author
    Posts
  • #16156

    grfoxhound
    Customer
    Posts: 21

    I see that after all images in your html template and I understand that it is needed for the resizing of the images depending in the column they are used in.

    But I am wondering how exactly this works as I do not really understand how it handles the images I use/upload.
    Should I set a default/main value somewhere so it knows the default size of all images I/my users upload to my own website?

    On my website for example people can upload an image and this will be resized (by the system) to 1920×1080, so all images on my website have the exact same main size.
    Now, in all html files I see different values after the ?mw=xxx&mh=xxx part and I am not sure if I have to change that value so it properly resizes my 1920×1080 images or wether I have to set the main/default image size somewhere in a script so all my 1920×1080 images are properly sized depending on the area in which they display.

    I hope you can give me some information about this and many thanks in advance again 🙂

  • #16159

    Labluzzaman
    Support
    Posts: 553

    Hi,
    mw for max-width and mh for max-height. Images are resized automatically in this template and there is no script for it. Actually we used hosted placeholder image link from youtube and vimeo. Their thumbnail image is small size and we need it larger then them that’s why we used mw and mh. For using mw and mh browser catch the actual dimension from their server defined as mw and mh. If your images all are large size like 1920*1080 then you can remove the mw and mh form every image but it will affect your loading time. We suggest to use hosted thumbnail image for video.
    Hope this will give you a clear concept.
    Thanks.

  • #16168

    grfoxhound
    Customer
    Posts: 21

    Thank you very much for that information.

    So, to recap and make sure I properly understand its working:
    Actually what I should do is to make sure I use the image size I need on specific places.
    Meaning if on some part of my website an image is disaplyed at 100x100px and that same image is displayed elsewhere as 450×450 I should actually make sure the requested/needed sizes are served instead of the resized 1920×1080 large image?

    I actually already thought that was what I should have done. I misunderstood the functioning of the ?Mw=Xxx&Mh=Xxx part 🙂

    Yes, for videos I will link to the preview images served by youtube/vimeo. Youtube I have covered already but vimeo has a different way of serving preview images for the videos which are disaplyed and I do not yet know how I can dynamically show the proper preview with any vimeo video added.

    Thanks again for the reply and info!

  • #16172

    Labluzzaman
    Support
    Posts: 553

    Hi,
    You can make small image with same ratio of your image size like 1920*1080 in photoshop. Or upload it in youtube/vimeo with your preview image and paste the image link in src it will adjust automatically, if not then you can control the dimension with css. And for your vimeo preview image open a vimeo video and go to inspect element and find .video class under .video-wrapper div, it has a background image src, copy the link and change the format .webp to .jpg/.png (only google chrome supports .webp format without adding any script) and also those mw, mh. Hope you can understand what I’m telling.

    Thanks.

You must be logged in to reply to this topic.