Is it possible to do a text name repeat based on variable length with one request?

Prasanna
Prasanna Member Posts: 8 ✭
edited December 2023 in Developer APIs


This is what we'd ultimately want to do. Repeating of a name, that's provided to us, either with one font or two fonts in a brick pattern.

Based on our research we're able to do this with Cloudinary if we first do an image upload (POST /image/text) with the input name and obtain the height and width as a result.

Then using the resulting height and width we'd construct a transformation request/url that overlays this text in a brick pattern like the two images above. (The background image would be a flat color that's also provided.)

With this approach it will be two requests. Since we'd need to know how big the text would look on the Cloudinary "canvas" before laying out the coordinates for each name in the pattern.

Our question is if this is possible to do this in just one request/transformation?

I'm still in the process of learning everything that Cloudinary provides, I could use all the help I could get!

Tagged:

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 123
    edited October 2023

    Hi there,

    It is possible to achieve this with a single URL, albeit a little bit long.

    Here's the URL: https://res.cloudinary.com/eyalkatzt/image/upload/$w_w,$h_h/l_1px,w_$w_mul_2,h_$h_mul_2/l_text:arial_40:INTERNAL%20USE%20ONLY,h_100,w_100,c_pad/h_h,w_w_mul_1.2,c_pad/fl_layer_apply.tiled/fl_layer_apply,a_-45/c_crop,w_$w,h_$h/sample.jpg

    T96w6LbGFwkME85YEjKMjA.jpeg


    Below is the transformation breakdown:

    JLsoRu7siLO6QZcQKaVHOw.png


    To simplify what the above transformation is doing, it creates a layer as a canvas double the size of the original (for later purpose to fill the gap due to rotation), and inside that layer, we can apply the text overlay and tiled it. Tiling allows you to repeat the text within that bounding box. Once that's done, rotates that tile 45 degree angle. And re-crop to original image.

    Let me know if there is any question on this.

    Regards,

    Tamara

  • sam0090
    sam0090 Member Posts: 1 ✭

    To achieve your goal of overlaying repeated text in a brick pattern on a background image using Cloudinary, ideally in a single transformation request, you can explore the following approach:

    1. https://res.cloudinary.com/<cloud_name>/image/upload/
      l_text:<your_text>:<font_settings>/
      g_north_west,x_<x>,y_<y>,w_<width>,h_<height>,c_fill/
      l_<public_id_of_background_image>/
      w_<width_of_background>,h_<height_of_background>,c_fill/
      co_<background_color>/
      r_3x2,fl_layer_apply/
      your_final_image.jpg
      • First, you would need to upload your background image and get its public ID.
      • Use the overlay parameter in Cloudinary to overlay text on the background image.
      • Use the repeat parameter to repeat the overlaid text in a pattern (e.g., brick pattern).
      • Adjust the gravity, x, and y parameters to position the text and repeat it in the desired pattern across the canvas.
      Here's a basic example of how you might construct the URL:
      • <cloud_name>: Your Cloudinary cloud name.
      • <your_text>: The text to overlay (replace spaces with %20).
      • <font_settings>: Font, size, color settings for the text.
      • <x>, <y>: Coordinates for positioning.
      • <width>, <height>: Dimensions of the text.
      • <public_id_of_background_image>: Public ID of your background image.
      • <width_of_background>, <height_of_background>: Dimensions of the background image.
      • <background_color>: Background color if necessary.
      • r_3x2: Repeat the text in a 3x2 grid pattern (adjust as needed).
      • fl_layer_apply: Apply the overlay text as a layer.
    2. Handling Dynamic Text Dimensions:
      If the dimensions of the text are dynamic and need to be determined before overlaying in the pattern, you might still need to make an initial request to Cloudinary to calculate these dimensions (POST /image/text endpoint). However, you can integrate this step into your application flow so that it feels like a seamless process.
    3. Optimization and Testing:
      Test and optimize the transformation parameters (such as font size, positioning, and pattern dimensions) to achieve the desired visual effect.

    While Cloudinary provides powerful capabilities for image transformations and overlays, complex operations like repeating text in a pattern may sometimes require more than one transformation request to achieve precisely. However, the example provided aims to consolidate your requirements into a single transformation URL, leveraging Cloudinary's capabilities effectively.

Categories