Cloudinary Blog

Automatically Generating Conference Tags

Automatically Generating Conference Tags

Nowadays, community managers and developer teams in organizations around the world routinely set up local and international conferences, physical or remote. Those meetups not only empower attendees with the latest information regarding the conference themes, but also provide a great opportunity for the organizers to showcase and advocate their products and services.

As a result, thousands of conferences are constantly taking place across the globe. One problem that the organizers must grapple with is the need to generate attendee tags, complete with images and names, for hundreds or even thousands of participants spread all over the world given the enormity of the issue, most organizers simply skip that step. Here comes the good news: with Cloudinary, you don’t have to skip it any more.

This tutorial shows you how Cloudinary enables you to automatically generate conference tags on the fly as attendees register by overlaying their pictures and names on their tags. The best part is that the entire process takes place on the browser by simply transform image URLs there—with no coding whatsoever.

Webinar
How to Optimize for Page Load Speed

A major use case for that feature is the Concatenate conference-registration site, which uses the Cloudinary image-overlay feature to generate tags for over 1,000 conference attendees. Here’s a sample:

Concatenate

As soon as you upload your attendees’ images and specify their names on Concatenate on the browser, Cloudinary overlays them on the attendee tags. Read on for the details of the steps involved.

Image Uploads

First, upload all the attendees’ images to Cloudinary by embedding the Cloudinary upload widget in the registration site for your conference. That way, they will have unique public IDs assigned by Cloudinary. You can then access and transform them through the IDs.

Each file uploaded image is in the form of a URL in this format:

Copy to clipboard
https://res.cloudinary.com/*cloud-name*/image/upload/v1531317427/*publicID*.png`

In the link above, replace cloud-name with the one in your Cloudinary console and publicID with that of the image you uploaded. The attendee’s avatar then looks like this:

Ruby:
Copy to clipboard
cl_image_tag("attendee_avatar.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("attendee_avatar.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('attendee_avatar.jpg'));
Python:
Copy to clipboard
CloudinaryImage("attendee_avatar.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("attendee_avatar.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("attendee_avatar.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('attendee_avatar.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("attendee_avatar.jpg")
React:
Copy to clipboard
<Image publicId="attendee_avatar.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="attendee_avatar.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="attendee_avatar.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("attendee_avatar.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("attendee_avatar.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("attendee_avatar.jpg")!, cloudinary: cloudinary)
Attendee Avatar

Image Transformation

You can now start transformation the uploaded images as you see fit. With Cloudinary, you can transform them directly from their URLs by adding the required properties. Say, you want to overlay an avatar on the base image of a conference tag, which serves as the background. Once you have uploaded the related image, the API call returns a Hash with the image details, such as the URL, public ID, and so forth.

Avatar Overlays

To overlay an avatar on the base image, add the overlay parameter (l in URLs) and the public ID of a previously uploaded image. For example, if you have a previously uploaded image with the public ID conference_tag

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png")
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png")
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image()
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png")
React:
Copy to clipboard
<Image publicId="conference_tag.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("conference_tag.png")!, cloudinary: cloudinary)
Conference Tag

—and you want to overlay the following uploaded avatar with the public ID attendee_avatar on the base image (the conference tag above):

Ruby:
Copy to clipboard
cl_image_tag("attendee_avatar.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("attendee_avatar.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('attendee_avatar.jpg'));
Python:
Copy to clipboard
CloudinaryImage("attendee_avatar.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("attendee_avatar.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("attendee_avatar.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('attendee_avatar.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("attendee_avatar.jpg")
React:
Copy to clipboard
<Image publicId="attendee_avatar.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="attendee_avatar.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="attendee_avatar.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("attendee_avatar.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("attendee_avatar.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("attendee_avatar.jpg")!, cloudinary: cloudinary)
attendee avatar

Edit the URL to overlay the avatar on the tag with the l_ parameter, like this:

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png", :overlay=>"attendee_avatar")
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png", array("overlay"=>"attendee_avatar"))
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'))
  ->overlay(Overlay::source(Source::image('attendee_avatar')));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image(overlay="attendee_avatar")
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png", {overlay: "attendee_avatar"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("attendee_avatar"))).imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png', {overlay: new cloudinary.Layer().publicId("attendee_avatar")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png", {overlay: new cloudinary.Layer().publicId("attendee_avatar")})
React:
Copy to clipboard
<Image publicId="conference_tag.png" >
  <Transformation overlay="attendee_avatar" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >
  <cld-transformation :overlay="attendee_avatar" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >
  <cl-transformation overlay="attendee_avatar">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("attendee_avatar"))).BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("attendee_avatar"))).generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("attendee_avatar")).generate("conference_tag.png")!, cloudinary: cloudinary)
Conference Tag

You’ve now overlaid the avatar on the base image. However, the avatar spans across the entire width of the image, which looks odd. To fix that issue, transform the overlay, as explained in the next section.

Overlay Transformations

You can resize an overlay and transform it just like any other image that’s been uploaded to Cloudinary. For example, to appropriately scale an avatar overlay to fit the desired placeholder size, edit the URL to further define the parameters for the overlay, for example, assign it a radius of 100 pixels (for a circular image), a width of 120 pixels, and x/y coordinates of 6 and 24, respectively, like this:

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png", :overlay=>"attendee_avatar", :radius=>100, :width=>120, :x=>6, :y=>24)
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png", array("overlay"=>"attendee_avatar", "radius"=>100, "width"=>120, "x"=>6, "y"=>24))
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'))
  ->overlay(
      Overlay::source(Source::image('attendee_avatar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(120))
          ->roundCorners(RoundCorners::byRadius(100))))
      ->position((new Position())
        ->offsetX(6)->offsetY(24)
  ));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image(overlay="attendee_avatar", radius=100, width=120, x=6, y=24)
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png", {overlay: "attendee_avatar", radius: 100, width: 120, x: 6, y: 24})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24)).imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png', {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png", {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24})
React:
Copy to clipboard
<Image publicId="conference_tag.png" >
  <Transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >
  <cld-transformation :overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >
  <cl-transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("attendee_avatar")).Radius(100).Width(120).X(6).Y(24)).BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24)).generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("attendee_avatar").setRadius(100).setWidth(120).setX(6).setY(24)).generate("conference_tag.png")!, cloudinary: cloudinary)
Resized image

Note
If the public ID of an image includes a folder component, e.g., the public ID of an image is images/avatar, replace the slash with a colon when transforming the image as an overlay. In this case, change the public ID image to images:avatar.

Isn’t it amazing how you can do all that just by tweaking the URL? The next section shows you how to overlay the name of the attendee on the image.

Addition of Text Captions

With Cloudinary, you can add a text caption on a base image with the text: property of the overlay parameter ( l_text: in URLs). The parameter also requires styling parameters, such as font family and size (separated with an underscore and followed by a colon), and the text string to display. For example, to overlay the text string Christian in Arial font with a size of 18 pixels, update the image URL to read like this:

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png", :transformation=>[
  {:overlay=>"attendee_avatar", :radius=>100, :width=>120, :x=>6, :y=>24},
  {:overlay=>{:font_family=>"Arial", :font_size=>18, :text=>"Christian"}}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png", array("transformation"=>array(
  array("overlay"=>"attendee_avatar", "radius"=>100, "width"=>120, "x"=>6, "y"=>24),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>18, "text"=>"Christian"))
  )))
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'))
  ->overlay(
      Overlay::source(Source::image('attendee_avatar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(120))
          ->roundCorners(RoundCorners::byRadius(100))))
      ->position((new Position())
        ->offsetX(6)->offsetY(24)))
    ->overlay(Overlay::source(Source::text('Christian', (new TextStyle('Arial', 18)))));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image(transformation=[
  {'overlay': "attendee_avatar", 'radius': 100, 'width': 120, 'x': 6, 'y': 24},
  {'overlay': {'font_family': "Arial", 'font_size': 18, 'text': "Christian"}}
  ])
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png", {transformation: [
  {overlay: "attendee_avatar", radius: 100, width: 120, x: 6, y: 24},
  {overlay: {font_family: "Arial", font_size: 18, text: "Christian"}}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian"))).imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png', {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png", {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian")}
  ]})
React:
Copy to clipboard
<Image publicId="conference_tag.png" >
  <Transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text: "Christian"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >
  <cld-transformation :overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 18, text: 'Christian'}" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >
  <cl-transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_18:Christian">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("attendee_avatar")).Radius(100).Width(120).X(6).Y(24).Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(18).Text("Christian"))).BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian"))).generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("attendee_avatar").setRadius(100).setWidth(120).setX(6).setY(24).chain()
  .setOverlay("text:Arial_18:Christian")).generate("conference_tag.png")!, cloudinary: cloudinary)
Text captions

Cloudinary then automatically overlays the name Christian on the image. However, the name now obscures part of the attendee’s picture. See the next section for how to reposition the name.

Text Transformation

Just like it does with images, Cloudinary supports numerous styling parameters, which enable you to transform text however you wish. Not only can you change the font, but also resize, reposition, recolor, and even underline text on the fly.

To have the name Christian appear on the placeholder, add the vertical coordinate parameter y_120 to the URL. The tag now looks like this:

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png", :transformation=>[
  {:overlay=>"attendee_avatar", :radius=>100, :width=>120, :x=>6, :y=>24},
  {:overlay=>{:font_family=>"Arial", :font_size=>18, :text=>"Christian"}, :y=>120}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png", array("transformation"=>array(
  array("overlay"=>"attendee_avatar", "radius"=>100, "width"=>120, "x"=>6, "y"=>24),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>18, "text"=>"Christian"), "y"=>120)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'))
  ->overlay(
      Overlay::source(Source::image('attendee_avatar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(120))
          ->roundCorners(RoundCorners::byRadius(100))))
      ->position((new Position())
        ->offsetX(6)->offsetY(24)))
    ->overlay(Overlay::source(Source::text('Christian', (new TextStyle('Arial', 18))))
      ->position((new Position())
        ->offsetY(120)
  ));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image(transformation=[
  {'overlay': "attendee_avatar", 'radius': 100, 'width': 120, 'x': 6, 'y': 24},
  {'overlay': {'font_family': "Arial", 'font_size': 18, 'text': "Christian"}, 'y': 120}
  ])
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png", {transformation: [
  {overlay: "attendee_avatar", radius: 100, width: 120, x: 6, y: 24},
  {overlay: {font_family: "Arial", font_size: 18, text: "Christian"}, y: 120}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian")).y(120)).imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png', {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian"), y: 120}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png", {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian"), y: 120}
  ]})
React:
Copy to clipboard
<Image publicId="conference_tag.png" >
  <Transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text: "Christian"}} y="120" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >
  <cld-transformation :overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 18, text: 'Christian'}" y="120" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >
  <cl-transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_18:Christian" y="120">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("attendee_avatar")).Radius(100).Width(120).X(6).Y(24).Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(18).Text("Christian")).Y(120)).BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian")).y(120)).generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("attendee_avatar").setRadius(100).setWidth(120).setX(6).setY(24).chain()
  .setOverlay("text:Arial_18:Christian").setY(120)).generate("conference_tag.png")!, cloudinary: cloudinary)
Text Manipulation

For text strings that contain special characters, modify (escape) them for use with the text overlay feature. Do that for any special characters that are not allowed in a valid URL path and for other special unicode characters.

To ensure that those text strings are valid, escape them with %-based encoding. For example, replace ? with %3F and add %20 for spacing between words. This encoding occurs automatically when you embed images with the Cloudinary SDK helper methods. However, you must manually add it to an image’s delivery URL.

As an example, to change the name Christian to Christian Nwamba, add %20 between the two words:

Ruby:
Copy to clipboard
cl_image_tag("conference_tag.png", :transformation=>[
  {:overlay=>"attendee_avatar", :radius=>100, :width=>120, :x=>6, :y=>24},
  {:overlay=>{:font_family=>"Arial", :font_size=>18, :text=>"Christian%20Nwamba"}, :y=>120}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("conference_tag.png", array("transformation"=>array(
  array("overlay"=>"attendee_avatar", "radius"=>100, "width"=>120, "x"=>6, "y"=>24),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>18, "text"=>"Christian%20Nwamba"), "y"=>120)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('conference_tag.png'))
  ->overlay(
      Overlay::source(Source::image('attendee_avatar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(120))
          ->roundCorners(RoundCorners::byRadius(100))))
      ->position((new Position())
        ->offsetX(6)->offsetY(24)))
    ->overlay(Overlay::source(Source::text('Christian Nwamba', (new TextStyle('Arial', 18))))
      ->position((new Position())
        ->offsetY(120)
  ));
Python:
Copy to clipboard
CloudinaryImage("conference_tag.png").image(transformation=[
  {'overlay': "attendee_avatar", 'radius': 100, 'width': 120, 'x': 6, 'y': 24},
  {'overlay': {'font_family': "Arial", 'font_size': 18, 'text': "Christian%20Nwamba"}, 'y': 120}
  ])
Node.js:
Copy to clipboard
cloudinary.image("conference_tag.png", {transformation: [
  {overlay: "attendee_avatar", radius: 100, width: 120, x: 6, y: 24},
  {overlay: {font_family: "Arial", font_size: 18, text: "Christian%20Nwamba"}, y: 120}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian%20Nwamba")).y(120)).imageTag("conference_tag.png");
JS:
Copy to clipboard
cloudinary.imageTag('conference_tag.png', {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian%20Nwamba"), y: 120}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("conference_tag.png", {transformation: [
  {overlay: new cloudinary.Layer().publicId("attendee_avatar"), radius: 100, width: 120, x: 6, y: 24},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(18).text("Christian%20Nwamba"), y: 120}
  ]})
React:
Copy to clipboard
<Image publicId="conference_tag.png" >
  <Transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 18, text: "Christian%20Nwamba"}} y="120" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="conference_tag.png" >
  <cld-transformation :overlay="attendee_avatar" radius="100" width="120" x="6" y="24" />
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 18, text: 'Christian%20Nwamba'}" y="120" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="conference_tag.png" >
  <cl-transformation overlay="attendee_avatar" radius="100" width="120" x="6" y="24">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_18:Christian%20Nwamba" y="120">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("attendee_avatar")).Radius(100).Width(120).X(6).Y(24).Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(18).Text("Christian%20Nwamba")).Y(120)).BuildImageTag("conference_tag.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("attendee_avatar")).radius(100).width(120).x(6).y(24).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(18).text("Christian%20Nwamba")).y(120)).generate("conference_tag.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("attendee_avatar").setRadius(100).setWidth(120).setX(6).setY(24).chain()
  .setOverlay("text:Arial_18:Christian%20Nwamba").setY(120)).generate("conference_tag.png")!, cloudinary: cloudinary)
Text size

There! This attendee tag is now ready for use.

Summary

To recap, all you need to do to dynamically generate attendee tags for conferences is predefine the desired positions of the avatars and their related text (such as the attendees’ first and last names) on the tags. Cloudinary's product customization takes over from there and passes the URLs appropriately with the correct public IDs.

By following the simple procedure in this tutorial,,you can generate thousands of conference tags in minimal time. The possibilities and applications of this feature are endless. Keep exploring to build whatever product for which the feature might be of help. To learn about other awesome features, visit our solutions page.

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more