Text overlay with JS SDK v2

Manu

September 03, 2021 12:31 Edited

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

Here is the code that I currently have

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()))
);
}

 

0

• 

  Victor Li

  September 08, 2021 01:51

  Hi there,

  Along with the other transformations within the overlaid text portion of your code, you must specify a width for the text to fit and wrap within, as well as specify the crop mode is "fit". Could you give that a try? 

  If that doesn't work, do you have a sample URL for an asset that demonstrates this doesn't work?

  Regards,
  Victor

  0

Post is closed for comments.