Prosper Otemuyiwa Profile picture
Turning mustard seeds into bountiful harvests @ouredenlife @forloopAfrica 💚
Kayode Adebowale Profile picture A M A Z Profile picture 2 added to My Authors
28 Jul
CEO to shareholders and team members every month.

The apostles were high energy, relentless, confident and bullish co-founders that got seed funding from the Holy Spirit after Jesus mentored them!

..and they commanded high growth in their startup ministries. 🔥🔥🔥🔥🔥🔥
Paul is one apostle I like to call the coconut head founder.

Brave. Confident. Resourceful. Fire Brand. Technical. Lean advocate. He always wrote letters (from anywhere in the world) to believers that capitalized on Faith, Hope and Love.

Once, he left to establish another..
...startup. He put Apollos (COO) in charge. After a while, team members had a divide within the company.

Some chose Paul. Others chose Apollos. Paul (CEO) wrote to them again “I planted this startup, Apollos watered it, but God’s eternal VC funding give the increase”
Read 9 tweets
25 Dec 19
Day 25: In one of the previous tips of #25DaysOfMediaMagic, I mentioned how you can add overlays on top of images and videos.

Today, we'll celebrate #Christmas by applying multiple image transformations and advanced facial attributes detection to images to christmas-ify them!😁
The dynamic image manipulation URL below adds the Santa hat exactly above the auto detected eyes while rotating the hat to perfectly match her face. The hat is dynamically resized and padded in order to fit well as an actual hat

res.cloudinary.com/cloudinary/ima… #25DaysOfMediaMagic ImageImage
That's the URL.

- santa_hat is the public ID of the hat image previously uploaded.
- profile_orly_bogler.jpg is Orly's image previously uploaded too.

Furthermore, we activated the "Advanced Facial Attributes Detection" addon on @cloudinary . #25DaysOfMediaMagic ImageImage
Read 8 tweets
24 Dec 19
Day 24: What if you are tasked with building an interactive UI that can display business products to customers in a day or less? 🤔

Similar type of UI obtainable in e-commerce/shopify-like stores. How would you go about it? #25DaysOfMediaMagic
Well,...one of the options is to take advantage of @cloudinary's Product Gallery widget.

The Product Gallery requires only pure JavaScript to integrate, is easy to use within any web development framework, & eliminates the need to develop an in-house interactive media gallery.
@cloudinary ...with a few lines of code, of course.

How to set up the widget can be seen in the image below:

That's all it really takes. 😅

The value of the `cloudName` should be replaced by yours. All the assets (pictures) you want displayed in the gallery should be tagged during upload
Read 9 tweets
24 Dec 19
Day 23: I discovered that lots of folks think only developers can use the media tricks I have mentioned since Day 1.

That’s a false narrative.

No, you don’t have to know code, all your team members can manage digital assets via the dashboard/DAM solution #25DaysOfMediaMagic
That's my dashboard. I do a lot of these tricks no-programmatically from the dashboard. The Media Library provides you access to all your digital assets and is the main touchpoint into the @cloudinary DAM solution.

#25DaysOfMediaMagic
@cloudinary From the Media Library view, you can do the ff:

- Upload new images, videos, audio, or other files
- Create folders or share folders according to your work or teams.
- Select multiple assets to perform bulk operations including delete, add/edit tags, move, download, or review
Read 7 tweets
23 Dec 19
Day 22: Missed this yesterday, but no fears. We will cover it today and still cover Day 23. #25DaysOfMediaMagic

The year is 2019, and it's the season for Hanukkah. There are photos of dreidels for Hanukkah with a color combination of blue, red and dark green. 😍
I want to change a part of these dreidel colors to something else. I want to theme it with a vibrant @ouredenlife color. How?

Easy stuff. There's a transformation parameter @cloudinary provides that allows you switch certain colors amongst a variety of colors #25DaysOfMediaMagic
@ouredenlife @cloudinary The parameter is `e_replace_color`. I'll recolor our driedels by finding the blue colors (to a tolerance of 80 from the color #2b38aa) and replacing them with parallel shades of green, taking into account shadows, and lighting like so:

URL format: Left

Node.js code: Right
Read 4 tweets
21 Dec 19
Day 21: I'll show you how to turn your pictures into old paragraphs. 🔥🚀

But most importantly, the technique I'll use here can be applied to doing lots of crazy things with overlaying images.

This is what the finished product will look like 😁 #25DaysOfMediaMagic Image
1. Upload both the baby picture and the torn old looking paper photo to @cloudinary #25DaysOfMediaMagic ImageImage
@cloudinary 2. We will use the old torn paper image as a mask to crop the baby picture by matching the width and height of the baby picture like so:

In Node.js, you can see we used it as overlay in this way:

#25DaysOfMediaMagic ImageImage
Read 7 tweets
20 Dec 19
Day 20: I'll show you how to add custom engravings to items like devices, pans, and really any item that can have one.

@cloudinary makes this a walk in the park. Let's dig in! #25DaysOfMediaMagic 🔥🚀
@cloudinary Let's engrave something on this watch.

First: Add a text that aligns properly with the code on the right image #25DaysOfMediaMagic ImageImage
@cloudinary Second: Let's add an effect that will allow the text align to the curvy nature of the watch.

We can use the `e_distort` transformation parameter here.

Example: `e_distort:arc:60` should arc it properly like so:

The sample code is on the right image. #25DaysOfMediaMagic ImageImage
Read 6 tweets
20 Dec 19
Day 19: Omitted this yesterday so I'll do it today. I'll quickly show you how to automatically flip videos.

All you need to do is set the `angle` parameter on the video. To vertically flip it, set `angle` parameter to `vflip`.

To horizontally flip it, set `angle` to `hflip`
Example:

This is a vertical flip: res.cloudinary.com/demo/video/upl… Image
Now, you can decide to do an `in-between`. What I mean is that you can tilt the video to whatever angle you want. A positive integer value rotates a video clockwise; a negative integer value, counterclockwise.

Example:

res.cloudinary.com/demo/video/upl… Image
Read 4 tweets
18 Dec 19
Day 18: Let me show you how to make a video preview clip with a couple lines of code 😁🥰😇 #25DaysOfMediaMagic

And Oh, there's the URL & #NoCodeApproach
Let me outline the steps:

1. Upload a video to @cloudinary
2. Set your total duration for the preview video you want to create.
3. Layer on additional copies of the video with the corresponding beginning/end of each clip
4. Set the desired dimensions of the preview video
@cloudinary 5. Remove the audio. Well, that's optional and totally dependent on you!

So, with code, this is how you go about it. Using Node.js as an example:

Breaking it down:

- "MLB2" is the public id of the video
- duration of the clip is set to 12
- specify start offset & end offset Image
Read 4 tweets
17 Dec 19
Day 17: People talk about responsive design a lot but often leave out responsive images. One image for all screen resolutions and different devices is never & will never be enough.

Devices & screen resolutions keep increasing and it's hard to keep up #25DaysOfMediaMagic
Managing, manipulating and delivering images, is one of the main challenges of breakpoints for responsive design that web developers face.

Imagine having to manually create many versions of an image to fit the breakpoints for different screen sizes & resolutions...
I want to introduce you to one of the heaven sent tools made by @cloudinary. They day I discovered it, I almost cried. It's beyond marvelous.

It's a Responsive Image Breakpoint Generator. You simply upload an image and it generates several images according to... ImageImage
Read 5 tweets
16 Dec 19
Day 16: I'll show you how you can watermark your images and videos.

With @cloudinary, you can add a watermark to images and videos using transformations.

Follow me...#25DaysOfMediaMagic 🔥🚀
@cloudinary Upload the image you want to use as the "watermark". Ensure that this image already exists on @cloudinary.

Now, add your watermark as an overlay on top of the image you want to brand by setting the overlay parameter (l in URLs) as your watermark image's public ID.....
@cloudinary Example:

First image to the left shows the `envelope` image we want to brand.

Second image to the right shows adding the watermark(cloudinary_icon) as an overlay on the image.

l_cloudinary_icon; where `cloudinary_icon` is the public id of the watermark image prev. uploaded. ImageImage
Read 7 tweets
15 Dec 19
Day 15: Adopt Adaptive Bitrate Streaming to automate adjustment of video quality in real time #25DaysOfMediaMagic
Cloudinary’s Adaptive Bitrate Streaming (ABS) capability adjusts video quality in real time to deliver the best-possible quality for the current viewing device and network connection.

- You can eliminate buffering time
- You can save bandwidth by displaying a lower-resolution..
... video to keep the audience engaged if the network connection is too weak to display the high-resolution version. #25DaysOfMediaMagic
Read 6 tweets
14 Dec 19
Day 14: let’s talk about delivering media assets at the desired size to your users.

Most developers resize images on the client using CSS. But this is bad.

It’s bad because you have allowed the user to download the original heavy image with their data. #25DaysOfMediaMagic 😎😇
You don’t have to do that. With @cloudinary you can deliver the asset with the right dimensions as a very light asset to the user.

Just use @cloudinary <img> or <video> tags in HTML with the desired dimensions and embed in your site like so:

Check out the next tweet...
The code would look like so:

cl_image_tag(“sample.jpg”, :width=>300, :height=>100, :crop=>”scale”)

Which will result in HTML code like so:

<img src=”res.cloudinary.com/demo/image/upl…”> #25DaysOfMediaMagic 🔥🔥🔥🔥
Read 4 tweets
13 Dec 19
Day 13: Lazy loading of images is something every frontend developer know about and implement very often in their projects.

High-quality images often requires longer page loading times, which can cause users to leave. #25DaysOfMediaMagic
You can use @cloudinary to generate low quality image placeholders that displays to save bandwidth and loading time when lazy-loading images.

This way, your heavy high quality images only shows when the user is within the viewport. #25DaysOfMediaMagic
@cloudinary Check out this low quality image.

res.cloudinary.com/demo/image/upl…

I'll show you a blurry version of this image in the next tweet #25DaysOfMediaMagic Image
Read 7 tweets
12 Dec 19
Day 12: Let's talk about how to achieve video transparency. This should be mad fun!!!!

A typical case study is how you'd like to have a nice background or that of a certain color in your video because you hate the background or you just want to make it cool.

#25DaysOfMediaMagic
With @cloudinary, this is a walk over.

There's a make transparent feature available to immediately remove the background of a video. It is `e_make_transparent`.

Now, take a look at this video. #25DaysOfMediaMagic
@cloudinary We will remove that ugly, plain, depressed background and replace it with a new background in the video.

How?

You need to do this with the `e_make_transparent` feature and overlay the new video with the initial video.

This is the new video that we want to make the background
Read 8 tweets
11 Dec 19
Day 11: Let's talk about how painless it is to remove a picture's background & also rotate images programmatically! 😁😎

For rotating images, it's as clear as using the `angle` parameter with the number of degrees by which to rotate the image clockwise.

Let's use Eden's image: Image
Say you wanted to rotate @ouredenlife's logo clockwise by 60 degrees, it is as simple as adding `a_60` in the URL parameter like so:

"res.cloudinary.com/demo/image/upl…" #25DaysOfMediaMagic Image
@ouredenlife The code equivalent of that in Node.js would be:

cloudinary.image("180_yacaar.png", {angle: 60});

That's all!

Let's enhance the image by adding a shadow effect;

Just add `e_shadow:40`; 40 can be any value between 0 and 100.

"res.cloudinary.com/demo/image/upl…" #25DaysOfMediaMagic Image
Read 8 tweets
10 Dec 19
Day 10: One cool trick you can make happen with @cloudinary is invoking the power of displacement maps with images. 🔥

Not just overlaying two images together, but combining two images in a way that produces a certain custom desired result. #25DaysOfMediaMagic

For example: Image
@cloudinary Look at that image above again. We created a zoom effect using two images.

This is the URL for the result: demo-res.cloudinary.com/l_docs:zoom_ma…

- l_docs:zoom_map
- e_displace
- x_50
- y_50

I'll explain:

- "e_displace" tells Cloudinary to invoke a displacement effect. #25DaysOfMediaMagic
@cloudinary - "x_50" and "y_50" configures the maximum allowed displacement in the horizontal and vertical directions.
- "l_docs:zoom_map" represents the public_id of the image map to use as a displacement template.

With the information provided above, let's look at another example.
Read 6 tweets
9 Dec 19
Day 9: Do you know you can create your own Duotone filter with @cloudinary ? It's clear, and straight-forward to implement.

Take a good look at this image. So how do you apply the filter? Check the next tweet #25DaysOfMediaMagic Image
@cloudinary You need to apply the `e_grayscale` and `e_tint` parameters to the image URL been served by @cloudinary

So the resulting URL will be: res.cloudinary.com/unicodeveloper… #25DaysOfMediaMagic Image
@cloudinary You can assign a numerical value to the `e_tint` parameter to make a perfect blend of what you want just like the image below:

Check out the resulting URL; I set 10 as the value of `e_tint` : res.cloudinary.com/unicodeveloper… #25DaysOfMediaMagic Image
Read 6 tweets
8 Dec 19
Day 8: One of the most popular cases of video interaction I have seen on social media is folks turning videos into animated GIFs.

Several tools are available to turn excerpts of videos into gifs readily. @cloudinary is one of them.

I’ll show you how #25DaysOfMediaMagic 🐐👌🏿
Note: Cloudinary supports delivering your videos as animated images in either GIF or WebP formats.

Turning a video into a GIF is you simply just changing the URL extension to ‘.gif’. Insane! 🤯

Say you have a ‘prosper.mp4’ video served by @cloudinary. Change ‘.mp4’ to ‘.gif’
That’s it. I swear that’s it. You’re surprised right? Me too when I first learned this 2 years ago. 😅

But that’s just scratching the itch, there are tons of techniques you can apply in making an animated GIF from a video.

So, hold my hand...let me lead you into it 😉😍😌
Read 12 tweets
7 Dec 19
Day 7: Today is the Anthony Joshua vs Andy Ruiz Jr, Episode 2 fight. And I'm freaking stoked for this event.

I wish I was in Saudi Arabia but I'm broke so watching it on TV or via livestream is the only viable option. 😢😭

Wait a minute, what if you wanted...#25DaysOfMediaMagic
...to build a video app (more like Youtube or the likes) that delivers premium quality video to users but needed subtitles and captions?

What if the PM adds a feature and says "Hey, folks should be able to livestream on the app" 🤔

What would you do? #25DaysOfMediaMagic
One no-breaking-head way of adding subtitles & captions is allowing @cloudinary do the work.

On the @cloudinary dashboard, you can activate the AI Video Transcription add-on. After that, all you need to do is generate the video's transcript on upload....#25DaysOfMediaMagic
Read 9 tweets
7 Dec 19
Day 6: Today is the day you learn that creating Instagram-like filters is a walk in the park especially with @cloudinary.

One of such filters which is easy to love is the “cartoon” effect. A world that exists where Thanos can snap his fingers & we all become cartoons. 🤯🤯🤯 Image
@cloudinary It's as straight-forward as using the "e_cartoonify" parameter in your image URL like so:

res.cloudinary.com/demo/image/upl… #25DaysOfMediaMagic ImageImage
@cloudinary There's more:

You can customize how the "cartoonify" effect should be:

- Want the color changed?
- Want the color intensity reduced?

Very possible. Check this out:

All I had to do was add "bw" (black & white) and a value for the line strength like so: e_cartoonify:20:bw ImageImage
Read 4 tweets