Test 1

Crop 300/300 with face in center

by Roni Feldsher

HTML

<html>

  <head>
    Cloudinary Derived Images
  </head>
  <div id="Sample">
    <!-- Crops the image to a square of 300x300 pixels and keeps the face in the center -->
    <img src="https://res.cloudinary.com/djxzmzhbc/image/upload/w_300,h_300,c_crop,g_face/v1551833887/woman.jpg">


    <!-- Text overlay transformation displaying name in blue fonts, positioned at the top right corner of the image -->
    <img src="https://res.cloudinary.com/djxzmzhbc/image/upload/l_text:Arial_100:SAILI,g_north_east,co_blue,y_30,x_30/my_public_image.jpg">
    
    <!--Upload Preset for semi-transparent watermark of CLoudinary logo to any images uploaded via the media library. -->
    <img src="https://res.cloudinary.com/djxzmzhbc/image/upload/v1552372789/357f007a76c96827b5909002a4c1942692f8ab30_b0000835.jpg">

    <!--Conditional transformation that overlays the text “faces detected” only if the image actually contains faces -->
    <img src="https://res.cloudinary.com/djxzmzhbc/image/upload/c_scale,w_400/if_faces_gte_1/l_text:Arial_30_bold:faces%20detected,g_north_east,co_green,y_5,x_5/if_else/l_text:Arial_30:No_Faces%20Detected,g_north_east,co_red,y_30,x_30/if_end/v1552373410/rainbow_7.jpg">

    
    <!--<!--Conditional transformation that overlays the text “ no faces detected”  if the image does not contains faces --> -->
    <img src="https://res.cloudinary.com/djxzmzhbc/image/upload/c_scale,w_400/if_faces_gte_1/l_text:Arial_50:Faces%20Detected,g_north_east,co_black,y_5,x_5/if_else/l_text:Arial_30_bold:no%20faces%20detected,g_north_east,co_black,y_30,x_30/if_end/v1552348090/Grand_Canyon.jpg">



  </div>

</html>