March Media Madness Takeaways Part I [Yet Another Cloudinary Blog Post]
Tags: cloudinary, media, webdev
Published: 2020-03-19 10:06:04

{% twitter 1234071616562266112 %} 
*[#MarchMediaMadness](https://cloudinary.gitbook.io/march-media-madness-gtt-2020/)*

This is the first of a 3-part series I'll be writing about the [31 days media challenge](https://cloudinary.gitbook.io/march-media-madness-gtt-2020/) (March 1st - 31st, 2020), appropriately titled **March Media Madness**, being run by [@unicodeveloper](https://twitter.com/unicodeveloper), an open source evangelist, and [Cloudinary](https://cloudinary.com).

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](https://cloudinary.com/cookbook/add_a_border_to_images)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)
*Baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)*


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1584569629786/QLZZuam11.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](https://res.cloudinary.com/cdemo/image/upload/bo_5px_solid_red/_mmm/cld.png)

---

## Day 2 (March 2nd)

***Recipe: [Text Overlay](https://cloudinary.com/cookbook/add_a_text_to_an_image)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)
*Baseline Image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)*

![https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1NJpc41i4PJIeNbmFD%2F-M1NJz7JG0QXX8j1a5Eh%2Fimage.png?alt=media&token=70d06dc4-36a1-4f05-854b-77280d86d9c5](https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1NJpc41i4PJIeNbmFD%2F-M1NJz7JG0QXX8j1a5Eh%2Fimage.png?alt=media&token=70d06dc4-36a1-4f05-854b-77280d86d9c5)
*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](https://res.cloudinary.com/cdemo/image/upload/l_text:arial_30_bold:March%20Media%20Madness/_mmm/cld.png)

---

## Day 3 (March 3rd)

***Recipe: [Cartoonify](https://cloudinary.com/product_updates/cartoonify_effect) and [Shadow](https://cloudinary.com/cookbook/add_a_shadow_effect_to_an_image) effects***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)
*Baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)*

![https://res.cloudinary.com/cdemo/image/upload/e_cartoonify/e_shadow/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/e_cartoonify/e_shadow/_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](https://res.cloudinary.com/cdemo/image/upload/e_cartoonify/e_shadow/_mmm/cld.png)

---

## Day 4 (March 4th)

***Recipe: [Image Blur](https://cloudinary.com/documentation/image_transformations?query=blur&c_query=Applying%20image%20effects%20and%20filters%20%E2%80%BA%20Blurring,%20pixelating%20and%20sharpening%20effects#blurring_pixelating_and_sharpening_effects) and [Text Overlay Positioning](https://cloudinary.com/cookbook/text_overlay_positioning)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)
*Baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/cld.png)*

![https://res.cloudinary.com/cdemo/image/upload/e_blur:300/l_text:arial_30_bold:Twitter%20Challenge,g_south_east/_mmm/cld.png
](https://res.cloudinary.com/cdemo/image/upload/e_blur:300/l_text:arial_30_bold:Twitter%20Challenge,g_south_east/_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](https://res.cloudinary.com/cdemo/image/upload/e_blur:300/l_text:arial_30_bold:Twitter%20Challenge,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](https://cloudinary.com/cookbook/resize_an_image) and [Text/Image Overlay Positioning](https://cloudinary.com/blog/adding_watermarks_credits_badges_and_text_overlays_to_images)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg)
*First baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/envelope.jpg)*

![https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png)
*Second baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png](https://res.cloudinary.com/cdemo/image/upload/_mmm/opensource.png)*

![https://res.cloudinary.com/cdemo/image/upload/w_900,c_fit,l_text:Arial_50_bold:Open%20Source%20is%20a%20habit.%20Nurturing%20this%20habit%20changes%20your%20identity%20as%20a%20developer.,x_25,y_25/l_text:Arial_50_bold:-%20Prosper%20Otemuyiwa,x_25,y_225/l__mmm:opensource,g_south_west/_mmm/envelope.jpg](https://res.cloudinary.com/cdemo/image/upload/w_900,c_fit,l_text:Arial_50_bold:Open%20Source%20is%20a%20habit.%20Nurturing%20this%20habit%20changes%20your%20identity%20as%20a%20developer.,x_25,y_25/l_text:Arial_50_bold:-%20Prosper%20Otemuyiwa,x_25,y_225/l__mmm:opensource,g_south_west/_mmm/envelope.jpg)
*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](https://cloudinary.com/documentation/image_transformations#crop_modes) 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](https://res.cloudinary.com/cdemo/image/upload/w_900,c_fit,l_text:Arial_50_bold:Open%20Source%20is%20a%20habit.%20Nurturing%20this%20habit%20changes%20your%20identity%20as%20a%20developer.,x_25,y_25/l_text:Arial_50_bold:-%20Prosper%20Otemuyiwa,x_25,y_225/l__mmm:opensource,g_south_west/_mmm/envelope.jpg)

---

## Day 6 (March 6th)

***Recipe: [Distortion Effect](https://cloudinary.com/blog/how_to_dynamically_distort_images_to_fit_your_graphic_design)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/poster.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/poster.jpg)
*First baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/poster.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/poster.jpg)*

![https://res.cloudinary.com/cdemo/image/upload/_mmm/discbox.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/discbox.jpg)
*Second baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/discbox.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/discbox.jpg)*

![https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1ktgkjdBMs4S79J_Kv%2F-M1leQF96qRT8ztPzypQ%2Fdiscboxyes.jpg?alt=media&token=abc200fe-56f4-482c-ae1b-773910d85bc2](https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1ktgkjdBMs4S79J_Kv%2F-M1leQF96qRT8ztPzypQ%2Fdiscboxyes.jpg?alt=media&token=abc200fe-56f4-482c-ae1b-773910d85bc2)
*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](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](https://cloudinary.com/documentation/image_transformations?query=under&c_query=Image%20and%20text%20overlays%20%E2%80%BA%20Adding%20image%20underlays#adding_image_underlays) and [Grayscale/Gradient Fade](https://cloudinary.com/cookbook/convert_image_to_grayscale)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpg)
*Baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpghttps://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/kqa488dfzvsetpvglq6n.jpg)*

![https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1sAXQZaye9b-G9Q-v4%2F-M1sGOJaN7guaAveGpFF%2Fkqa488dfzvsetpvglq6n.jpg?alt=media&token=8cd105ed-5786-4129-9441-94fc6ca4e474](https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M1sAXQZaye9b-G9Q-v4%2F-M1sGOJaN7guaAveGpFF%2Fkqa488dfzvsetpvglq6n.jpg?alt=media&token=8cd105ed-5786-4129-9441-94fc6ca4e474)
*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](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](https://cloudinary.com/cookbook/use_images_as_text_textures)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/freshcoloredwater.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/freshcoloredwater.jpg)
*Baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/freshcoloredwater.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/freshcoloredwater.jpg)*

![https://res.cloudinary.com/cdemo/image/upload/f_png/w_800/l_text:Arial_250_bold:Water,fl_cutter,e_shadow/_mmm/freshcoloredwater.jpg](https://res.cloudinary.com/cdemo/image/upload/f_png/w_800/l_text:Arial_250_bold:Water,fl_cutter,e_shadow/_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](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](https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url) and [Image Rotation](https://cloudinary.com/cookbook/image_rotation)***

![https://res.cloudinary.com/cdemo/image/upload/v1583787800/_mmm/prosper.jpg](https://res.cloudinary.com/cdemo/image/upload/v1583787800/_mmm/prosper.jpg)
*First baseline image: [https://res.cloudinary.com/cdemo/image/upload/v1583787800/_mmm/prosper.jpg](https://res.cloudinary.com/cdemo/image/upload/v1583787800/_mmm/prosper.jpg)*

![https://res.cloudinary.com/cdemo/image/upload/v1583425593/_mmm/opensource.png](https://res.cloudinary.com/cdemo/image/upload/v1583425593/_mmm/opensource.png)
*Second baseline image: [https://res.cloudinary.com/cdemo/image/upload/v1583425593/_mmm/opensource.png](https://res.cloudinary.com/cdemo/image/upload/v1583425593/_mmm/opensource.png)*

![https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M20IBZjSKi3H-QWhH0k%2F-M20INA5qY9pN65N3TTr%2Fopensource.png?alt=media&token=a1cb54af-b101-4b98-84b2-66d67043a3c0](https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M20IBZjSKi3H-QWhH0k%2F-M20INA5qY9pN65N3TTr%2Fopensource.png?alt=media&token=a1cb54af-b101-4b98-84b2-66d67043a3c0)
*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:

1. `upload` is replaced with `fetch`.
2. 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](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](https://cloudinary.com/cookbook/custom_shapes_cropping) and [Vintage Photos](https://cloudinary.com/cookbook/turn_your_pictures_in_to_old_photographs)***

![https://res.cloudinary.com/cdemo/image/upload/_mmm/edencartoon.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/edencartoon.jpg)
*First baseline image: [https://res.cloudinary.com/cdemo/image/upload/_mmm/edencartoon.jpg](https://res.cloudinary.com/cdemo/image/upload/_mmm/edencartoon.jpg)*

![https://res.cloudinary.com/cdemo/image/upload/v1583824361/_mmm/roughtornmaterial.png](https://res.cloudinary.com/cdemo/image/upload/v1583824361/_mmm/roughtornmaterial.png)
*Second baseline image: [https://res.cloudinary.com/cdemo/image/upload/v1583824361/_mmm/roughtornmaterial.png](https://res.cloudinary.com/cdemo/image/upload/v1583824361/_mmm/roughtornmaterial.png)*

![https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M22Dy3p4LxqFnqvHnM0%2F-M22LY7qPmeUPnLJEU9s%2Fedencartoontransform.jpg?alt=media&token=ff7c63f0-d639-4489-aa0f-a5566a816eb5](https://gblobscdn.gitbook.com/assets%2F-M1J0YPWDmPTjECch_HO%2F-M22Dy3p4LxqFnqvHnM0%2F-M22LY7qPmeUPnLJEU9s%2Fedencartoontransform.jpg?alt=media&token=ff7c63f0-d639-4489-aa0f-a5566a816eb5)
*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](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. 🚀🚀