DEV Community: Shazomii

March Media Madness Takeaways [Yet Another Cloudinary Blog post] - Part II

Shazomii — Fri, 27 Mar 2020 12:21:16 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1234071616562266112-107'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1234071616562266112&theme=dark" }
#MarchMediaMadness

This is the second part of a 3 part series I'm writing about the Guess the Transformation challenge being hosted by Prosper Otemuyiwa (@unicodeveloper) and Cloudinary.

Here's a link to the first part of the series to get you up to speed.

As I noted in the first post, most of these challenges can be solved using various approaches. The purpose of this post is to try to show how the solution to each day's challenge is derived.

I have also included a link to the Cloudinary Cookbook recipe/documentation related to each day's challenge for you to check out more media magic!

This second part covers the next 10 days (11th March - 20th March, 2020).

Let's go!

Day 11 (March 11th)

Recipe: Eyes Overlays

First Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1583944329/_mmm/finepeople.jpg

Second Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1583943678/_mmm/glasses.png

Expected result

For this challenge, we'll make use of Cloudinary's Advanced Facial Attribute Detection feature to smartly overlay glasses on top of every detected eye pair in the first baseline image.

To do this, the overlay parameter, l, is set to the public ID of the glasses image. We when activate Cloudinary's Advanced Facial Attribute Detection feature by setting the gravity parameter, g, to adv_eyes.

Lastly, we'll set the region_relative flag with a 1.5 width. This effectively scales each glasses overlay to 150% of the detected eye pairs.

https://res.cloudinary.com/cdemo/image/upload/fl_region_relative,g_adv_eyes,l__mmm:glasses,w_1.5/_mmm/finepeople.jpg

Day 12 (March 12th)

Recipe: Pixelate Face and Duotone Filter

Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/puppyface.jpg

Expected result

This challenge is a combination of three effects: pixelate, grayscale and tint.

To pixelate the face, we'll set the effect parameter, e, to pixelate_faces. This will detect every face in the image and add pixel squares over each one. The size of the squares can also be set using custom values.

We then create a duotone filter using the grayscale and tint effects. We'll use a red tint and set its strength to 50.

https://res.cloudinary.com/cdemo/image/upload/e_pixelate_faces/e_grayscale/e_tint:50:red/_mmm/puppyface.jpg

Day 13 (March 13th)

Recipe: Style Transfer

First Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/community.jpg

Second Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584104910/_mmm/moulin.jpg

Expected result

For this challenge, we'll make use of Cloudinary's cool Neural Artworks feature to transfer the styles from the second baseline image onto the first baseline image. To do this, we'll set the effect parameter to style_transfer.

We'll also resize the image using the width and height parameters to get the same dimensions as the expected result.

https://res.cloudinary.com/cdemo/image/upload/w_1000,h_800,c_fill/e_style_transfer,l__mmm:moulin/_mmm/community.jpg

Day 14 (March 14th)

Recipe: Outline Effect

Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/bottomleaves.png

Expected result

To recreate this rainbow-like pattern, we'll make use of the outline effect. This effect, as the name implies, creates an outline around a transparent image.

The outline effect has a default color of black. To create our own colors, we'll set the color parameter, co, to a color of our choice.

We can then create successive outline effect components to achieve the multi-colored outline in this challenge.

https://res.cloudinary.com/cdemo/image/upload/e_outline,co_red/e_outline,co_rgb:FF7F00/e_outline,co_yellow/e_outline,co_rgb:00FF00/e_outline,co_blue/e_outline,co_rgb:4B0082/e_outline,co_rgb:9400D3/e_outline,co_red/e_outline,co_rgb:FF7F00/e_outline,co_yellow/e_outline,co_rgb:00FF00/e_outline,co_blue/e_outline,co_rgb:4B0082/e_outline,co_rgb:9400D3/_mmm/bottomleaves.png

Day 15 (March 15th)

Recipe: Displacement Mapping

First Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584251882/_mmm/mug.jpg

Second Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584251791/_mmm/radial.jpg

Third Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584252577/_mmm/tweet.png

Expected result

One of Cloudinary's more robust transformations is the displace effect, which applies another image as a displacement map to manipulate your base image in a variety of ways. The displacement mapping algorithm evaluates every pixel in the image map and then displaces the pixels in the base image based on the intensity of the corresponding image map pixels.

For this challenge, we've been provided with a displacement template (second baseline image) which we are going to apply on the tweet image.

This particular challenge is a good example of one that can be solved in various ways, so it'll be interesting to see how you approach it.

Besides the displace effect, I'll also like to touch upon the trim effect and angle parameter, a.

The trim effect analyses the image and smartly trims off unused white-spaces.

We apply the angle parameter on the mug to mirror the original mug. To achieve this, we'll flip it vertically at an angle of 180 by setting the angle parameter to vflip.180.

https://res.cloudinary.com/cdemo/image/upload/c_scale,w_320/c_pad,h_2.0,w_1.0/e_displace,l_mmm:radial,y-9/e_trim/c_scale,u_mmm:mug,w_690,x-1,a_vflip.180/_mmm/tweet.png

Day 16 (March 16th)

Recipe: Color Mapping

Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/handbag.png

Expected result

To complete this challenge, we'll make use of two effects: outline, which we first saw in day 14 challenge, and replace_color, which effectively replaces shades of predominant or custom colors in an image with shades of a different.

Here's the syntax for replace_color effect: e_replace_color:[TO_COLOR]:[THRESHOLD]:[FROM_COLOR]. In this case, we want to replace the color blue with cyan.

The syntax for outline effect is: e_outline:[MODE]:[WIDTH]:[BLUR]. In day 14 challenge, we made use of the default values for the 3 parameters. For this challenge, we'll stick to the default value for mode (inner and outer), but we'll set custom values for both width and blur.

https://res.cloudinary.com/cdemo/image/upload/e_replace_color:cyan:80:2b38aa/e_outline:15:200,co_orange/_mmm/handbag.png

Day 17 (March 17th)

Recipe: Image Overlay/Underlay

First Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584510574/_mmm/human.png

Second Baseline Image: https://res.cloudinary.com/cdemo/image/upload/v1584510559/_mmm/desert.jpg

Expected result

Personally, I think there's an inside joke in today's challenge that I didn't get. For context, this is the only challenge with a title: "Zoom Change Background—Remote fun". I'm not quite sure what that's about or maybe it doesn't even mean anything, but if you get it, do let me know in the comments. :)

So, on to the challenge.

There are at least two ways we can solve this challenge. We could either overlay the baseball player on the desert or underlay the desert beneath the baseball player. Either way works just fine.

The winner went with the underlay method and also made some adjustments to the dimensions.

https://res.cloudinary.com/cdemo/image/upload/w_800,f_auto,q_auto/u__mmm:desert,h_1000/_mmm/human.png

The organizers of this challenge decided to step things up a notch by deviating from image transformation and manipulation to video!

I'm writing this post on the 27th of March. There hasn't been any image challenge since the 17th, so I guess it's safe to say we'll be having video challenges for the rest of the month. C'est bien.

You might want to check out the Cloudinary documentation on Video Transformations before proceeding. Also, check out the doucmentation on Resizing and Cropping Videos, as we'll likely be doing a lot of that and the documentation does a perfect job of outlining what each crop mode does.

Day 18 (March 18th)

Recipe: Concatenate Videos with Images

Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/washyourhands.png

Baseline Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/washhands.mp4

Expected result

For this challenge, we want to concatenate the image named washyourhands to the start of the video named washhands for a duration of 5 seconds (both the video and image will also be scaled to a width of 500 pixels and a height of 400 pixels for uniformity).

We'll achieve this by using the following combination of parameters:

overlay, l, to specify the name of the image,
splice flag, fl_splice, to indicate that the image should be concatenated on to the container video and not added as an overlay,
duration parameter, du, to specify the amount of time in seconds to display the image,
start_offset set to 0, so_0, to concatenate the image at the beginning of the video instead of at the end.
layer_apply flag, fl_layer_apply, to indicate that the above parameters are applied to the image with the overlay parameter and not the base video.

https://res.cloudinary.com/cdemo/video/upload/w_500,h_400/w_500,h_400,l__mmm:washyourhands,fl_splice,du_5/so_0,fl_layer_apply/_mmm/washhands.mp4

Day 19 (March 19th)

Recipe: Blurred Video Background

Baseline Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/baseball.mp4

Expected result

Right off the bat (pun intended), the differences between the two videos are quite clear. The aspect ratio of the base video has been switched to a square and a blurred version of the same video has been added to fill out the cropped space.

To achieve this, we resize the base video to square proportions and apply a fill crop mode. We then add a background by setting the background parameter, b, to blurred, with a blur intensity of 400 and a brightness value of 15.

If we leave it this way, the blurred background will remain invisible behind the video with some funny things happening with the video's duration. We don't want that. To stretch it out, we'll adjust it's dimensions to a width of 600 pixels and height of 320 pixels with a pad crop mode.

https://res.cloudinary.com/cdemo/video/upload/w_300,h_300,c_fill/c_pad,h_320,w_600,b_blurred:400:15/_mmm/baseball.mp4

Day 20 (March 20th)

Recipe: Fade In, Fade Out

Baseline Video: https://res.cloudinary.com/cdemo/video/upload/_mmm/geng.mp4

Expected result

The text overlay effect we last saw in Day 8 makes a comeback in this challenge with an added superpower: the ability to step in and out of a video at specified times. Cool, right?

We achieve this using the start offset, so, and end offset, eo, parameters. We'll set both to the times we want the text overlay to step in and out of the video respectively.

We'll also apply two fade effects, e_fade, to the video: one at the beginning and another at the end. The effect accepts a parameter that determines the duration of the fade effect in milliseconds, with a positive value for fading in at the beginning of the video, and a negative value for fading out at the end of the video.

https://res.cloudinary.com/cdemo/video/upload/l_text:arial_60:Geng Of The Most High,g_north,y_80,so_2,eo_5/e_fade:2500/e_fade:-5000/_mmm/geng.mp4

If you made it this far, trust me, you can make it through anything!

As always, please experiment with other recipes in the cookbook and feel free to share your stunning creations in the comments below!

Watch out for the final part!

Cheers!

March Media Madness Takeaways Part I [Yet Another Cloudinary Blog Post]

Shazomii — Thu, 19 Mar 2020 10:06:04 +0000

// Detect dark theme var iframe = document.getElementById('tweet-1234071616562266112-657'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1234071616562266112&theme=dark" }
#MarchMediaMadness

This is the first of a 3-part series I'll be writing about the 31 days media challenge (March 1st - 31st, 2020), appropriately titled March Media Madness, being run by @unicodeveloper, an open source evangelist, and Cloudinary.

I'm writing this series essentially to solidify the knowledge I've gained so far of Cloudinary's robust media transformation techniques and hoping someone out there finds it helpful as well.

I have included a link to the Cloudinary Cookbook recipe related to each day's challenge for you to check out more media magic!

Let's jump right in!

Part one covers the first 10 days.

Day 1 (March 1st)

Recipe: Border

Baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png

Expected result

To achieve this transformation, we'll use the border parameter, bo. This parameter allows us to add a border around the image with the ability to dynamically customize the border's properties (width, style, color, opacity).

Let's transform the baseline image by adding a 5px solid red border to its URL:

https://res.cloudinary.com/cdemo/image/upload/bo_5px_solid_red/_mmm/cld.png

Day 2 (March 2nd)

Recipe: Text Overlay

Baseline Image: https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png

Expected result

The overlay parameter, l, is used to add text or image on top of an existing image.

For this challenge, we'll set the overlay parameter to text and customize the text by setting its font family, size and weight. Black is the default color so we don't have to set the color.

https://res.cloudinary.com/cdemo/image/upload/l_text:arial_30_bold:March Media Madness/_mmm/cld.png

Day 3 (March 3rd)

Recipe: Cartoonify and Shadow effects

Baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png

Expected result

This challenge contains two transformations: a cartoon-like effect and a box shadow effect.

The cartoon-like effect is achieved by setting the effect parameter, e, to cartoonify while the shadow effect is achieved by setting the effect parameter to shadow.

By modifying the base URL with these effects, we are able to get the expected result:

https://res.cloudinary.com/cdemo/image/upload/e_cartoonify/e_shadow/_mmm/cld.png

Day 4 (March 4th)

Recipe: Image Blur and Text Overlay Positioning

Baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png

Expected result

Let's begin with the text overlay as we have discussed it previously in day two's challenge. The main difference with today's challenge is that the text is positioned in the bottom right corner of the image rather than the center.

This positioning is achieved using the gravity parameter, g. The gravity parameter uses the compass points to place an overlay anywhere on the specified image. The text in this challenge is located in the south-east corner of the image so we'll use g_south_east in the URL.

The second transformation blurs out the underlying image by setting the effect parameter to blur.

https://res.cloudinary.com/cdemo/image/upload/e_blur:300/l_text:arial_30_bold:Twitter Challenge,g_south_east/_mmm/cld.png

PS: We didn't use the gravity parameter for day two's challenge because the default overlay positioning is center.

Day 5 (March 5th)

Recipe: Resize Image and Text/Image Overlay Positioning

First baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg

Second baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png

Expected result

This is a particularly interesting challenge as it involves most of the recipes we learned from previous challenges coupled with some minor additions. I will dwell more on these additions.

We begin by resizing the first baseline image. To preserve the aspect ratio of the image, Cloudinary allows us to use either the height, h, or width, w, parameter, but not both. We'll set the width parameter to the desired value in pixels.

We also need to set the crop mode after resizing the image. We'll use the fit crop mode which keeps as much detail of the original image as possible.

Two types of overlays are in play with this challenge: a text overlay, which we saw in previous challenges, and an image overlay.

To apply the image overlay, the overlay parameter, l, is set to the public ID of the image to be used. In cases where an image has parent directories, a colon, :, is used to separate each level in the file tree.

Finally, we implement custom positions for different overlays by setting their respective x and y offset parameters as required.

Combining all of these transformations gives us the URL below:

https://res.cloudinary.com/cdemo/image/upload/w_900,c_fit,l_text:Arial_50_bold:Open Source is a habit. Nurturing this habit changes your identity as a developer.,x_25,y_25/l_text:Arial_50_bold:- Prosper Otemuyiwa,x_25,y_225/l__mmm:opensource,g_south_west/_mmm/envelope.jpg

Day 6 (March 6th)

Recipe: Distortion Effect

First baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/poster.jpg

Second baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/discbox.jpg

Expected result

The distort effect transforms a given image into a quadilateral shape by assigning new coordinates to each of its four corners. The coordinates assignment is done in a clockwise direction starting from the top left corner of the image. Each pixel of the image is then mapped in proportion to the new shape of the quadilateral.

Both baseline images are also resized so as to better fit each other.

https://res.cloudinary.com/cdemo/image/upload/w_400,c_scale/l__mmm:poster,w_300,h_422,e_distort:55:55:195:20:195:350:55:320/_mmm/discbox.jpg

Day 7 (March 7th)

Recipe: Image Underlay and Grayscale/Gradient Fade

Baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpghttps://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpg

Expected result

This challenge requires us to use the gradient fade effect to create a smooth transition from grayscale to color.

We achieve this by first duplicating the baseline image using the underlay parameter, u, and then applying the grayscale effect. We then apply a gradient fade effect to the original base image with an x offset parameter set to the position where we want the fade from the underlying to overlying image to occur.

https://res.cloudinary.com/cdemo/image/upload/e_gradient_fade,x_0.9/u__mmm:kqa488dfzvsetpvglq6n,e_grayscale/_mmm/kqa488dfzvsetpvglq6n.jpg

Day 8 (March 8th)

Recipe: Image as Text Texture

Baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/freshcoloredwater.jpg

Expected result

For this challenge, we'll be creating a text cutout from the given baseline image.

First, we'll dynamically add a text overlay with our desired text's parameters (font family: Arial, size: 250px, weight: bold) and then add a shadow effect.

To achieve the cutout style, we'll use the flags parameter, fl, and set it to cutter.

Note that the final image has no background. To achieve this, we'll convert the baseline jpg image to a png format by using the fetch format parameter, f, and setting it to png.

Finally, we set the image width to the required value and end up with the expected result:

https://res.cloudinary.com/cdemo/image/upload/f_png/w_800/l_text:Arial_250_bold:Water,fl_cutter,e_shadow/_mmm/freshcoloredwater.jpg

Day 9 (March 9th)

Recipe: Remote Image Fetch and Image Rotation

First baseline image: https://res.cloudinary.com/cdemo/image/upload/v1583787800/_mmm/prosper.jpg

Second baseline image: https://res.cloudinary.com/cdemo/image/upload/v1583425593/_mmm/opensource.png

Expected result

Cloudinary's image transformation goodness is not by any means limited to images uploaded to Cloudinary. We can also transform images from remote locations. Cloudinary allows us to do this using the fetch feature. Two differences to note in comparison with the upload feature we've used in previous challenges are:

upload is replaced with fetch.
The image public ID is replaced with a full link to the remote image.

In our case, the image we're fetching remotely is the 'OS' watermark (opensource.png) which is ironically located on Cloudinary.

Next, we resize the image and set its crop mode to pad.

We then rotate the image using the angle parameter, a, and set its value to -35.

We are now going to perform a sandwich maneuver to it by add using the first baseline image as both an overlay and underlay to give it a transparent effect. [Alternatively, we can use the opacity parameter, o, on the remote image to give it the same effect].

Finally, we adjust the x and y offsets of the first baseline image to position it where we want.

https://res.cloudinary.com/cdemo/image/fetch/c_pad/w_100,a_-35/u_mmm:prosper,y_115,x-100,e_overlay/q_auto:good/https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png

Day 10 (March 10th)

Recipe: Custom Shape Cropping and Vintage Photos

First baseline image: https://res.cloudinary.com/cdemo/image/upload/_mmm/edencartoon.jpg

Second baseline image: https://res.cloudinary.com/cdemo/image/upload/v1583824361/_mmm/roughtornmaterial.png

Expected result

We begin by cropping the first baseline image to the shape of the second baseline image (mask), a process known as masking.

We achieve this by setting the overlay parameter to the public ID of the mask image, setting the flag parameter to cutter and also setting another flag parameter to relative. The relative flag allows us to mirror the size of the baseline image.

In order to get the vintage effect, we'll add the parchment as an overlay and give it a semi-transparent effect by adjusting the value of the opacity parameter, o, as required. We'll again need to set the flag parameter to relative so as to keep in line with the image proportion.

Finally, we set the width of the image to obtain the expected result:

https://res.cloudinary.com/cdemo/image/upload/w_1000/l_mmm:roughtornmaterial,w_1.0,h_1.0,fl_relative,fl_cutter/l_mmm:roughtornmaterial,w_1.0,h_1.0,fl_relative,o_40/_mmm/edencartoon.jpg

An important point to note is that we can achieve similar results to the ones listed above by taking completely different approaches. I'm excited to see what approach you take.

Catch you in part two. In the meantime, feel free to experiment with more recipes. 🚀🚀