
Autogenerating images with ratings is a great way to add a fun and engaging element to your forms. As an addition to the existing star rating options, we are excited to introduce a new feature that allows you to use emojis as ratings in your forms.

## Rating with emojis

Emoji rating are a fun way to present a rating system in your forms. Instead of using traditional star ratings, you can now use emojis to represent different levels of satisfaction.

To use emoji ratings in your templates, choose **Rating** component option and then change the rating element from customizable star to emoji.

![Emoji rating component](/blog/emoji-rating-component.jpeg)

You can choose from a variety of emojis to represent different levels of satisfaction, such as happy faces, sad faces, or any other emoji that fits your brand or theme.

> You can also customize the emoji max rating by setting up the number of emojis you want to use and also adjust the size and style of the emojis to fit your design.

## Set rating during image generation

When you use the emoji rating component, you can set the rating during image generation. This means that you can automatically generate images with the selected emoji rating, making it easy to create visually appealing content for your forms.

For example, when we want to generate multiple food images with different with different spice levels, we can set the rating to 1-3 and use the chili emoji to represent the spice level. 

For that, I will use **Spreadsheet** plugin to generate a list of images based on my food card template. Here is how the data looks like:

![Spreadsheet data](/blog/emoji-rating-spreadsheet.jpeg)

> I set rating value for each food item (from 1 to 3) in the `rating.value` column.

Then, I go to **Plugins** and select **Spreadsheet**. I choose the **Food Card** template, upload the spreadsheet, and start image generation.

![Spreadsheet plugin ](/blog/emoji-rating-spreadsheet-plugin.mp4)

As you can see, the generated images now include the emoji rating based on the values set in the spreadsheet. This allows you to create a consistent and visually appealing representation of food items with their corresponding spice levels.

## Use cases

Emoji ratings can be used in various scenarios, such as:
- **Product reviews**: ⭐⭐⭐ Use emoji ratings to show customer satisfaction with your products
- **Movie ratings**: 🎬🎬🎬 Use emoji ratings to represent how much people enjoyed a movie
- **Food ratings**: 🌶️🌶️🌶️ Use emoji ratings to show how spicy or delicious a dish is
- **Service quality highlights**:  👍👍👍 Display how customers rate your service with visual emoji scores
- **Workout intensity**: 💪💪💪 Use emoji ratings to show how intense a workout is 
- **Fashion ratings**: 🔥🔥🔥 Use emoji ratings to show how stylish an outfit is
- **Game ratings**: 🎮🎮🎮 Use emoji ratings to show how much people enjoyed a game
- **Travel experience**: ✈️✈️✈️ Use emoji ratings to show how much people enjoyed their travel experience

## Conclusion

Emoji ratings are a fun and engaging way to present ratings in your forms. With the new feature in RenderForm, you can easily add emoji ratings to your templates and set the rating during image generation. This allows you to create visually appealing content that resonates with your audience.

Introducing: Emoji Rating


We are excited to announce a new update to RenderForm that will make it easier to manage your templates.
In this blog post, we will introduce you to the new template tags feature and show you how to use it to streamline your workflow.

## How to use tags

Tags are a powerful way to organize your templates and make them easier to find. You can use tags to categorize your templates by type, purpose, or any other criteria that makes sense for your workflow. For example, you could use tags like "onboarding," "feedback," or "marketing" to group your templates.

You can also use tags to filter your templates in the template library. This makes it easy to find the templates you need without having to scroll through a long list of options.

## Assigning tags to templates

To add tags to your templates, simply go to the template editor and click on the **Tags** field in the right sidebar. Click on the field and start typing to add a new tag or choose from existing tags.
Save your changes, and the tags will be applied to your template.

![Adding tags to a template](/blog/adding-tags-to-template.jpeg)

> You can add multiple tags to a single template for better organization, and remove them by clicking on the **X** next to the tag name.

## Filtering templates by tags

In **My templates**, you can filter your templates by tags. To do this, click on the **Filter by tags** option in the top right corner of the template library and select the tags you want to filter by. This will show you only the templates that match your selected tags.

![Filtering templates by tags](/blog/filtering-templates-by-tags.jpeg)

## Conclusion

We hope you find the new template tags feature helpful in organizing your templates and streamlining your workflow. If you have any questions or feedback, please don't hesitate to reach out to us. We are always looking for ways to improve RenderForm and make it easier for you to create beautiful and efficient template forms.

Stay tuned for more updates and features coming soon!

Introducing: Template Tags


## Introduction
Without any doubt images are a crucial part of any visual content and template that can be created in RenderForm.
They can be used to enhance the visual appeal of the content, provide context, and make the content more engaging. However, there are some common issues that can arise when working with image automation and rendering.
In this article, we will discuss some of the most common issues with rendering images in RenderForm and how to solve them.

## Image tester tool

Before we start discussing the common issues with rendering images in RenderForm, we would like to introduce you to the [**Image tester tool**](/tools/image-cors-tester-tool/) that can help you to test the image URL before using it in the template.

![Image tester tool](/blog/image-cors-tester-image.jpg)

Put the image URL in the input field and click on the **"Test Image"** button to see if the image is publicly accessible and can be displayed in RenderForm.

## Image not showing up

One of the most common issues with rendering your templates in RenderForm is that the image does not show up at all.
This can happen for a variety of reasons, the most obvious being that the image URL is incorrect. The easiest solution is to open the image that has been sent to the RenderForm,
to see if the image is displayed correctly. You can review the image URL on "**[My Render Results](/console/my-requests/)**" page and click on "**Details**" to see
what image URL was used during the rendering process.

![Review the image URL](/blog/rendering-images/review-render-result-details.jpeg)

If the image URL is correct, there may be other reasons why the image is not showing up. Below are some common issues that can cause the image to not show up in RenderForm and how to solve them.

### Incorrect image format

**Canvas Editor**: RenderForm supports two of the most common image formats such as JPEG, PNG, and PNG with transparency. If the image is in a different format, display the image in the output content is not guaranteed.

**HTML Editor and Canvas Editor (beta)**: In those editors, you can use any image format that is supported by the browser, such as JPEG, PNG, GIF, SVG, or WebP. However, the image format may not be supported by the browser or the image hosting provider, which can cause the image to not show up in the content.

### Image is not publicly accessible

RenderForm requires that the image is publicly accessible to display it, that means that the image must be hosted on a server that allows public access to the image **without any authentication or having to log in**.
For example if you are trying to render an image from a private Google Drive folder, it will not be displayed in RenderForm.

To check if the image is publicly accessible, try to open the image in a private tab in your browser, if the image opens in a new tab, and you can see it, then the image is publicly accessible.

### Image is not allowed to be hot-linked

Some image hosting providers may allow public access to the images, but they may not allow hot-linking, which means that the image cannot be displayed on a different website than the one it is hosted on.
For example, you cannot use images uploaded to Airtable and display them on your website as they do not allow hot-linking and the images won't show up **even if they are publicly accessible**.

Unfortunately, there is no easy way to check if the image is allowed to be hot-linked, the best way is to check the image hosting provider's terms of service or contact the provider to ask if hot-linking is allowed.

### Access to the image is blocked or expired

Some image hosting providers may permanently or temporarily block access to the images after some time or require authentication to access the image, which can cause the image to not show up in RenderForm.
Even if the image is publicly accessible at time of checking it, the provider may block access to the image after some time or require authentication to access the image to prevent leaking public data.
Sometimes provider may block access due to high traffic, detected automated activity (RenderForm is an automated activity), restrict access to the image for specific clients (for RenderForm but not for you) or other reasons.

Unfortunately, there is no easy way to check if the image access is blocked or expired as different providers have different policies and ways of handling this.
The best way is to check the image hosting provider's terms of service or contact the provider to ask if they block access for automated activities or after some time.

### Image hosting issue

Sometimes the image may not show up due to an issue with the image hosting provider, such as the server being down, the image being deleted, or the image being moved to a different location.
RenderForm does not re-try to fetch the image if it fails to load, so if the image is not available at the time of rendering, it will not be displayed in the content, and it will
require re-rendering the content to try to fetch the image again.

### Image took too long to load

If the image took too long to load, it may be due to the image being too large or the image hosting provider being slow to serve the image.
RenderForm wait for a few seconds for the image to load, if the image is not loaded in time, it will not be displayed in the content.

Make sure that the image is not too large and that the image hosting provider is fast enough to load the image in a reasonable amount of time. If the image is too large, try to resize the image or compress it to reduce the file size.

### Image weight is too big

Another common issue with rendering images in RenderForm is that the image is too big, which can cause the image to not show up or take a long time to download and fail to load eventually.
Large images can slow down the loading time or exceed the maximum total size allowed for the template in RenderForm that is set due to security and performance reasons.

There is no strict limit on the image weight, but it is **recommended to keep the image weight below 1MB** to ensure that the image loads quickly and does not slow down the loading time of the content.

### Image dimensions are too large

However, the image weight is not the only factor that affects the loading time, the image dimensions also play an important role. **Too large images that exceed 5000 pixels in width or height may not be displayed correctly due to performance reasons.**
Good practice is to not use images larger than the template size, for example if the template is 800px wide, the image should not be larger than 800px wide. There is no benefit in using larger images than the template size as they will be scaled down to fit the component size,
that may affect the image quality.

![Check image component dimensions](/blog/rendering-images/image-dimensions.jpeg)

Both the image weight and dimensions can be reduced by resizing the image or compressing it to reduce the file size. There are many online tools that can help you resize or compress the image, such as **TinyPNG**, **ImageOptim**, or **Squoosh**.


### Auto-scaling images

If you know that your images will be too large, you can enable **"Auto-scale external images"** in the template settings. This option will automatically scale down the image to fit the template size.
The option is available in the inspector section on the right side of the template editor.

![Auto-scale external images feature](/blog/rendering-images/auto-scale-external-images.jpeg)

Images are scaled down only if they are too large. **Every scaling operation decreases credit by an additional 1 credit.**

## How to choose the right image hosting provider

When choosing an image hosting provider, make sure that the provider allows public access to the images and that it allows hot-linking,
the best solution is to use a dedicated image hosting provider like [Imgur](https://imgur.com), [ImgBB](https://imgbb.com), or any other that allows public access to the images and hot-linking or use a CDN like [Cloudinary](https://cloudinary.com) or [AWS S3](https://aws.amazon.com/s3/).

**Solutions like Dropbox or Airtable are not recommended for hosting images for rendering content as they may block access to the images or require authentication after some time.**

## Image quality issues

Showing images in RenderForm is not only about displaying the image, but also about the quality of the image.
We want to make sure that the image is displayed in the best quality possible, we do not make any processing (compression, resizing) without your explicit consent, to the image to keep the quality as high as possible.
However, there are some common issues that can affect the image quality in RenderForm, below are some common issues and how to solve them.

### Image effect is not applied or is not working as expected

When you apply a color effect to an image in RenderForm with "Effect" option, the effect may not be applied or may not work as expected due to the image format or image size.

![Image effects](/blog/rendering-images/image-effects.jpeg)

Usually, the most common issue is that the image is too large, and the effect cannot be applied to the image due to performance reasons.
The image weight should be below 1MB to ensure that the effect is applied to the image and that the image loads quickly.

### Image is pixelated or blurred

To make sure that your image your won't be pixelated or blurred, make sure that the image is not too small, or too big and the quality is not too low.
The rule of thumb is to use images with a resolution that matches the image component size in the template, for example if the image component is 800px wide, the image should be **at least 800px wide** to ensure that the image is not pixelated or blurred.

![Enhance effect to use a better image scaller](/blog/rendering-images/enhance-effect.jpeg)

For images that dimensions are much higher than a template dimensions, you may see an unwanted a blur effect.
You can try to apply the "**Enhance**" effect to the image; it should make the image crisp again.

## Conclusion

In this article, we discussed some of the most common issues with rendering images in RenderForm and how to solve them.
The best way to avoid these issues is to make sure that we use reliable image hosting providers that allow public access to the images and hot-linking to avoid problems with image access.
Finally, we described how to ensure the image quality by making sure that the images used for rendering matches the desired dimensions, weight, and quality to avoid pixelation or blurring.


Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #renderform

Introducing: Emoji Rating

Introducing: Template Tags

Fixing common issues with rendering images