I try to build my opengraph images with Cloudinary, with a few transformations to add text.
This is what I tried to do:
https://res.cloudinary.com/nho/image/fetch/e_blur:2000,c_crop,ar_1200:630,b_white/e_grayscale/w_1200/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNy8xMC9jaHJvbWUtZW1vamktMTI4cHgtbWF4LnBuZw==,h_1.0,w_1.0,fl_relative,c_limit/b_rgb:3d2e68,o_40/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_42,y_43,co_black,o_50/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_41,y_42,co_black,o_75/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_40,y_40,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL3Bob3RvLWRlLW5pY29sYXMtaG9pemV5LmpwZw==,g_south_west,x_40,y_40,c_fill,w_60,r_max/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_112,y_40,co_black/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_111,y_41,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL2xvZ29zL3R3aXR0ZXIucG5n,g_south_east,x_220,y_40,c_fill,w_50,r_max/l_text:georgia_50:nhoizey,g_south_east,x_40,y_40,co_black/l_text:georgia_50:nhoizey,g_south_east,x_41,y_41,co_white/https://nicolas-hoizey.com/2017/10/chrome-emoji-128px-max.png
I know the syntax is good, but I get a 400 Bad Request error.
If I remove the last transformation (/l_text:georgia_50:nhoizey,g_south_east,x_41,y_41,co_white
) that adds text, it works:
https://res.cloudinary.com/nho/image/fetch/e_blur:2000,c_crop,ar_1200:630,b_white/e_grayscale/w_1200/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNy8xMC9jaHJvbWUtZW1vamktMTI4cHgtbWF4LnBuZw==,h_1.0,w_1.0,fl_relative,c_limit/b_rgb:3d2e68,o_40/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_42,y_43,co_black,o_50/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_41,y_42,co_black,o_75/w_1120,c_fit,l_text:georgia_80:Chrome%20fails%20showing%20big%20emojis,g_north_west,x_40,y_40,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL3Bob3RvLWRlLW5pY29sYXMtaG9pemV5LmpwZw==,g_south_west,x_40,y_40,c_fill,w_60,r_max/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_112,y_40,co_black/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_111,y_41,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL2xvZ29zL3R3aXR0ZXIucG5n,g_south_east,x_220,y_40,c_fill,w_50,r_max/l_text:georgia_50:nhoizey,g_south_east,x_40,y_40,co_black/https://nicolas-hoizey.com/2017/10/chrome-emoji-128px-max.png
Does it mean I stacked too much transformations in one single URL?
UPDATE:
I later tried to reduce the length of the first text (added 3 times to create a shadow), from Chrome%20fails%20showing%20big%20emojis
to Chrome%20fails
, and it worked too:
https://res.cloudinary.com/nho/image/fetch/e_blur:2000,c_crop,ar_1200:630,b_white/e_grayscale/w_1200/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vMjAxNy8xMC9jaHJvbWUtZW1vamktMTI4cHgtbWF4LnBuZw==,h_1.0,w_1.0,fl_relative,c_limit/b_rgb:3d2e68,o_40/w_1120,c_fit,l_text:georgia_80:Chrome%20fails,g_north_west,x_42,y_43,co_black,o_50/w_1120,c_fit,l_text:georgia_80:Chrome%20fails,g_north_west,x_41,y_42,co_black,o_75/w_1120,c_fit,l_text:georgia_80:Chrome%20fails,g_north_west,x_40,y_40,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL3Bob3RvLWRlLW5pY29sYXMtaG9pemV5LmpwZw==,g_south_west,x_40,y_40,c_fill,w_60,r_max/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_112,y_40,co_black/l_text:georgia_50:nicolas-hoizey.com,g_south_west,x_111,y_41,co_white/l_fetch:aHR0cHM6Ly9uaWNvbGFzLWhvaXpleS5jb20vYXNzZXRzL2xvZ29zL3R3aXR0ZXIucG5n,g_south_east,x_220,y_40,c_fill,w_50,r_max/l_text:georgia_50:nhoizey,g_south_east,x_40,y_40,co_black/l_text:georgia_50:nhoizey,g_south_east,x_41,y_41,co_white/https://nicolas-hoizey.com/2017/10/chrome-emoji-128px-max.png
So I suspect the URL length might be the issue.