[OzzModz] Cloudflare Image Resizing - On Demand Responsive Images [Deleted]

Nulumia

Nulumia

Well-known member
Nulumia submitted a new resource:

Cloudflare Image Resizing - Integrates Cloudflare Image Resizing into Xenforo. WEBP & AVIF support, resize images and more

View attachment 268401

A game-changing addition to Xenforo, leverage the power of Cloudflare Image Resizing to optimize your site. Cloudflare Image Resizing is a paid feature available to Cloudflare Professional plans. However, the benefits and savings are unmatched to deliver responsive images on demand in next gen formats.

Requires:
  • Cloudflare Professional Plan ($20 USD/mo)
  • Cloudflare Image Resizing ($9 USD per 50k requests)
...
Click to expand...

Read more about this resource...
 
Cool! Will it serve 2x images to retina devices and 1x to old ones?
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
 
Anatoliy said:
Cool! Will it serve 2x images to retina devices and 1x to old ones?
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
Click to expand...
It does create a range of different sizes of images based on device size, but not a twice-large set of every version. With research and testing it may be practical enough to produce such a comprehensive set (tablet, tablet retina; mobile, mobile retina etc). In fact, allow me to double check browser behavior on that as I believe most browsers will take a larger copy from srcset for retina anyways, making this unnecessary :-)

For right now it uses srcset to supply a range from 4k down to 320px. It will automatically cap responsive sizes below the total width of the source image - so it's not wasting time & requests producing resized images when the device is already close enough :)
Anatoliy said:
And also will it process a thumbnail img to display a thumbnail or you crated a template modification and it will take an original img, process it accordingly to a visitor device and show a thumbnail?
Click to expand...
Thumbnail images are currently not affected - just the full attachments.

As I just realized the FAQ does not mention this, this addon does not affect external images, even if they're added via the BBCode img tag. The current line of thinking is that we should not have our Cloudflare caching images which we don't own or hold on our servers.
 
@Anatoliy

This public test thread shows the savings for one attachment example.

Check this thread to see the full device-specific range being applied to several attachments using the srcset method. You can see this by either resizing your browser and refreshing the page, then opening the attachments in another tab to see they are indeed resized. Or, you can inspect the attachments in your browser console to examine the srcset range.
 
Double checked and yes this is directly from Cloudflare:
There is no need to specify screen density here (2x, etc.), because the browser automatically takes it into account and picks a higher-resolution image when necessary.
Click to expand...
So the srcset feature specifying the device sizes will also work for retina as the browser will select the larger image from the range :)
 
Very embarrassing but the pricing estimate in the FAQ was incorrect! The correct way is to divide your attachments by 50000 first:
X attachments * 0.8 / 50000 * $9 = monthly billing

The original FAQ would have resulted in a rediculously high estimate 😯
 
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)
 
briansol said:
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)
Click to expand...

That’s what I’m using at the moments. This addon is promising, but expensive, plus I have to pay to cloudflare. I would consider it, at cheaper price.
 
The one-time addon cost is not a big deal - i think it's fair. but cloudflare pro is not something i can afford on an on-going basis, so a service that only charges for the transformation only is what i'm after.
 
briansol said:
Any way to leverage this without cloudflare? I've hooked up with Kraken.io in the past as a cheaper alternative. But, the xf integration piece was always lacking (srcset/etc)
Click to expand...
Faust said:
That’s what I’m using at the moments. This addon is promising, but expensive, plus I have to pay to cloudflare. I would consider it, at cheaper price.
Click to expand...
Providing matched functionality for another image service is completely doable, especially now that the proof of concept is there with this addon (and tested).
 
Agreed. This functionality is just awesome and the price for the addon itself is completely just, but it's a substantial cost to Cloudfare. I have no use for Pro, other than for the image resize part, and I have to pay extra on top for that as well. I wish there were some other alternatives with similar feature set. :\
 
I've just installed and my logs are filling with these errors. (Server IIS10, PHP 8.1.5).

  • ErrorException: Template error: [E_WARNING] Undefined variable $srcset
  • src\addons\Nulumia\CFImageResizing\Callback\AttachmentFormatter.php:39
  • Generated by: Unknown account
  • May 31, 2022 at 16:06
Code: 
#0 src\addons\Nulumia\CFImageResizing\Callback\AttachmentFormatter.php(39): XF\Template\Templater->handleTemplateError(2, '[E_WARNING] Und...', 'C:\\root\\Forums\\...', 39)
#1 src\XF\Template\Templater.php(1695): Nulumia\CFImageResizing\Callback\AttachmentFormatter::renderSrcset('', Array, Object(SV\StandardLib\XF\Template\Templater))
#2 internal_data\code_cache\templates\l1\s12\public\lightbox_macros.php(110): XF\Template\Templater->callback('Nulumia\\CFImage...', 'renderSrcset', '', Array)
#3 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#4 internal_data\code_cache\templates\l1\s12\public\bb_code_tag_attach.php(73): XF\Template\Templater->callMacro('lightbox_macros', 'single_image', Array, Array)
#5 src\XF\Template\Templater.php(1651): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#6 src\XF\BbCode\Renderer\Html.php(528): XF\Template\Templater->renderTemplate('bb_code_tag_att...', Array)
#7 src\XF\BbCode\Renderer\Html.php(523): XF\BbCode\Renderer\Html->getRenderedAttachment(Object(ThemeHouse\AttachmentsPlus\XF\Entity\Attachment), Array)
#8 src\addons\EAEAddons\ConversationTools\XF\BbCode\Renderer\Html.php(27): XF\BbCode\Renderer\Html->renderTagAttach(Array, Array, Array, Array)
#9 src\XF\BbCode\Renderer\Html.php(310): EAEAddons\ConversationTools\XF\BbCode\Renderer\Html->renderTagAttach(Array, Array, Array, Array, Object(EAEAddons\ConversationTools\XF\BbCode\Renderer\Html))
#10 src\XF\BbCode\Traverser.php(63): XF\BbCode\Renderer\Html->renderTag(Array, Array)
#11 src\XF\BbCode\Traverser.php(39): XF\BbCode\Traverser->renderSubTree(Array, Array)
#12 src\XF\BbCode\Traverser.php(22): XF\BbCode\Traverser->renderAst(Array, Object(SV\SignupAbuseBlocking\XF\BbCode\RuleSet), Array)
#13 src\XF\SubContainer\BbCode.php(222): XF\BbCode\Traverser->render('[ATTACH type="f...', Object(XF\BbCode\Parser), Object(SV\SignupAbuseBlocking\XF\BbCode\RuleSet), Array)
#14 src\XF\Template\Templater.php(2379): XF\SubContainer\BbCode->render('[ATTACH type="f...', 'html', 'post', Object(XFES\XF\Entity\Post), Array)
#15 src\XF\Template\Templater.php(1128): XF\Template\Templater->fnBbCode(Object(SV\StandardLib\XF\Template\Templater), false, '[ATTACH type="f...', 'post', Object(XFES\XF\Entity\Post))
#16 internal_data\code_cache\templates\l1\s12\public\post_macros.php(557): XF\Template\Templater->func('bb_code', Array, false)
#17 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#18 internal_data\code_cache\templates\l1\s12\public\post_article_macros.php(96): XF\Template\Templater->callMacro('post_macros', 'post_user_conte...', Array, Array)
#19 src\XF\Template\Templater.php(824): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, NULL)
#20 internal_data\code_cache\templates\l1\s12\public\thread_view.php(497): XF\Template\Templater->callMacro('post_article_ma...', 'article', Array, Array)
#21 src\XF\Template\Templater.php(987): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, Object(XF\Template\ExtensionSet))
#22 src\XF\Template\Templater.php(923): XF\Template\Templater->renderExtensionInternal('pinned_body', Array, Array, Object(XF\Template\ExtensionSet))
#23 internal_data\code_cache\templates\l1\s12\public\thread_view.php(882): XF\Template\Templater->renderExtension('pinned_body', Array, Object(XF\Template\ExtensionSet))
#24 src\XF\Template\Templater.php(1651): XF\Template\Templater->{closure}(Object(SV\StandardLib\XF\Template\Templater), Array, Object(XF\Template\ExtensionSet))
#25 src\XF\Template\Templater.php(1642): XF\Template\Templater->renderTemplate('thread_view', Array, true, NULL)
#26 src\XF\Template\Template.php(24): XF\Template\Templater->renderTemplate('thread_view_typ...', Array)
#27 src\XF\Mvc\Renderer\Html.php(50): XF\Template\Template->render()
#28 src\XF\Mvc\Dispatcher.php(460): XF\Mvc\Renderer\Html->renderView('XF:Thread\\ViewT...', 'public:thread_v...', Array)
#29 src\XF\Mvc\Dispatcher.php(442): XF\Mvc\Dispatcher->renderView(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#30 src\XF\Mvc\Dispatcher.php(402): XF\Mvc\Dispatcher->renderReply(Object(XF\Mvc\Renderer\Html), Object(XF\Mvc\Reply\View))
#31 src\XF\Mvc\Dispatcher.php(60): XF\Mvc\Dispatcher->render(Object(XF\Mvc\Reply\View), 'html')
#32 src\XF\App.php(2352): XF\Mvc\Dispatcher->run()
#33 src\XF.php(524): XF\App->run()
#34 index.php(20): XF::runApp('XF\\Pub\\App')
#35 {main}

Also, the addons options section headers are not showing (I had to check the page source to see what each lot of options was referring to).

1654010698004.webp
 
Nulumia said:
Very embarrassing but the pricing estimate in the FAQ was incorrect! The correct way is to divide your attachments by 50000 first:
X attachments * 0.8 / 50000 * $9 = monthly billing

The original FAQ would have resulted in a rediculously high estimate 😯
Click to expand...
I don't think this calculate correct, it said 50k request, that's mean a user can request multiple times per images (let's say a user browse an image and re-visit after 1 month, still count 2 requests) and multiple images in multiple threads/topics, that's mean:
X attachments * x users (and/or guests) * times each user browse / 50000 request * 9 = huge amount of bucks
Let's say I have 50k users, these users browse a page has images, that's mean 50k request for all of these users which mean cost already $9, and of course these users don't browse only one page, they browse multiple pages and multiple images, so you can imagine that this would be extremely expensive and lead to not efficiently, I'm not sure but if this is true I would be sad because you took alot of time to build an addon like this, have you tested this addon on large site?
 
Last edited:
ShinLim said:
I don't think this calculate correct, it said 50k request, that's mean a user can request multiple times per images (let's say a user browse an image and re-visit after 1 month, still count 2 requests) and multiple images, that's mean:
X attachments * x users (and/or guests) * times each user browse / 50000 request * 9 = huge amount of bucks
Let's say I have 50k users, these users browse a page has images, that's mean 50k request for all of these users which mean cost already $9, and of course these users don't browse only one page, they browse multiple pages and multiple images, so you can imagine that this would be extremely expensive and lead to not efficiently, I'm not sure but if this is true I would be sad because you took alot of time to build an addon like this, have you tested this addon on large site?
Click to expand...
Means this addon is definitely not worth for a photography forum.
 
Faust said:
Means this addon is definitely not worth for a photography forum.
Click to expand...
It's a rather poor implementation of Cloudflare Image Resizing; an ideal solution would be a Cloudflare Worker overtop of the request URL that cache's the responses in an R2 bucket for re-serving.
 
This resource has been removed and is no longer available. The following reason was provided:
This resource has been deleted by XenForo Ltd. in line with our resource housekeeping criteria.
Click to expand...
 
This resource has been taken over by OzzModz. It will be going through a couple of possible updates.

1) Rebranding of the addon to reflect the new owner.
2) Any bug fixes. Paid addons will take priority.

You’ll have to give me time to move this over to my site and update any bugs. Temporary price increase from $30.00 to $100 is just to prevent any sales till I get it moved.
 
If someone would be so kind to list out all the bugs in detail this addon has I’d appreciate it.
 
You must log in or register to reply here.
Back
Top Bottom