Image Merge Tags Modifier

When using Merge Tags for choice fields (types: radio or checkbox), you can use the image modifier to output the image or icon selected for the choices. You can add this modifier to your field’s merge tag by adding :image inside it, after the field id.

Usage example:

{My Checkbox Field:2:image}

Customizing the Size of Merge Tag Image/Icon

You may also specify the size in the modifier separated with a period.

Example: {My Checkbox Field:2:image.size}

The possible values for size are:

  • small
  • medium
  • large
  • any number (for a custom size)

Consider the following example:

{My Checkbox Field:2:image.small}

The above will constrict the size of the image to a small size, the advantage of using small, medium or large instead of a custom size is, that you can customize these sizes with CSS, if you want. You will have these classes available, which can be overridden.

Using a Custom Size

If you want to use a custom size for the image or icon, you can substitute a number for the value of size. For example, if you want the image or icon to be restricted to 50px of size, simply add 50 for size, as presented in the example below.

{My Checkbox Field:2:image.50}

Notes

  • If you’re new to using Merge Tags, please see the guide from Gravity Forms.
  • Images are not resized to a smaller size, they’re simply shown smaller using CSS.

4 thoughts on “Image Merge Tags Modifier

  1. Warplord, Im trying to add merge tag images to HTML field .. but it does not show image . but when i’m changing it to value ( field:xx:value) it works just fine. how does it work?

    1. HI Kevin,
      Do you have text in your labels? Could you please send me a link to to your form in a ticket so I can have a look at it?

        1. Hi Kevin, you’re suppose to use the image modifier (as shown in the examples in this article) for images to show. {Label:ID:image}

Share your thoughts. We're all ears.

Your email address will not be published. Required fields are marked *