1+ https://res.cloudinary.com/elukas/image/upload/
2+ ###
3+ # User-Definable Variables
4+ # All the values are relative to the fixed postcard dimension: 2560 x 3755 px
5+ ###
6+ $city_!MEXICO%0ACITY!, # Name of the City/Destination
7+ $pos_!bottom!, # Position of the city text: top/bottom
8+ $belo_!demo:airbnb:BeloIcon!, # Belo Icon's Public ID, if empty don't show
9+ $belopos_!right!, # Bélo Icon position is opposite of $pos and left/right
10+ $foil_!true!, # If true, it will do the cut-out of the city text
11+ $co_!rgb:fefefe!, # Color of the text
12+ $lrpad_205, # Left & right padding of the text bounding box
13+ $tbpad_171, # Top or bottom padding of the text bounding box
14+ $radius_205, # Radius of the postcard
15+ $whbelo_171, # Width & Height of Bélo Icon
16+ $xybelo_120, # X & Y Coordinates/Padding of Bélo
17+ $cobelo_!ee3d0c!, # Color of the Bélo Icon
18+ $shdwco_!000000!, # Color of the shadow of the text
19+ $shdwstrength_1, # Strength/bluriness of the shadow of the text
20+ $shdwx_0, # X coordinate of the shadow in relevant to the text
21+ $shdwy_67, # Y coordinate of the shadow in relevant to the text
22+ $shdwo_20, # Shadow Opacity
23+ $finalw_600/ # Final Width
24+
25+ ###
26+ # Captures important variables
27+ ###
28+ $w_iw, # Initial Width
29+ $h_ih, # Initial Height
30+ $resizeratio_$finalw_div_$w, # Resize Ratio
31+ $wtext_$w_sub_$lrpad_sub_$lrpad, # Width of text bounding box after padding
32+ $htext_$h_div_3_sub_$tbpad/ # Height of text bounding box: a third of postcard height after padding
33+
34+ ###
35+ # Calculates final values based on given final width
36+ ###
37+ $flrpad_$resizeratio_mul_$lrpad, # Final Left & Right Padding
38+ $ftbpad_$resizeratio_mul_$tbpad, # Final Top or Bottom Padding
39+ $fradius_$resizeratio_mul_$radius,# Final Radius
40+ $fwhbelo_$resizeratio_mul_$whbelo,# Final Width & Height of Bélo Icon
41+ $fxybelo_$resizeratio_mul_$xybelo,# Final X & Y Coordinates/Padding of Bélo
42+ $fwtext_$resizeratio_mul_$wtext, # Final Width of text bounding box after padding
43+ $fhtext_$resizeratio_mul_$htext/ # Final Height of text bounding box
44+
45+ ###
46+ # Calculates final shadow values
47+ ###
48+ $fshdwx_$resizeratio_mul_$shdwx, # Final X coordinate of the shadow in relevant to the text
49+ $fshdwy_$resizeratio_mul_$shdwy, # Final Y coordinate of the shadow in relevant to the text
50+ $fshdwstrength_$shdwstrength_mul_2000_mul_$resizeratio/
51+ $fshdwstrength_$fshdwstrength_to_i/
52+ # Final Shadow Strength: 2000 is the max value Cloudinary can accept & convert it to Integer
53+
54+ ###
55+ # Immediately reduce the canvas to final dimensions
56+ # This approach is for performance reason, always try working on smaller canvas/buffer
57+ ###
58+ w_$finalw, # Resize to Final Width
59+ r_$fradius/ # Apply Radius
60+
61+ ###
62+ # Create text buffer for the city
63+ # Builds the supporting variables to be re-used for shadow
64+ ###
65+ l_text: # Text overlay starts
66+ Rubik_ # Font family
67+ 999_ # Font size in pixels
68+ alignment_center_ # Text alignment for multi-lines
69+ weight_900_ # Font weight
70+ letter_spacing_-20_ # Letter spacing in pixels, relative to default spacing
71+ line_spacing_-150: # Line spacing/height in pixels, relative to default spacing
72+ $(city), # City Text
73+ co_$co, # Font color
74+ w_$fwtext,h_$fhtext,c_limit/# Set text as big as possible with given bounding box
75+ $txtl_current, # Save current image (city text) buffer as $txtl (Text Layer)
76+ $txtlh_h/ # Save current buffer's height to $txtlh (Text Layer Height)
77+ o_0, # Make it disappear, because it needs to be repositioned along with the shadow
78+ fl_layer_apply/ # Close the layer
79+
80+ ###
81+ # Create shadow buffer from text buffer
82+ # Our overlay tends to cut off the shadows causing a weird hard line on the shadow
83+ ###
84+ l_$txtl/ # Overlay from buffer
85+ e_replace_color:$shdwco/ # Change color
86+ e_blur:$fshdwstrength, # Using e_blur instead of e_shadow to support color and opacity
87+ c_lpad,w_$finalw,h_$fhtext/ # Resize to final dimension
88+ if_$city_ne_!%20!,e_trim:0/ # Trim it without removing/cut-off the shadow on weird location (and only trim if it's a non-empty string)
89+ $shdwl_current, # Save current shadow buffer as $shdwl (Shadow Layer)
90+ $shdwlh_h/ # Save current shadow's height to $shdwlh (Shadow Layer Height)
91+ o_0, # Make it disappear, because it needs to be repositioned along with the text
92+ fl_layer_apply/ # Close the layer
93+
94+ ###
95+ # Calculate half-height difference between text buffer and shadow buffer
96+ ###
97+ $deltah_$shdwlh_sub_$txtlh/$deltah_$deltah_div_2/
98+
99+ ###
100+ # Calculates X & Y for Text & Bélo Layers
101+ # X,Y Coordinates need to be calculated since x/y behaves inwards for positive value and outwards for negative value
102+ # Break it to 2 IFs, since we don't support nested-IFs
103+ ###
104+ # Y-Axis
105+ if_$pos_eq_!top!/ # If Top Position
106+ $ftxty_$ftbpad/
107+ $ffshdwy_$ftbpad_sub_$deltah_add_$fshdwy/
108+ $fbeloy_h_sub_$fwhbelo_sub_$fxybelo/
109+ if_else/ # Else Bottom Position
110+ $ftxty_h_sub_$txtlh_sub_$ftbpad/
111+ $ffshdwy_h_sub_$txtlh_sub_$ftbpad_sub_$deltah_add_$fshdwy/
112+ $fbeloy_$fxybelo/
113+ if_end/
114+
115+ # X-Axis
116+ if_$belopos_eq_!left!/ # If Bélo Left Position
117+ $fbelox_$fxybelo/
118+ if_else/ # Else Bélo Right Position
119+ $fbelox_w_sub_$fwhbelo_sub_$fxybelo/
120+ if_end/
121+
122+ ###
123+ # Shadow Overlay
124+ # First so it can be underneath the city text
125+ # Separate layer for shadow and city text, so it can punch-out/cut-out city text layer but not shadow layer
126+ ###
127+ l_$shdwl/o_$shdwo,g_north,y_$ffshdwy,x_$fshdwx,fl_layer_apply.no_overflow/
128+
129+ ###
130+ # City Text Overlay
131+ # If Foil, punch it out! (make it transparent)
132+ # We don't support IF inside overlay, such as:
133+ # l_$txtl/if_$foil_eq_!true!/e_cut_out/if_end/g_north,y_$ftxty,fl_layer_apply/
134+ ###
135+ if_$foil_eq_!true!/
136+ l_$txtl/g_north,y_$ftxty,fl_layer_apply,e_cut_out/
137+ if_else/
138+ l_$txtl/g_north,y_$ftxty,fl_layer_apply/
139+ if_end/
140+
141+ ###
142+ # Bélo Overlay
143+ # Only show if it's not empty
144+ ###
145+ if_$belo_ne_!!_and_$foil_ne_!true!/
146+ l_$belo,w_$fwhbelo,e_replace_color:$cobelo/x_$fbelox,y_$fbeloy,g_north_west,fl_layer_apply/
147+ if_end/
148+ if_$belo_ne_!!_and_$foil_eq_!true!/
149+ l_$belo,w_$fwhbelo,e_replace_color:$cobelo/x_$fbelox,y_$fbeloy,g_north_west,e_cut_out,fl_layer_apply/
150+ if_end/
151+
152+ ###
153+ # Postcard Public ID
154+ ###
155+ demo/airbnb/Mexico%20City.png
0 commit comments