cloudinary/js-url-gen

Text wrapping in text overlay

manurana opened this issue · 7 comments

manurana commented

Hey folks
I am referring to this particular article from the cloudinary blog
I am trying to replicate this functionality in this nextgen SDK. I can do the overlay, but cannot figure out how to make the text lines wrap
Would love some pointers.

Code that I am using 
function profilePictureWithText({
  width,
  height,
  textString,
  font = 'poppins',
  fontSize,
}: ProfilePictureWithTextTransformationPropsType): ImageTransformation {
  return (
    new ImageTransformation()
      .resize(
        thumbnail()
          .width(width)
          .height(height)
          .gravity(focusOn(face()))
          .zoom(0.6)
      )
      .backgroundColor(Color.BLACK)
      .effect(gradientFade().verticalStartPoint(-0.5))
      // .overlay(source(text('My Long and aweson Text', 'montserrat_24')))
      .overlay(
        source(
          text(
            textString,
            new TextStyle(font, fontSize).textAlignment('center').lineSpacing(2)
          ).textColor(Color.WHITE)
        ).position(
          new Position()
            .gravity(compass(south()))
            .offsetY(30)
            .allowOverflow(false)
        )
      )
      .delivery(defaultImage('brooke-cagle-LCcFI_26diA-unsplash_a1xohb.jpg'))
      // .delivery(format(autoFormat())) // was not working on responsively app
      .delivery(quality(autoQuality()))
  );
}
dannyv-cloudinary commented

Hi Manu.

You should be able to get the lines to wrap by applying the "fill" cropping method to the text element. Could you please give that a try and let me know how you get on?

Thanks,
-Danny @ Cloudinary

manurana commented

Hey @dannyv-cloudinary !
Thats what I cannot figure out ..
How to apply that in the new V2 paradigm.
My code is referenced above, can you give me a pointed on how to do it ?

Here is something I tried, but it just reduced the size of the text overlay as a whole

.overlay(
        source(
          text(
            'textString asdfas asdfasdf',
            new TextStyle(font, fontSize).textAlignment('center').lineSpacing(2)
          )
            .transformation(new Transformation().resize(fill().width(100))) // THIS
            .textColor(Color.WHITE)

Appreciate the help.

patrick-tolosa commented

Hey @manurana - Thanks for bringing this up.
This feature is indeed not yet implemented, but it's on the roadmap for the nextgen/v2 SDK.
the future implementation would probably look something like this:

// Work in progress
new TextStyle(...).textFit(TextFit.dimensions(100, 200))

For now, every Transformation instance has an escape hatch function that can be used to create things that are not yet implemented, for example:

// For a single key/value pair
new ImageTransformation().addAction('key_value');
// For complete examples, such as this one
new ImageTransformation().addTransformation('c_fit,l_text....');

This does require you to concatenate all the strings yourself instead of using our available objects.
However, the SDK can do most of the heavy lifting for you:

    const mySourceTX = source(
      text(
        'some text',
        new TextStyle('arial', 10)
          .textAlignment('center')
          .lineSpacing(2)
      )
        .textColor('white') // It's recommended to use string instead of Color (For tree shaking purposes)
    ).position(
      new Position()
        .gravity(compass(south()))
        .offsetY(30)
        .allowOverflow(false)
    );
    const yourImage = new ImageTransformation().addTransformation(`c_fit,${mySourceTX.toString()}`);

Once we release this new feature this workaround will no longer be needed.
Please let us know if this addresses your usecase.

manurana commented

Hi @patrick-tolosa
Thanks for the detailed explanation, and an insight into the roadmap

Unfortunately, I am still not able to figure out how to use this with an overlay. And this may completely be due to my inability to grasp the new paradigms here.

Here is something I tried

function profilePictureWithText({
  width,
  height,
  textString,
  font = 'poppins',
  fontSize,
}: ProfilePictureWithTextTransformationPropsType): ImageTransformation {
  const textSource = source(
    text(
      'textString which is long',
      new TextStyle(font, fontSize).textAlignment('center').lineSpacing(2)
    ).textColor('white')
  ).position(
    new Position().gravity(compass(south())).offsetY(30).allowOverflow(false)
  );

  const wrappedText = new ImageTransformation().addTransformation(
    `c_fit,${textSource.toString()}`
  );

  return (
    new ImageTransformation()
      .resize(
        thumbnail()
          .width(width)
          .height(height)
          .gravity(focusOn(face()))
          .zoom(0.6)
      )
      .backgroundColor('black')
      .effect(gradientFade().verticalStartPoint(-0.5))

      .overlay() // HOW DO I PUT THE WRAPPED TEXT IN AN OVERLAY ON MY ORIGINAL IMAGE

      .delivery(defaultImage('brooke-cagle-LCcFI_26diA-unsplash_a1xohb.jpg'))
      // .delivery(format(autoFormat())) // was not working on responsively app
      .delivery(quality(autoQuality()))
  );
}
patrick-tolosa commented

Hey @manurana ,

I'm sharing a complete example here:

    const preCalculatedSource = source(
      text('Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', (new TextStyle('Neucha', 16))
        .textAlignment(TextAlignment.center()))
        .transformation((new ImageTransformation())
          .rotate(byAngle(9))
        ))
      .position((new Position())
        .gravity(compass(north()))
        .offsetX(0).offsetY(54)
      );

    const img = new CloudinaryImage('envelope.jpg')
      .setCloudConfig({cloudName:'demo'})
      .resize(scale().width(300))
      .delivery(format(Format.auto()))
      .delivery(quality(auto()))
      .addTransformation(`w_200,c_fit,${preCalculatedSource.toString()}`);
    
    console.log(img.toURL());

this generates the following URL:

https://res.cloudinary.com/demo/image/upload/c_scale,w_300/f_auto/q_auto/w_200,c_fit,l_text:Neucha_16_center:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat./a_9/fl_layer_apply,g_north,x_0,y_54/envelope.jpg?_a=ATAABAA0

As you can see I'm using the addTransformation to manually add c_fit and w_200.

I'm not sure this is a problem with either the paradigm or yourself, as it seems you've stumbled into an unimplemented feature(yet) which makes this more difficult than it should be.

(considering that you should just have a working, copy-paste example available to you once we officially move out of beta.
In any case I hope this gives you some direction as to how you can move forward.

  • 👍1
manurana commented

Muchos gracias @patrick-tolosa
I think I was missing the concept of applying this as two separate transformations!
I was trying to put all this in one pre-defined transformation function.

Works!

patrick-tolosa commented

De nada!

Once this feature is officially released the code examples available would much simpler to follow.
Consider the example given as a chance to see how you can use composition to build your transformation :)