Blog Documentation Book a Demo
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Is there a way to resize image server side before they download?

GerhardGerhard New
in Community Addons & Development

I really like Vanilla forum and this plugin, but it has a severe limitation in that when it displays these tiny image previews - it actually downloads the entire img src="" --- which can be many megabytes. I have many HD photos on my forum (simple phone camera uploads) - so when a user first lands on the forum home page - it takes ages to download a 20mb page with only small images being displayed. The code can be anywhere - in the plugin or elsewhere.

To be honest I don't know about back end coding very much. Would there be a way to resize the image server side before the download? This could be very useful on mobile devices too - where it only downloads an image in the thread with a max-width of 100vw.

I know this sounds simple but is probably difficult to do in practice, otherwise it would have already been done I suppose. But I thought I'd ask.

I found these pages that seem to be doing soemthign similar, but like I said, I don't really know much about the backend, and it would take me days to actually understand what is goinf on in these articles, and how to implement that to Vanilla backend,

https://css-tricks.com/snippets/php/server-side-image-resizer/
https://zocada.com/compress-resize-images-javascript-browser/
https://jsfiddle.net/codeandcloud/xor3L8db/


Any information or feedback is much appreciated, thank you.

Comments

  • pioc34pioc34 ✭✭

    Yes it hurts web performance a lot.

    All profile pictures are entirely downloaded even if vanilla show little profiles pictures (24x24)

    When photos are uploaded, maybe vanilla could save 3 versions (24x24, 100x100 and original picture).

  • GerhardGerhard New
    https://open.vanillaforums.com/discussion/comment/257664#Comment_257664

    Yes, that's a great idea. Exactly like Wordpress is doing.

    I've spent a few hours looking for a solution to no avail. I don't really understand the theory to troubleshoot the solutions I could find.

  • charrondevcharrondev Vanilla Staff

    Hmm. Vanilla does save profile thumbnails and uses those most of the time. @pioc34 For example your profile thumbnail is sized at 100x100 px. These thumbnails are already generated on image upload and are configurable via the Garden.Thumbnail.Size config.

    This plugin would likely want to do this for the images it uses when posts are created.

    Also 20Mb images are crazy. I'd highly recommend enabling the image size cap on your forum in the dashboard posting settings. That should help.

    image.png


  • R_JR_J Admin

    The original question was dealing with that plugin which shows a preview for images in a discussion, nor?

    Looking at the source I see two problems: 1) it does a regex search through the Discussion Body for img-tags. Judging by the quick look I have taken, I'd say it will only work with html, not with BBCode or Markdown and 2) it fetches the original image also from external links which will make it exceptionally slow if the picture is hosted on a slow external server. That will also prevent any image limits: if a user links to a 1GB image, that would be loaded and that cannot be prevented by any setting in Vanilla - that's the nature of an external file...

    The plugin should be rewritten from scratch, I'd say. Main logic should work like that:

    • Look if Discussion->Attributes[ImagePreview] exist
    • If yes, it should be either MediaID = X or MediaID = false (no image available)
    • If no, check GDN_Media for ForeignID = DiscussionID, ForeignTable = discussion. Set Discussion->Attributes accordingly
    • If no and no entry in GDN_Media, parse formatted Discussion Body for img tags, download first image to uploads folder, create thumbnail and save everything done in this step to Media table, update Discussion->Attributes in the last step
    • If MediaID != false, fetch ThumbUrl from Media table and display it


  • GerhardGerhard New

    Hi, thank you for taking the time to actually look at the plugin code R_J.

    Unfortunately I don't know nearly enough to actually rewrite the plugin - I imagine it would take double digit hours to do so anyway - and for me to learn from the ground up probably a hundred+... which I don't see myself actually doing at this stage.


    Just as another idea I had in the mean time, that should work from what I can tell, is a CDN caching image-resize option. Cloudflare seems to offer exactly this, but only on their business membership, which is $200/month!

    I'm not a CDN expert and don't know how to really connect vanilla to a CDN. Cloudflare is through CPanel. My Vanilla forum is a sub-folder of a Wordpress site.... I see plugins that seem to do a image-resize caching function on Wordpress.... but I don't understand how I could go about connecting that to Wordpress, but more importantly, my Vanilla forum sub-folder too.

    If anyone has any knowledge to drop or any comments, I'm all ears.

  • GerhardGerhard New

    Hi @R_J - do you mind if I ask you a question, excuse by lack of knowledge.

    I looked at the plugin's code too, and the search line seems to be:

    preg_match('#\<img.+?src="([^"]*).+?\>#s', $Sender->EventArguments['Discussion']->Body, $images);

    On Line 29. All those symbols after src= are super confusing and weird, but I think that just means find any <img> with src="anything"..... could this line be changed to search for <img src="forum/uploads/...anything" - this would eliminate external images being shown.


    Then my next confusion.... according to my understanding I have found a workaround, but it doesn't work. I can use the "FileUpload" plugin instead of the built-in image upload options. (The built in ones do not create a thumbnail in the post at all - is this normal or maybe my install in broken this way). The image upload for this plugin does create an <img>... but the IndexDiscussionImage plugin doesn't see it and doesn't create the thumbnail in the discussions page. I don't understand why, it is an <img> in the body after all.

    Here are two links, one works and one doesn't, would you have any insight into why?

    https://www.gerhardfourie.com/forum/discussion/97/test3#latest - has the thumbnail, doesn't work.

    https://www.gerhardfourie.com/forum/discussion/96/test2#latest - has the full size image, does work.


    PS if you visit the main discussion page of the forum, you will my problem.... it takes an ugly amount of time to load all those small images as previews.

  • R_JR_J Admin

    There are great online tools which help in learning (or at least understanding) regular expressions. Try this one. Use this as the pattern \<img.+?src="([^"]).+?\>, the "s" is the single line flag that you can choose when you click on the flag symbol.

    I wouldn't use the FileUpload plugin. I think it is no longer supported. And if everything you need is a thumbnail, you really should think about how to get that thumbnail created. Currently I have no idea for a plugin to write and I can imagine trying my hands on an overhauled version.

    Imagine you could design that plugin from ground on up: what would be the features you would like to see:

    1. Should the preview be of the a) first image in the discussion, b) first image in discussion and comments, c) a random picture of the discussion, d) a random picture of all discussions and comments
    2. Should the preview be for external or internal images only?
    3. Should clicking the picture open a) the discussion b) discussion#latest c) the post it links to or display the image in a lightbox without leaving the current page?

    I think I'll try to make those things configurable.

    I don't guarantee I ever finish this, but I will at least start it and upload what I have done on GitHub. If I really do not finish it, you can consider continueing by yourself. I enjoy supporting new developers so I will be happy to help.

  • GerhardGerhard New

    Hey @R_J - some big life stuff happened, so I haven't been working on the forum at all for the past few months.

    For now I have just removed the previews - a fast and clean forum is a lot more important than the previews.

    I guess to answer your questions:

    1. It should capture only the first image on the discussion - it should ignore all comments images - even if there are no images in the discussion.
    2. The preview should be for both internal and external
    3. I guess opening a lightbox without leaving the current page would be best - if that is too difficult, second best wold be option a)

    I think myself and many others would get a lot of great use out of such a plugin.

    I'm not expecting anyone to spend hours of their time on this though, unless maybe they see value in it themselves. I know I struggle for time a lot with work and everything. If you do work on this at all, let me know and I'll try to help as best I can.

  • pitkmipitkmi ✭

    Sorry for digging up an old thread, but I recently worked on the bloated index issue by hooking up ImageKit.io, which is a CDN for all kinds of real-time image processing. Their free tier is good for 20GB of traffic, which should be plenty, since my forum is pretty small and I'm currently only running thread thumbnails through it.

    It basically went like this:

    1. Sign up and get your ID
    2. The URL format can be either a path parameter: https://ik.imagekit.io/[your ID]/[transformation]/[path to image] or a query parameter:https://ik.imagekit.io/[your ID]/[path to image]?[transformation]. You can get custom domains on the paid tiers.
    3. My transformation is a simple resize, 240x135 in my case, so that would look like this: tr=w-240,h-135. I made it into a named transformation and restricted unnamed image transformations in the Security settings to keep people from messing with the parameters. You can add blurs, overlays and all kinds of effects, if you want. Lazy loading is probably another thing worth looking into for performance.
    4. I only wanted to process attached images, so in class.indexdiscussionimage.plugin.php I checked $ImageSrc for my forum URL and if it was there, I added the necessary ImageKit bits to $newTitleAnchor. If not, I used the default one. I got it working on some external URLs as well, but not all, so I decided to just stick to attachments. Also, I didn't want to process people's images without their consent. Maybe they're hosting them themselves as a conscious decision, because they don't want their work on strange servers in the cloud.

    Don't have any proper metrics, since I just hooked it up a few days ago, but currently I'm looking at 98% bandwidth reduction on the Dashboard. 😜 It's an art forum, so mostly large images.

Sign In or Register to comment.