Next-generation image handling in Webiny using the File Manager

[endymion1818]

Introduction

With most CMS you have to manage images as part of a separate service. But Webiny has a built-in alternative to Cloudinary, imgx and other services that you can use to fetch images from a CDN, saving you money, build times and still hitting that important first contentful paint metric.

Goals

• Brief tour of Webiny CMS file manager
• Show how to fetch & render images from the API using the srcset attribute
• Positive comparison to other offerings

Outline

• General introduction
• Introduction to Webiny File Manager & Advantages of Webiny File Manager
• How to upload images to the File Manager
• How to duplicate, rename, delete, files in the File Manager
• Performing image editing in the file manager
• Connecting to and fetching images from the GraphQL API
• Rendering images using HTML srcset
• Rendering images from Webiny without layout shift (also known as CLS or cumulative layout shift) issues
• Positive comparison to other offerings
• Summary

Sample articles

No response

[vdaita]

Hello @endymion1818 I would like to work on this.

[vdaita]

Outline

• Explain how CDN works
• Explain Webiny vs other CDN and cost savings
• Overview of how to use the CMS file manager
• Tutorial in various contexts on how to embed images in webpage

[endymion1818]

Hi @vdaita thanks for your interest in writing with Webiny! Do you have any article content that you've previously written you could show us?

[vdaita]

I have a couple non-technical articles posted on my Medium page: ***@***.***

On Wed, Aug 3, 2022 at 5:53 AM Ben Read ***@***.***> wrote: Hi @vdaita <https://github.com/vdaita> thanks for your interest in writing with Webiny! Do you have any article content that you've previously written you could show us? — Reply to this email directly, view it on GitHub <#25 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPCCUOUEXIANAYLFVOW3MLVXI6Q3ANCNFSM52FB7PXQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *Vijay Daita* daita.com https://www.linkedin.com/in/vijay-daita-38959b198/

[endymion1818]

Hi @vdaita, thanks for that! This is a non-technical article so that's fine. We are looking to cover every feature that the file manager contains. Would you be able to submit a more detailed brief about how you plan to cover them? Thanks!

[ath34-tech]

@endymion1818 I would like to take up this topic if it is free. It will be my first article with webiny but I got experience in writing.
I would appreciate it if you let me know what exactly I have to teach, I can give A to Z tour of webiny along with showing some simple image fetching with reactjs or expressjs
Here my most recent work with other companies:
https://strapi.io/blog/making-a-simple-strapi-plugin
https://www.twilio.com/blog/enable-multiple-otp-methods-django

Here my personal medium:
https://medium.com/@athtripathi

[endymion1818]

Hello @ath34-tech thanks for the offer, let's get you onboarded as a writer. I'd like to chat more to you on this topic about what we intend to cover. See you on the Slack channel 👍