Better Images in Next.js with Cloudinary
Better Images in Next.js with Cloudinary
Cloudinary provides powerful transformation APIs so you don’t have to waste time fiddling with images. Colby Fayock has a new library for Next.js to make it even easier.
’
00:00:00 - Welcome
00:01:11 - Who is Colby Fayock?
00:03:30 - A high-level overview of Cloudinary
00:04:48 - How Cloudinary helps run Learn with Jason?
00:09:50 - The great equalizers and undifferentiated labor
00:13:32 - Let’s learn about Colby’s project
00:16:42 - How automation saves you money and increases the experience for your users
00:28:58 - Super easy image optimization example with the Cloudinary API
00:38:31 - Let’s get started with Cloudinary and Next.js
00:42:15 - Using Colby’s Cloudinary optimization library
00:47:35 - Swapping the image tag for our optimized component
00:56:24 - Removing the background from our image
00:59:36 - Exploring other props in the docs
01:08:54 - Using underlays
01:10:30 - Overlaying text
01:18:12 - Generating a super simple Open Graph image
01:21:56 - Finding Colby Fayock on the internet
Repo: https://github.com/learnwithjason/clo…
Demo: https://cloudinary-nextjs.netlify.app/
Links
https://www.learnwithjason.dev/
https://twitter.com/colbyfayock
https://cloudinary.com/
https://nextjs.org/
https://next-cloudinary.spacejelly.dev/
/ @colbyfayock
https://spacejelly.dev/discord
https://www.learnwithjason.dev/schedule
Watch future episodes live at https://twitch.tv/jlengstorf
This episode was sponsored by:
- Netlify (https://lwj.dev/netlify)
- Nx (https://lwj.dev/nx)
- Backlight (https://lwj.dev/backlight)
Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)
Credits:
Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Source: http://incompetech.com/music/royalty-…
Artist: http://incompetech.com/
Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/…)
Artist: http://audionautix.com/
Additional sound effects obtained from https://www.zapsplat.com
Content
6.107 -> JASON: Hello everyone and welcome to
another episode of Learn With Jason.
14.34 -> It was a race. You see how it showing
the wrong thing. This is not Brian.
21.24 -> This is in fact Colby Fayock.
What's up, Colby? How are you doing?
25.44 -> COLBY: I am good. How about yourself?
27.54 -> JASON: Just slightly panicking.
30.06 -> COLBY: Everything is fine.
33.36 -> JASON: No, I realized like 5 minutes before we
went live I had broken my website which is the
42.54 -> API that powers the overlay so I had to fix the
website so the API work so the overlay show the
49.02 -> right thing. Race to the finish. We got there.
It is so good to have you on the show, Colby.
60.54 -> This is your first time on the show, right? For
folks not familiar, want to give us a background?
79.2 -> COLBY: I am Colby Fayock and I am a
developer experience at Cloudinary.
87.06 -> I do code, content creation, similar stuff to what
you do but for Cloudinary. That's me in a bubble.
97.32 -> JASON: Today we are going to dig into Cloudinary
and it is a big tool in my tool belt. I use it for
114.96 -> everything. The placeholder image that shows up
when the screen starts is automatically generated
124.38 -> by Cloudinary. Those are Cloudinary images. If you
go to any episode of my show on learnwithjason.dev
135.66 -> and add/poster.jpg it will use Cloudinary to
generate an image. All of this is stuff I have to
147.3 -> very carefully automate because there is no way I
have time do this. I always want custom something
163.08 -> and stick someone's face on or show the current
author or something to make this feel personalized
171.78 -> so it isn't me copy and pasting the same default
image every time I share a link. I have just found
182.34 -> Cloudinary helps me solve this huge category
of problems very quickly and I am pretty sure
189.42 -> I am still on the free tier. It is a massively
powerful tool with a really generous free tier.
199.62 -> And yeah. I got paid to say none of that.
201.78 -> COLBY: We will send the swag
to your house. [Laughter]
211.38 -> JASON: Colby, tell me, like, you
know, obviously I am very familiar
215.52 -> with Cloudinary and loving it a lot. But
for folks just learning about it or have
219.84 -> only used it in one or two application,
want to give the high level what it?
228.96 -> COLBY: We are everything from asset management
to delivery. From asset management it can range
238.14 -> from the develop oriented stuff like uploading
pragmatically or work with creator where imagine
244.26 -> you want one source image from the creative
team and from there you can programmatically do
250.98 -> a ton of stuff with that image such as crop it
dynamically or responsive images comes in very
259.08 -> helpful and transformation like background
removal and color replacement. A lot of
264.18 -> interesting things. I think Tech Crunch coined
it as a Photoshop API or something like that
271.8 -> because you are basically able to
programmatically do Photoshop-like
275.7 -> things. Like your cards -- that's something
you can do with the codebased API that might
282.42 -> find someone do in Photoshop or nowadays
might be Figma or something like that.
286.913 -> JASON: That's what I was doing before. This is a
very real use case that illustrates your point. So
295.62 -> the way Learn With Jason worked before is the only
way I can run the show is I have an administrative
302.7 -> assistant and scheduling and putting stuff
on YouTube and learnwithjason.dev and
309.6 -> without that my world would crumble. I used to
have a Figma template and I had setup symbols in
322.2 -> Figma where there was this is the guest image and
this is the text and this is the thing so go in
327.9 -> and put the guest image in this box and type the
title of the episode in this box and date in this
334.86 -> box and I would update a bunch of composed place
holders for the schedule, for the coming soon,
343.74 -> there was like a scheduled image, a starting
soon image, and like a this has already
350.04 -> happened and this is the poster for the reply
image as well as guest thumbnail with a name
356.16 -> below it and a bunch of things I needed to exist.
My system would have to go into Figma and manually
363.18 -> drop these thing ins and also go into sanity for
the CMS I use for Learn With Jason and go in and
369.54 -> upload it there. It was a lot of content entry
and opportunities for things to get wrong because
375.96 -> I would notice this isn't somebody who is in
tech. This is somebody who took an administrative
382.8 -> assistant job so the wrong person's face showed
up in an image and they don't know better because
388.26 -> they never met these folks or they would not know
how to spell a framework that has interesting
397.02 -> spelling so you would see a missed capitalization
of WordPress or something so I would have to go
401.16 -> in and fix it. It was just labor. Then when I
figured out I would solve this with Cloudinary,
411.48 -> I took my template out of Figma and put it in
Cloudinary as a blank template and uploaded
417.12 -> custom fonts and hooked it up to the sanity API
is so now y I have a serverless function calling
424.74 -> the API with the episode title and guest head
shot and shows the right date and puts the guest
435.18 -> name on and uses the URL of their thumbnail
to put a layer in underneath the template.
444.78 -> It was all like a lot of layers so it took me a
while to get it setup but once I got it setup I
450.8 -> have never had to touch it since. As it probably
cut 30 minutes a day out of my EA's workflow.
459.18 -> COLBY: And I would imagine that
includes different sizes and stuff, too.
464.58 -> Not just of the same image. But you probably
have different formats depending on where that
468.24 -> image is being used. Being able to have that.
Imagine cloning all those different ones and
474.54 -> now you can do that all
programmatically from the data source.
478.26 -> JASON: It is such a game changer to figure
out. Especially as I like to do design
490.2 -> and they don't have the time to dive in and really
get after this. Being able to get a design that I
497.88 -> like once and then I am not in Figma where I have
temptation to tweak it and I have wasted two hours
507.24 -> staying up late finishing the work I am supposed
to do. I feel like that automation when you have
515.28 -> these tasks that are simple and don't take that
much time but they have a lot of temptation or
522 -> just have a lot of wiggle room for human error.
That stuff is so important to automate out of the
527.94 -> way because the way I do my thumbnails changes
once a year. I don't re-brand Learn With Jason
535.14 -> that often so the thumbnails I am using now are
two years old and I am starting to entertain the
540.36 -> idea of doing another one. When I make the change,
I am going to automatically re-brand every other
550.92 -> episode I recorded because it is just from the
Figma template. So I will update and all the
557.82 -> images update with the right information because
it is programmatically generated. That's huge.
571.8 -> COLBY: That's a lot of time. That's fantastic.
It is amazing how this is a one single use case
580.68 -> that's already saved you so much time compared to
all of the other things you are doing on the web.
585.78 -> JASON: Exactly. It really is just kind of a --
I feel like Cloudinary is one of those services,
593.7 -> there is a category of services that I have
started to think of as like the great equalizers
600.06 -> where it allows somebody who is a team of one to
do things that are competitive with massive teams.
610.26 -> And so you know Cloudinary is one of them
because all I just described. I think of
615.66 -> serverless functions like Netlify as another one
because I don't have to stand up a server and I
621.24 -> don't have to figure out how to write express
boilerplate. I write business logic and I am
626.22 -> off to the race get push to deploy. There
is a suite of services I heavily rely on and
634.98 -> they have helped me automate so many things I
have started thinking of and I have been saying
642.9 -> this and wondering if it is too dismissive
but what I call undifferentiateated labor.
650.82 -> What I mean by that is when I do the work to
copy/paste the title and guest image into the a
657.54 -> thumbnail that is not -- I am not generating
value. I am following a process. I generated the
666.54 -> value when I decided thumbnails would look like
this and communicate this information. Doing it
673.38 -> manually over time is wrote process -- copy/paste,
copy/paste, save. That is undifferentiated. It is
681.6 -> not adding value or making anything better. It
is just time. The same with like if I have to go
688.62 -> copy/paste the broiler plate for an express server
every time I want to do logic that is just time.
695.58 -> Your express server doesn't get better or worse
because it is written by hand. It just a router. I
702.54 -> need a request to go in and a serverless function
let's me do that with no DevOps or broiler plate
712.56 -> and that undifferentiated part. The thing
that is the same for every project disappears.
718.2 -> COLBY: I felt the same exact way with Netlify.
Not to just throwback the love. We had Jenkins for
729.18 -> everything with all the AWS cloud formation and
the first time I deployed a site on Netlify I was
734.34 -> like I can do all this stuff that is not unique to
me super eel easily and get my stuff on the web.
741.78 -> It is removing the stuff that is
not unique so we can be more unique.
749.52 -> JASON: The goal of this is we have a business
because we think we can make something valuable
753.48 -> and the time should be spent on building the
value and not on the scaffolding that allows that.
762.24 -> Whenever I find a tool that removes broiler
plate, I spend on a given day when I get to
773.88 -> do engineering work which isn't many
days, but when I do engineering work,
778.68 -> the vast majority of tie my time is spent
on building the value of the idea now.
785.52 -> You can get the concept out of my head
like my broilerplate, I deployed hello,
791.7 -> world in about three minutes. You create a
folder, hook it up to GIT and you are deployed.
796.74 -> COLBY: It is an exciting time to be a developer
in this space because of all these tools we have.
808.2 -> JASON: Absolutely. Speaking of tools and how nice
it is to be live, you have built something. As a
816.6 -> little bit of context setting here. Cloudinary
has an URL based API that I love and also has a
825.78 -> node SDK which is a JavaScript based object config
driven API. A lot of people are using Cloudinary
834.54 -> to power a lot of different sites. We are seeing
Next.js emerge as one of the leading frameworks
841.86 -> if you are building complex dashboard style or
app style apps. You have built something if I
851.4 -> understand correctly it is a Next.js library
for using the Cloudinary SDK? Is that right?
857.34 -> COLBY: Yeah, so what I was attempting to do
is I didn't want to reinvent the wheel that
864.12 -> was aural already existing because Next.js did a
fantastic job with the image component. Thinking
872.28 -> before Next.js 13 we had a Cloudinary loader.
It was basic and it had a few things but didn't
881.46 -> do a ton of things that Cloudinary can do like
over lays. After Next.js 13 they don't have that
889.56 -> cloud loader built in. You have to attach them to
every single instance of the image tag so there
898.6 -> is a lot of complicated pieces there. I didn't
know that specific change was coming so it set
907.08 -> myself up well for this. What I am doing is taking
that core image component that works really well,
913.2 -> I am wrapping it with a custom loader that also
extends it with more Cloudinary features. One
920.04 -> example of that is you can use the sizes prop
the same as you would with the image tag but
927.42 -> it uses Cloudinary URLs but extending that now
you can add a remove background prop and that
933.82 -> will remove the background from the image using on
the fly processing. It is able to have that core
940.26 -> amazingness but just take it way beyond with all
of the Cloudinary features that we know and love.
944.7 -> JASON: That's great. That's really great.
949.5 -> I think what we probably want to do here is
is there any sort of abstract or sort of like
958.92 -> philosophical underpinning of this that we haven't
talked about before we jump right into the code?
966.12 -> COLBY: I guess really the only thing I was
trying to do was make the props API a little
971.94 -> bit more intuitive. The Cloudinary SDK is and
APIs can do a lot of awesome things but they are
979.86 -> very specific. I can very finally tune all the
different attributes of an image but I want to
986.76 -> make it a little more intuitive so you basically
express what you want and then have that ability.
993.12 -> I think that's really the only thing.
I would like to also abstract this and
996.42 -> put it in other frameworks but
my first release it was Next.js.
999.6 -> JASON: Gotcha. I think I have found I
always want to bring Cloudinary in for my
1012.74 -> sites because there are a few things I have
to do every single time that I hate doing.
1018.08 -> When I write a blog post I know I am going to
put a screenshot in there and that's probably
1024.62 -> going to be a PNG because that's what Mac does by
default and I know it won't be optimized because
1031.16 -> if I don't take it to something like tiny
png I am getting whatever the Mac gives me.
1037.82 -> COLBY: More manual labor.
1040.16 -> JASON:. These little things you have to do every
time. I am using Edge and a lot are using Chrome
1047.36 -> and can handle modern formats way smaller than a
PNG. I know if I am doing my job right I added a
1059.18 -> source set so on my iPhone I am getting an
image of the appropriate resolution for the
1064.34 -> iPhone and on my desktop I am getting the full
resolution screenshot with all of the details
1070.16 -> so I am not wasting bandwidth and I don't want
the bandwidth charges. If you have an animated
1082.28 -> GIF that is 8 megabytes it staggering
how quickly you burn you bandwidth.
1093.777 -> COLBY: You are saving yourself
money by optimizing into that.
1096.14 -> JASON: You want to keep stuff on the free tier
find ways to shave off bytes and bandwidth.
1102.92 -> Companies charge for usage usually so use less.
Whatever it is I am building I am going to try to
1113.54 -> find a way to get Cloudinary to automatically
send the right format of image and send the
1120.08 -> source set of the 5 sizes I want to send
for different resolutions because I don't
1126.08 -> ever want to manually create a source set or and
honestly, I understand in the abstract how content
1135.8 -> type negotiation works. I don't think I could
build it. I have no idea exactly what I would
1142.4 -> do to get a request for a PNG but send back a web
P if the browser supported it. I know the browsers
1151.28 -> let the request know I accept these and we can
do middleware and that's what Cloudinary magic
1158 -> is doing but I don't want to build that. That
sounds terrible. Given the option of like if
1164.3 -> I can't use Cloudinary, I just don't do that
thing which means I am using more bandwidth,
1170.96 -> I am wasting my user's bandwidth when they load
it on the phone and get the full size PNG instead
1176.66 -> of the optimized version. It is just bad for
everybody. There are a lot of things I really
1183.26 -> like about Next.js. One of them that I actually
kind of struggle with is the image component
1187.94 -> because I've found it to be prescriptive
to the point of being kind of hard to use.
1195.56 -> COLBY: OK.
1196.28 -> JASON: When I want to plug it into Cloudinary
because I don't want every image call to be
1202.94 -> running through like that's bandwidth and a
lot of processing and bandwidth we are using
1207.2 -> to like process these images on the fly. I want
it to be done through Cloudinary because I know
1212.54 -> when Cloudinary does it, I have the proof, it
is optimized once and served from the cache and
1218.3 -> that means by bandwidth use is way lower and I
know Cloudinary is optimized for asset serving
1223.76 -> so the free tier is designed to handle that
bandwidth. The idea of having something that
1231.44 -> automates this. I haven't tried it on next 13.
I didn't realize they removed the Cloudinary
1238.82 -> plugin. What a bummer. That tripped me up too.
You would start using image and you would do the
1245.78 -> Cloudinary thing and it would break and you are in
the config trying to remember how to turn that on.
1249.98 -> COLBY: It was always a little confusing
to use it as well especially having the
1256.64 -> different options. Now you can technically
white list or add to the list the URL. You
1264.608 -> are not really gaining those benefits ultimately.
It is still going through the Next.js pipeline.
1268.82 -> JASON: Exactly that. I felt like I was giving up
one of the strongest tools in my belt and getting
1278.18 -> locked into this thing that at the end of the
day it does feel like a lot of Next features are
1284.84 -> being designed to drive you to a single platform
that they want you to pay them. And cool. That's
1290.36 -> fine. Business models are business models but I
don't want to do that. I have my tools. I want to
1296.6 -> use the tools that I like. So I am very excited
to see quat -- what you are building and that
1303.62 -> might be a good excuse to flip over and look at
some code. Let me close a couple things because
1310.58 -> I was doing the panic of fixing my website. We
will switch over into pair programming view.
1320.24 -> Here we are. I need to reload this one as
well because it has the old scene in it.
1328.52 -> There it is. That's the right thing. And I
am going to start us off by doing a quick
1333.8 -> shout-out to our captioning. We have Maggie
with us today doing the live captioning. That
1341 -> is on learnwithjason.dev and you can find those
captions there on this episode and every episode.
1349.4 -> I actually got a hint that I might be
able to embed these directly into Twitch
1353.72 -> so that the closed caption button works and
I haven't had time to explore it yet. Twe,
1359.12 -> thank you for helping me dig into that and how it
works. Maggie is here with White Coat Captioning.
1366.74 -> If you are doing an event, you can always
get White Coat Captioning. They are the best.
1371.72 -> That's made possible through the support of our
sponsors, Netlify, New Relic, NX all kicking in
1376.88 -> to make this show more accessible to more people
which I appreciate so much. We are talking
1381.5 -> today to Colby Fayock and you can find Colby on
Twitter possibly for a limited time. [Laughter]
1393.68 -> COLBY: I think I followed you and Sarah on there
1397.22 -> and I literally that was my first real --
on Masadon. We will see where that goes.
1405.14 -> JASON: I am trying with Mastadon. I do like
it. I am trying to use it. We will see how
1413.3 -> that all shakes out. We are talking about
Cloudinary today. This is the Cloudinary
1420.26 -> site. Dropped in the chat. You can check it
out. We are going to skip over a lot of the
1425.72 -> onboarding here but there are good docs and good
examples but today Colby is our docs and examples.
1432.86 -> We are also talking about Next.js so we will
plug that in and see how that goes. Colby,
1442.76 -> what should I do first if I
want to start setting this up?
1447.44 -> COLBY: Do we want to go through the
account first or dive into the code?
1453.68 -> The assumption is you have a Cloudinary account.
1454.213 -> JASON: Let's go to the account. I have got
my account here and let me pull it off screen
1461.48 -> because I don't know what is going to pop up when
I click open. I am going to sign in with this one.
1469.7 -> I have my Cloudinary account here and I am
going to login and thank you, one password.
1479.66 -> This is my -- yeah, OK. That's the public one. I
1483.5 -> was like no!
[Laughter]
1488.3 -> COLBY: Whew.
1489.8 -> JASON: This is my Cloudinary account. I have a
whole bunch of stuff going on here. You can see
1497.6 -> I use this for a whole bunch of stuff. I have tons
of things in here. This is my media library that's
1507.38 -> full of things. I have tons and tons of stuff in
here including all of my Learn With Jason stuff.
1514.52 -> You can see my templates here and a bunch of
miscellaneous assets and once upon a time we
1521.84 -> had Ben host the show so I had an alternative
thumbnail there. These are all of the things
1529.52 -> from my blog. I use it for everything. Like
it is in heavy rotation in my universe here.
1538.1 -> COLBY: I would imagine most of this stuff
is being programmatically uploaded, right?
1541.04 -> JASON: Almost all of it.
1542.36 -> COLBY: A lot never see the media library.
The media library is great. It is where
1555.14 -> you can visit photos and videos or whatever
but this plays more interesting into like
1561.2 -> creatives where they are just uploading these
things. You almost have that automated as we.
1567.44 -> A lot of cool things you
can do inside here as well.
1569.18 -> JASON: Absolutely. Is there anything you
want to dig into specifically in here?
1576.62 -> COLBY: We have kind of two options for how
we can use the components. By default it
1585.17 -> will expect a public ID. If you look at the
asset, it will be the ID at the top including
1594.92 -> the directory structure. If you are looking
at the first or second one Learn With Jason
1600.44 -> OG 2002 is the public ID. It will take
that as the source by default. -- 2022.
1615.44 -> JASON: Yes, if we look at
this, this is my cloud name.
1621.44 -> COLBY: Yup. You got the cloud name, then you
have asset type, then you have the delivery
1627.8 -> type which you uploaded that as opposed to our
fetch API which is the other way where we can
1635.72 -> set delivery type to fetch and if you pass in an
URL as the public ID, Cloudinary will fetch that
1642.08 -> from the remote URL and cache it and do everything
else. It just makes it easier if you still want to
1650.42 -> control source assets. You just have a little bit
more flexibility from that though you don't get
1657.08 -> some of the features like background removal.
You can't use on the fly background removal.
1663.32 -> Ever so slightly. It works the same for most
use-cases and it is a nice way to go about it.
1672.68 -> JASON: Then we have this version which is
optional. You can leave that out. And the
1681.08 -> folder I put it and the name of
the thing and the content type.
1683.893 -> COLBY: The content type is
actually optional as well.
1688.82 -> JASON: No, it is?
1690.92 -> COLBY: That gets stripped
along with the public ID.
1694.1 -> JASON: Cool. OK. All right.
1697.7 -> COLBY: I guess we can dissect the image
format. What you are looking at in the
1703.58 -> URL is the API. The URL is the API. What the
SDKs are doing is the same thing where we are
1711.32 -> constructing that URL and adding parameters
for transformations or optimizations we want
1717.2 -> to do. You can literally build your own
API with just an URL FOAF -- if you want.
1724.82 -> We recommend the SDKs but if you wanted to
shop chop up an URL and serve it you could.
1730.7 -> JASON: I do a lot of transformations and do them
over and over. I will show you the one I do all of
1741.26 -> the time. People ask me for a head shot because I
am going to speak at something. So I come here and
1747.74 -> I have this image that I -- this is full sized but
this image is huge because I don't know if people
1754.82 -> are going to do a brochure so I want them to have
access to a bigger version but this is absurd to
1761.9 -> send to somebody but they want a head shot. They
want this section not the full image and I don't
1768.08 -> want them to have to do that on their own so I do
a couple things. I start out doing Q auto and that
1779.3 -> automatically sets the quality. We should look
at this in the network because I feel like this
1783.92 -> makes such a big network. If we do this, this is
a 5 megabyte image we are delivering right now.
1791.78 -> It is a JPEG. Then the first thing that I do
where've I have an image is add Q and F underscore
1803.36 -> auto. Q is quality and F is format. A couple
good things happen when you hit that button.
1816.92 -> COLBY: So the first time -- it as a pretty big
image so the first time it might take an extra
1821.24 -> second to process it on the fly but it is cacheed
and then if you refresh it will happen fast.
1829.34 -> JASON: This is now 2.3 megabytes so less
than half the original size but still that
1836 -> big image. That part is amazing. If we look
under the hood now it is a WebP. I didn't
1844.64 -> have to do anything. I was like Cloudinary
make it better and it just made it better.
1848.66 -> COLBY: What browser are you in?
1849.56 -> JASON: This is Edge. I don't
think I have the flag turned on.
1857.3 -> COLBY: Another interesting caveat to that. So
1863.48 -> it usually will serve ava5th but it also tries
to determine the most efficient so some use-cases
1873.26 -> WebP beats out in the efficiency factor. If
that's the case, it will still serve the webP.
1882.44 -> JASON: Next I want this to be way smaller. Like
500 pixel square. W underscore for width and
1897.92 -> height underscore and it will do the processing
and crap it squished my head but because
1907.94 -> Cloudinary is smart I can do a crop of thumb
and now it does the magic again and because I
1919.58 -> said thumbnail it is cropping the image now but I
want it to be my face so I can do gravity of faces
1929.18 -> and that will then say Cloudinary find my
face. That's a little too close. I don't
1936.38 -> want it to be that close. I am going
to adjust the zoom. I can do Z_0.75.
1943.66 -> COLBY: I didn't know you could do that.
1946.04 -> JASON: I have built out, without changing the
source image, I have been able to change from
1954.26 -> a 5 megabyte image would have need today
pull into Photoshop and edit down and
1959 -> turn into whatever format they need and crop
appropriately. I have now delivered a 500 by
1965.66 -> 500 image with the right aspect ratio and the
right crop for them to use and it is also now
1973.16 -> 25.7 kilobytes and again served as a webP.
This is why I feel like this tool is such
1982.16 -> a game changer. If I want any image of mine to
do this, I can like just copy this section out,
1991.88 -> right? Let me just copy this and let's
go back here and find another image
1998.18 -> and now I have got the same image.
This is another giant image.
2002.74 -> This one is 5.2 megabytes. Now I am going to go
in right here and just paste in the same thing.
2011.8 -> What did I do? Oh, I put it
in the wrong spot that's why.
2028.18 -> I am now only able to do the exact same thing
and I don't have to go and manually do these
2035.02 -> crops. This is why this so freaking cool sky I
lean on it so heavily. Once I solve the problem,
2043.72 -> it is solved forever. I noticed when I uploaded
mine, if I go -- where do you keep these? These
2057.46 -> are in my head shots. If I go under press,
and I find one of these photos, I have
2072.04 -> all my old photos here, I find one of these, and
I am like this is great. This is what I want. But
2078.7 -> it is not finding my face then you can go
in under here where you choose the faces.
2083.98 -> COLBY: I didn't know you could do
this. You are teaching me stuff.
2087.46 -> JASON: There is a bunch of stuff I do on these
2092.08 -> that is really, really useful. I want to
edit contextual metadata. No, that's not it.
2098.56 -> Did it move? Dang. Move to folder, add to
collection. It is in here somewhere. I want to
2107.98 -> analysis. If I want to like add an area
of interest, you can add one of those.
2121 -> I think it has this already. It is
area of interest. I want it to show.
2133.12 -> It has the face and let's me put that in
there. If it didn't find my face I could
2142.66 -> go in and draw a square and mark it as an
area of interest and it will then find that
2148.12 -> face. Just little stuff like this that is so
convenient and all buried in context menus and
2154.3 -> stuff because powerful tools end up being
that way. What a game changer that I don't
2162.1 -> have to open up Photoshop to fix a photo.
I can upload here at photo res because if
2170.02 -> somebody says we should write an article
about you in a magazine I have magazine
2177.04 -> resolution. Seeing that hasn't happened I
crop it down for everybody else. [Laughter]
2188.02 -> COLBY: Ecommerce is my favorite context. It is
the biggest use-cases and one of my favorite.
2198.76 -> Imaging in an online store with the photographer
uploading the images and products but you have
2205 -> no idea what the size is and it can change all of
the time. You don't want to constantly have people
2213.16 -> cut up different sizes so being able to have this
ability to do it programmatically and going to the
2220.54 -> subject. You can do G auto and it will detect the
subject automatically. There is different options
2230.2 -> you can pass in for the gravity value which
is the anchor point to do that automatically.
2236.44 -> JASON: I don't remember how I did it exactly but
this is a cropped and resized version of the full
2242.89 -> size photo and this is also with a different I
think thumbnail gravity here and this one is a
2253 -> regular square crop. That way these photos when
you are looking at them small, like this would
2260.98 -> be kind of hard to tell what's going on if you saw
this at this size. By being able to do the crop,
2267.52 -> I can show the area of interest in the photo
and then there is more to it when you actually
2272.08 -> click through. I feel like that just little stuff
like that that I can do programmatically instead
2278.02 -> of having to manage different size thumbnail
assets has made a difference in the ability
2283.36 -> to make the interfaces of things I am building
feel good. That's kind of the -- that's why I
2294.58 -> reach for Cloudinary when I need to put assets
on to a website is because of what it allows
2299.08 -> me to do here. Then like we talked about, it has
historically been more difficult to do that with
2305.44 -> Next.js because they are trying to push you toward
their image processing service and component.
2312.1 -> So if I want to set one of these up,
should I start a new Next project?
2317.32 -> COLBY: Sure. You have a ton of Cloudinary
assets so let's do a create Next app. We will
2335.68 -> go Cloudinary/Next.js.
2348.22 -> COLBY: I don't know if you know you can
do named transformations. If you find
2352.84 -> yourself doing the same transformations
all of the time you can predefine those.
2359.68 -> JASON: That would save me a ton of time. We have
our node module and pages public. It will open up
2390.7 -> so we have ourselves a site. I am going to hop
in here and probably just delete everything.
2402.94 -> We don't really need any of that stuff.
2432.94 -> We now have our very basic site. If I were
to -- I am going to do this the way that I
2440.68 -> would kind of start by doing this. Let's say I am
going to make a website for myself. I am going to
2446.32 -> start with this image. My first instinct
would be go with an image. Then add alt
2457.84 -> and I am done. That does work. We have the
image-only on the page but Next is pissed at me.
2471.4 -> It will let me build this but
if I try to deploy it it will
2474.04 -> fail the deploy which is the most
irritating thing about Next.js.
2477.04 -> COLBY: So irritating.
I don't know why they
2481.96 -> don't automate it in the build. I
am sure there is a technical reason.
2485.2 -> JASON: Print warnings and don't fail
the build. What an odd hill to die on.
2492.16 -> COLBY: I remember like Gatsby and this gets in
the difference of frameworks but I remember Gatsby
2500.32 -> in dev mode gave you the lint warnings. I never
understood why Next.js didn't do that same thing.
2505.6 -> JASON: They are linting but this is
a warning but then instead of marking
2511.72 -> it as an error that will fail your
build it is a warning. ESLint is a
2517.96 -> rabbit hole that is deep and probably
not what we want to talk about today.
2525.4 -> According to ESLint I need to go use next image
but if I try to use next image it will fight me
2532.42 -> on using my Cloudinary stuff. I instead want to
use your library which I would get from where?
2540.1 -> COLBY: So the library is
next-Cloudinary. We can pull it
2544.54 -> up. Next-Cloudinary.spacejelly.dev.
This is the doc site. Here is
2559.66 -> the doc site.
2562.3 -> COLBY: This is an example of shows the flexibility
of it. Just a couple different interesting things
2570.28 -> going on in this image. We are doing that cropping
like you were talking about where we automatically
2575.32 -> crop to the person in there. We are doing
background removal and then we are putting
2581.38 -> an image underneath and mostly changing the color
to make it look more part of the background and
2587.8 -> adding text on top. There is a ton of things we
are doing with within the scope of that component.
2596.62 -> JASON: This is, again, this is one of the things
that I love. This was all done with code. You
2603.46 -> just kind of tell Cloudinary to do the thing.
This would have taken me forever in Photoshop.
2612.4 -> I want to use this so I will pop
over here. This is what I want.
2628.78 -> I am going to NPM install Cloudinary Next.js.
2638.56 -> COLBY: Before you do that you want
to add an environment variable.
2645.52 -> We need to know where to access your
cloud name. So the only thing you need
2649.54 -> to do is add a next public Cloudinary
cloud name environment variable.
2655.96 -> JASON: I just want to be able to
deploy this without having to setup
2660.82 -> the environment variables so I am going to
deploy first and then we will keep it going.
2665.02 -> I am going to get commit. We are going to
say work in progress. Then I need to GitHub
2678.64 -> and create. If you add the org name it will create
it in your org. You can cut and paste this. I want
2693.4 -> remote and push everything here up to that remote.
Because I am in terminal, iterm, I can click this
2702.34 -> and it will take me to this old buddy. Don't need
Netlify because it is on the Learn With Jason.
2721.42 -> COLBY: I saw the organization GIF. Didn't
know you could set GIFs. That was amazing.
2730.78 -> JASON: Go to next. There it is. I don't need to
configure anything so I will deploy the site.
2741.46 -> I am going to go into site settings and there
2743.75 -> is this ID here. I am going to copy
that and I am going to Netlify link
2753.7 -> and enter the site ID because that's
nice and fast and now my site is linked.
2762.64 -> COLBY: I don't know who added
that but that's a game changer.
2771.4 -> JASON: Now I can set environment variables using
2775.84 -> Netlify and set and what is
the variable that we need?
2781.36 -> COLBY: Next_public_Cloudinary or you can
copy and paste it from the documentation.
2789.985 -> JASON: Do this and my cloud link name is
here. I am set that. When I run Netlify dev
2801.82 -> it will grab this environment variable but
importantly this is now available to deploys.
2812.14 -> So that is a big deal. The way this works if
you are in the new specious is it chose what we
2821.2 -> created. -- experiences. If I needed to and since
this is the cloud name I will show it. You can see
2826.96 -> the values here. If I want to to work differently
on local dev and have a production cloud I would
2833.2 -> also edit these values so you can keep them
like separate for local staging production Etc.
2840.4 -> COLBY: That's super handy.
2842.2 -> JASON: There is a lot there. It is worth checking
out. It is very cool. It is new. We haven't talked
2849.76 -> about it a bunch but I am really excited about
it. It has solved some big problems for me.
2853.9 -> COLBY: That's awesome.
2855.94 -> JASON: Environment variable set. We are
back up and running. I have it installed.
2860.68 -> COLBY: Let's import and destructure ClID image.
2875.62 -> At this point you should be able to just swap the
image tag. The only thing I think you will require
2880.12 -> a width and a height. I think those are the only
two other attributes that are required. I think
2890.08 -> technically it will take in the Cloudinary URL.
It tries to parse it. It is not always able to.
2898.18 -> We can see if it works first.
What we will want to do is just
2905.38 -> take the URL and just only apply the public ID.
2914.56 -> Cut off everything until the upload parameter.
I had to get rid of the first slash as well.
2930.46 -> JASON: We eliminated all my
optimization so these are big images.
2942.82 -> COLBY: You set it as a square but the image
isn't a square, right? That's why we are
2947.2 -> seeing a little warped. We can fix that super
easily. Since we have the props based API,
2956.86 -> we can add a prop of crop and we can
set that to fill or thumb if you prefer.
2967.3 -> And that should be able to reload. If you wait a
second, I think it will reload in the background
2972.7 -> after the image is actually downloaded but it
won't do it until then. It was already updated.
2980.74 -> It uses G auto or a gravity of auto so it
will automatically set that crop to the
2988.54 -> subject. You don't use usually need to
do all those things but you could set a
2992.92 -> space and might get a different result since
you want it to specifically look for a face.
2998.08 -> JASON: Got it. Nice. Why is this yelling
at me? Couldn't find a declaration file.
3005.94 -> COLBY: I haven't gone into TypeScript yet. I
know I need to do. I haven't learned it yet.
3016.86 -> JASON: Do I have a zoom probability -- property
or a way to add arbitrary transformations?
3027.9 -> COLBY: I set it back to fall transformations. I
have been adding the qualifiers because I didn't
3035.46 -> want to plaster every single one of them in there.
It will be an array. An array of strings that
3048.72 -> should work like that. The only thing with the
Zoom is I think it might have to be coupled to the
3063.66 -> primary transformation. When you are doing
the different transformations, you have the
3067.98 -> different blocks. I guess my hands should be
angled the other way. You have the different
3073.2 -> blocks of the transformations ask when you have
the chain the way you have it in the original
3077.16 -> URL the zoom was applying to the transformation.
That zoom is happening after the transformation.
3089.58 -> I need add the zoom prop so it will
attribute it to the actual thing.
3094.86 -> JASON: In the meantime I
would need to do one of these?
3099.24 -> COLBY: It should be one full string but yeah.
3103.86 -> JASON: I got it.
3105.36 -> COLBY: Making a node I need to add that.
3113.52 -> COLBY: Let's look at the source URL.
3148.08 -> What you need to do is add the width and
height to the raw transformation string.
3156.18 -> This is why I was excited to come on because
you will help me find the holes in this.
3162.72 -> JASON: Here we go. This is getting us where
we want to go. Yeah, we are getting all these
3170.76 -> details. It is pulling everything together for us.
I can kind of start to figure out where we want
3177.54 -> this to go. It actually looks like because we have
added other things we might not need this piece.
3184.8 -> COLBY: You updated to faces, right?
3186.48 -> JASON: I did update to faces.
3191.4 -> That's going to be fine for now. This is kind
of doing the thing. This is great. Let's do it
3202.26 -> with one where we can like drop the background
out and do some different stuff. Let's go grab,
3210 -> where is one that is easy to crop? Here
is this one. It looks like it should be.
3214.5 -> COLBY: That should be good. You can
probably just copy the ID at the top.
3221.88 -> JASON: Let's go in here. I am going to drop
this piece in and what's the 6400 by 4267?
3235.92 -> COLBY: One interesting thing. If you are
not doing the -- what I usually setup
3242.64 -> the images I add the responsive sizing
and when you use that you don't need to
3247.56 -> worry about the sizing and making sure it
has the right ratio because at that point
3252.06 -> the responsive sizing controls what
the width and hide are going to be.
3256.38 -> JASON: How does one turn on the responsive sizing?
3258.6 -> COLBY: You can use the sizing attribute and you
can set it lazily to 100 view port width right
3264.36 -> now. I think you need your width and height in
there also. You don't need to have the specific
3275.4 -> width and height of the image. It can be something
that's going to express the ratio of that image.
3283.68 -> JASON: Oh, I gotcha. We can set the --
what is it? 6200 by -- 6400 by 4267.
3302.4 -> Back to here. Now if we inspect the image,
the image is blowing up out of the container.
3313.32 -> If we look at that, we see the
responsive sizes now and those
3316.44 -> are all being added by Cloudinary. The
Next.js is doing that logic to generate
3321.9 -> all those sizes but then plugs it into
the Cloudinary URL. It works really well.
3328.92 -> JASON: I would need to add styling.
3333.54 -> COLBY: If you go to the global file, I add
a max of 100% and set the height auto. That
3348.24 -> usually serves me pretty well. Yeah. I usually do
max width 100% so it is not the container. Yeah.
3360.54 -> JASON: We have overridden the thing
3365.22 -> and it is now showing us a max width of
a 100% so it is the container and not
3369.66 -> the view port width and the height auto over
rides so the aspect ratio is defaulted. Cool.
3376.5 -> COLBY: Did you want to crop that or
remove the background right away?
3380.82 -> JASON: You tell me.
3385.68 -> COLBY: Let's add prop is
remove background camel case.
3393.72 -> You don't need to add a value. You
can add true but just the prop itself.
3398.64 -> What is going to happen in the background is if
you go back to your console if you have that open,
3404.28 -> you can probably refresh and see this as
well but we see we are getting -- why a 420?
3413.52 -> Can you open that up and we can see? Here is a
trick if you haven't heard of it before. If you
3417.72 -> look in your request headers, or response headers
rather, CLD returns a header that gives you the
3425.76 -> error. You don't have an active subscription. It
requires the Cloudinary AI background removal.
3434.7 -> Let's add the add-on. The add-ons are that puzzle
piece up there. Then it is going to be that
3445.68 -> top-left one. There is a nice free tier for
us to play around with. You can click that.
3451.08 -> JASON: I have successfully subscribed.
3458.16 -> COLBY: We can probably add a version to avoid
that cache or switch to a different image.
3466.32 -> I haven't tried adding the version
that way. Let's see if that works.
3469.08 -> JASON: I think you have to do it with these. You
have to use an actual version or it gets grumpy.
3480.12 -> COLBY: It usually does a pretty good job with
the background removal. I built a photo booth
3491.46 -> app I have been taking to events and it
does a good job removing the background.
3503.4 -> What's happening now is the processing for the
background removal is asynchronous. It can take
3509.16 -> a really long time or a really short time but it
doesn't know that right away so rather than just
3514.02 -> having that image hang and hang in the background
it is going to return that 423 meaning it is
3519.84 -> processing. After it processes, it is going to
cache that and serve it as-is from there on out.
3526.62 -> It won't happen every time but you have to get the
first load to happen first before it can remove
3532.32 -> the background. I think it was a decentally
big image so it might take a few seconds.
3540.233 -> JASON: Is it going auto reload once it is done?
3543.12 -> COLBY: Somebody is working on a pull
request for that or I will have to
3547.62 -> do myself because now there is an on error
attribute in Next.js so I want to pull for
3555.06 -> the asset after that error message occurs
and once it is loaded just swap that in.
3560.6 -> JASON: Nice-nice.
3564.84 -> COLBY: In the meantime we can
remove that. Since we know it
3567.504 -> is getting removed in the background we
can do something else or we can -- yeah.
3572.88 -> JASON: Let's leave it off
for now. We will add it back.
3576.3 -> COLBY: Let's go to the documentation and we can
3579.6 -> look at the different examples of
the props we can work with. Here.
3587.58 -> JASON: If we go under the
left sidebar under examples,
3594.78 -> there is a lot of different things we can do.
The zoom and pan one is fun. You know the Ken
3598.8 -> Burns effect where it takes a still image and
it can kind of move around. This is that. So
3606.24 -> by default it is just going to use gravity
Avado again and zoom into the subject. But
3613.5 -> you can set all your coordinates
and whether you want to zoom to
3616.68 -> or from and a lot of different things.
I think you probably want loop, yeah.
3628.56 -> This will take a second to
load the first time as well
3630.42 -> since it is processing that in the background.
3634.98 -> JASON: We have the zoom pan. Pixelate?
That's fun. Let's go get a smaller image.
3650.4 -> This is going to kill us. I have some
stuff that is not so absurdly large.
3656.94 -> Let's go with this. This is a small image.
60 kilobytes. That should be fine. Now
3689.82 -> COLBY: If you reload the page it will be
cached and reload right away. For F auto
3701.04 -> you can have it do F auto for everything but
I think it is call and animate and you can set
3708.9 -> it so it will automatically determine the best
animated format to serve which is interesting.
3713.58 -> JASON: Oh, that's nice. Gray scale. You can
do tints. Cropping. It has the auto gravity.
3728.52 -> COLBY: I need to figure out how to better show the
place limits. Those are the blurred placeholders
3736.98 -> like the tiny ones.
3739.38 -> JASON: These are cool, though.
Placeholder blur and then I am
3744 -> going to switch this out. Let's save it.
3757.2 -> Let's maybe turn on the throttling. We go go with
the slow here and make this taller so we can see
3766.56 -> what is going on. This is 3G performance.
We have to download the markup and the JSON
3780.54 -> and Bootstrap that JavaScript and rehydrate
the page and get stuff. Why is this so big?
3796.08 -> What on earth is causing
this? Maybe we try this again.
3812.76 -> Whoa. That is a decent amount.
Next maybe you need fast 3G.
3821.42 -> COLBY:
3822.42 -> Do you have to refresh? Or will it automatically
update? That's cool. I didn't know that.
3828.96 -> JASON: Geez. That is brutal.
Let's try that one more time.
3847.2 -> Is is still too fast.
3850.98 -> COLBY: Back to the big image. No.
3855.3 -> JASON: This is great. I wonder if that preloaded
in the background because the next step was taking
3861.66 -> so long. Anyways, placeholders are cool. You can
see the flicker of it. It is just -- by default,
3875.58 -> Next.js has its own by default. What I wanted
to do was try to provide some kind of variation
3880.26 -> on top of it. I don't know. There is only so
much you are able to do because it actually,
3886.08 -> Next.js, is blurring it in the dom, or they were
in next 12. I want to create the SVG placeholders.
3897.48 -> I wanted to provide that option and couldn't do
that because of the blurring that was happening.
3902.3 -> JASON: Got it. Still very cool. Lots you can
get away with here. Let's do this. I want to
3914.1 -> kind of -- you did this cool thing where
we replaced the background on this. Let's
3918.48 -> remove the background here. Remove background.
It isn't going to work because it is super weird.
3926.64 -> COLBY: I am curious to see what it
looks like. It does work with text.
3929.94 -> JASON: I have my suspicions
this is going to go strangely.
3935.72 -> COLBY: Or the best way.
3941.42 -> JASON: I don't know how
long to expect this to take.
3945 -> COLBY: I would say 10-20
seconds for smaller images.
3950.28 -> JASON: Do we have anything in here --
3955.14 -> COLBY: I think by the time you
find it it will probably be done.
3959.28 -> JASON: I think you probably
right. Those are all videos.
3967.44 -> COLBY: You can also do background
removal with videos. Fun fact. I
3972.12 -> took the shilaw lubuff video, green
screen one, and it was a lot of fun.
3977.16 -> JASON: Amazing. These are guests.
I am not going to mess with guests.
3982.32 -> COLBY: You can mess with me.
3984.3 -> JASON: OK. Let's find you.
3994.5 -> Crap. They all have custom
names. Upload asset names.
3998.72 -> COLBY: Yeah.
4000.11 -> JASON: Crap.
4001.16 -> COLBY: Let's see if it is done. Maybe it
is. Yeah. There we go. It is not perfect.
4009.62 -> JASON: Chaotic results. If we move this around,
you can see where the background is on it. If
4018.32 -> I change this to let's replace this background,
is it here, background and we will make it red.
4027.5 -> COLBY: Just to clarify for the audience,
this isn't the intent. This is a tricky one.
4038.6 -> It is helpful for our example.
4041.38 -> JASON: Yeah. So we've got that. We have
somewhere in here, I don't know what we want.
4053.18 -> I have all these images I have done at different
points. Is this one smaller? Here is a much
4060.14 -> smaller version that we can mess with. This
one is just in -- we have a lot of -- OK.
4076.58 -> This is a smaller image that should theoretically
20 seconds or so be usable with the background
4086.42 -> knocked out. We will see how -- it can scout a
lot of different things going here so we will see.
4092.9 -> COLBY: I am confident in it.
4094.82 -> JASON: Then we can try to put
something else in the background.
4099.26 -> I want to be hanging out -- that's
an animated GIF. Never mind.
4106.28 -> COLBY: I wonder if that would work.
Try putting a GIF as a background.
4122.06 -> I have got another image here that we can use.
And that's going to be here. I have got my cloud
4132.92 -> name ready. If I want to put a new background
in after I remove the background, what do I do?
4140.96 -> COLBY: We will use something called underlays.
Typically you can create an underlays property
4147.98 -> and do an array but I created a helper
way to do it quickly so you can use the
4153.62 -> under lay like you have and we can string and
pass in the public ID and that should be it.
4159.2 -> JASON: Oh really? That's easier than I expected.
We will drop it in and see if it is done. It is.
4171.92 -> COLBY: Look how cool that is. You covered up
Marissa. This is great and one image. If we
4188.36 -> open in a few tab this isn't multiple images.
This is very much one specific image. I think
4201.26 -> COLBY: I think it
4209.3 -> is interesting because with Photoshop you have
layers and what we are doing is taking the base
4213.68 -> image of you, that's the base layer, and we
have the underlay which is shoving something
4218.9 -> underneath and that's the backgrounds image.
The overlay is there text and things on top.
4230.36 -> JASON: Let's do one of those. That
sounds fun. Is it the same thing?
4238.1 -> COLBY: I don't think I have a helper method with
that one. I think you need to define. We have two
4243.56 -> different things. You can do text which is
the text prop and you can add a string. So
4249.14 -> let's try that and we can play around with
that. Then you can add something. Yeah.
4257.54 -> By default it is going to be just like black
text, very simple, just shoved on there.
4263.18 -> As an easy way if you want to add text. Not
everybody wants to do it that way. For this, I am
4269.78 -> going to have you copy and paste the documentation
because I don't know the exact things but if you
4277.82 -> go go all of the way down on the left, I am
sorry on the sidebar, and then do text overlays
4285.08 -> you should be able to copy one of the text
objects. You can just -- so I have that in
4290.54 -> the overlays format. I didn't update that. You can
copy all the information inside that text object.
4297.86 -> JASON: Like this?
4299.12 -> COLBY: Yup.
4300.2 -> JASON: Instead of this then I would do --
4303.824 -> COLBY: Exactly.
4315.62 -> Perfect.
4316.64 -> JASON: Good. Good. Then we can
just start -- and letter spacing.
4336.8 -> COLBY: Some of the stuff we were doing
before isn't as visually exciting but
4343.58 -> practical. This is more fun stuff
like seeing the visual impact of
4348.74 -> the text and different images and
playing with those different layers.
4352.22 -> JASON: Right. Yeah. What if we just
want to go full meme format? I want
4358.16 -> to position this toward the bottom with a
black border. How would one do such a thing?
4363.26 -> COLBY: Let's break into the overlays format.
You can copy that same object from inside of
4370.4 -> the text prop but now let's add an overlay.
We are going to create -- so create an object
4378.14 -> first and then text is going to be the first
property of that object. There you go. Yeah.
4388.82 -> Now in addition to that, we want to add a
property of position and that's where we are
4394.28 -> going to do all of our different coordinates. You
can set the gravity which if you want that to be
4399.56 -> on the bottom you can actually set the gravity --
gravity. I don't have to do the thing. And south.
4410.24 -> If you wanted to add a Y value
you can certainly do that as well.
4414.4 -> JASON: OK. And so Y would be like the
number of pixels I wanted off the bottom?
4420.38 -> COLBY: Yeah, and that's going to be
relative to I think the original size
4425 -> depending how much you want
to space that out. Yeah. Cool.
4429.08 -> JASON: Maybe a little bit more.
Let's go like 80. OK. Happy.
4437.3 -> COLBY: We are going to do one at the top?
4443.827 -> JASON: Sure. Same deal here?
4444.44 -> COLBY: Yeah, you will just add another
object to that array. Duplicate it.
4452.72 -> Just a quick note for people watching about
gravity. Gravity is going to be that anchor point.
4458.9 -> A lot of the basic examples of gravity
are compass direction but then we have
4467.6 -> the AI-based one with auto and faces and that's
what you are seeing for those different values.
4473.48 -> JASON: Got it.
4474.38 -> COLBY: We have the meme. It is beautiful.
4476.053 -> JASON: I am missing the key point where we
need to outline the text or you can't read it.
4481.16 -> COLBY: Let me check for that property. That one
4487.76 -> is in there. It is outline. You should be able
to -- there is a default option. If you pass in
4497.84 -> outline. No, sorry. That's the proper on the
actual image itself. Let me find the overlay.
4508.58 -> Don't tell me I don't have
that. It is border. Border.
4512.42 -> Border and then you also
need to do stroke of true.
4520.52 -> It is the difference in what it is trying to
do. It is telling it apply the border. For
4526.22 -> the value of border, try something
like CSS 20 pix solid_black maybe?
4539.72 -> I am kind of simplifying the property
names but haven't abstracted the values.
4554.78 -> I want to think through that more before I do
anything more comply -- comp calculated with that.
4558.68 -> JASON: I think that's the right call. If you
pre-abstract some of this stuff it is hard to
4566.72 -> do. I see something getting clipped but it is
close enough. If I was going to do it for real
4576.08 -> I would find another way to solve that problem.
This is fun. I think I have dealt with this.
4586.52 -> There is a bounding box that has to be set to
be a 100% and then make the text centered. But
4593.18 -> yeah. This is fun. So now you've got the ability
to make a meme thing. You can go in and set --
4602.583 -> COLBY: Just with that one component.
4603.98 -> JASON: What's really fun is if you can imagine
4607.82 -> you could make this dynamic. You could create a
meme builder on your site using this component
4614.36 -> and take input from the forms and then drop them
in here and you would be able to generate memes on
4622.46 -> the fly. If you wanted to make a meme builder
which we don't have to do today unfortunately
4629.72 -> if is not that wild to imagine you can go in and
create this. That's the part I find so exciting.
4639.92 -> I don't want or need to be how to open
a canvas element and build out images
4648.2 -> and then kind of export those as JPEG. If I am
doing it as canvas it isn't optimized. I could
4665.96 -> generate memes on the fly, let them upload and
copy and paste it, but I can generate an image
4674.96 -> with a source sed so they had all of the right
versions. -- set. Copy and paste this on your
4678.98 -> website and it will be performant.
How much time do we have left?
4690.5 -> COLBY: Let's do one more thing. If you
scroll up to imports inside the code.
4699.92 -> Let's do CLD add an additional CLD OG image.
Copy and paste that image that you have,
4709.1 -> the same image that you have, like just
copy and paste that. Like the entire thing.
4715.04 -> JASON: Got it.
4716.6 -> COLBY: You can paste it under the head. It can't
be in the head but under the head. The only thing
4722.9 -> you need to do is remove the width, height and
sizes and of course update the tag which you did.
4730.16 -> Now let's save that. And now you should be able
to inspect your head and let's see what that does.
4745.34 -> We get a perfect open graph image. It
uses the same API has the CLD image but
4756.56 -> handles all the work of
generating meta tags so you can
4759.86 -> just as easily create our open graph images
like you were doing for your site, right?
4765.08 -> JASON: Yeah, this is awesome. I think the
thing that I always find with these is that
4772.4 -> it makes me willing to do some of the work that is
important for making websites, like, first of all,
4779.9 -> performant. Like all the different open graph
image and sizes and things like that. If we look
4785.06 -> at this, we are not just generating an image.
We are generating a full stop helping. Get out
4792.5 -> of the way. We have a full source set
here. If you look, it is the same image
4797.6 -> many times over but it has got different
settings for the width and stuff like that.
4802.58 -> It is showing us the rendered and intrinic
size and which current course we are using.
4811.46 -> I find these cool. We are looking at the full-full
size and smaller and smaller. If I open this on a
4818.96 -> phone it will probably open the 750 or something
which is a much smaller imagine than the full
4826.58 -> size one. That happened. I didn't have to do it.
It just did it for me. Because it is API driven,
4836.66 -> it all just kinds of works on every image and you
know, I set the sizes up once and it happens. Or I
4843.62 -> didn't set-up anything. I trust the framework and
your tool to do that performance optimization for
4849.68 -> me. But the other piece of this that I really like
is when you start looking at these things like we
4856.04 -> just kind of emerged by playing with this tool
we could make a meme generator. I would not have
4863.96 -> thought to tackle that if the tool didn't make
it easy. I would have been like that's a lot of
4869.48 -> work for something that already exists. There is
image flip and meme generator and stuff like that
4874.64 -> but it would be funny to put one of these on my
website. I just wouldn't have done it if it wasn't
4880.22 -> like Cloudinary let's me put in an element and I
have to put in a couple and I am off to the races.
4885.44 -> COLBY: I am glad it is proving to be
value. I am excited to hear thoughts.
4898.94 -> Still telling people it exists but if
anyone plays with it I would love to
4906.08 -> hear suggestions or feature ideas
you find missing from Cloudinary.
4910.28 -> JASON: Chat, go forth and make butt
memes. Colby, this has been great.
4917.72 -> Where should people go outside of this
page here if they want to learn more?
4923.78 -> COLBY: Outside of that page?
4926.66 -> JASON: I am going to tell
them to follow you on Twitter.
4932.84 -> COLBY: Every @Colbyfayock. More basic
stuff we went through. Which discord?
4960.56 -> COLBY: I have spacejelly.dev/discord.
4967.52 -> It isn't super active but would love
for anybody to stop by and say hi.
4973.64 -> JASON: That's going to auto correct,
I assume? Yes. With that, I think we
4982.4 -> are going to call this one a massive success.
You could say it was a butt load of success.
4990.26 -> [Laughter] thanks, again, as always to
Maggie who I... I am so sorry, Maggie,
4996.92 -> for making you write this nonsense down. Maggie is
here from White Coat Captioning and that is maze
5004.3 -> possible through the support of our sponsors,
Netlify, New Relic, NX. While you are checking
5012.58 -> out things on the site, make sure you go and check
out the schedule. We have all sorts of fun things.
5018.7 -> We are going to do fido 2 fingerprint login
through your device into aps. We are going
5028.42 -> to talk about optimizing React performance. We
are going to learn about docusource 2.0. And I
5035.92 -> have a few in the hopper not up on the site
yet so stay tuned. Colby, any parting words?
5043.9 -> COLBY: I was waiting to see in the
captioning a line from Maggie that
5049.36 -> says not amused --
>> Maggie: Ha!
5052.54 -> JASON: Constant professionals. Maggie would never.
>> Maggie: Never!
5061.3 -> JASON: She is going to pull a muscle
from rolling her eyes so hard.
5069.52 -> All right. With that, we are going to call this
one a success and find somebody to raid. I don't
5075.04 -> know who is live right now. I am just going
to start digging and see what we can find.
5083.2 -> Let's look at who is doing JavaScript right now.
We got a few folks doing JavaScript. It looks
5088.84 -> like coding garden is doing dino and fresh. That's
kinds of fun. Let's go raid coding garden. Colby,
5095.74 -> thank you so much for spending time today.
This was an absolute blast. Chat, as always,
5100.42 -> thanks for spending time with us.
We will see you all next time. See
Source: https://www.youtube.com/watch?v=vQ2MeJgJ1-8