How to Start Generating Images Dynamically in PHP with Bannerbear

Using code to generate images automatically can be a great way to improve efficiency but don't reinvent the wheel—learn how to use the Bannerbear PHP library to add image generation functionality to your application.
by Josephine Loo · December 2022

Contents

    Images are an important part of any application, as they can improve user experience and help to convey information and ideas more effectively. However, as the application scales, managing its digital assets gets more difficult, especially when they are designed based on a brand guide (eg. font, color, etc.) or have the logo on them.

    Imagine having 1000 images and when a brand refresh is needed, all 1000 images have to be created again to align with the latest branding. In this capacity, using code to generate images can be a great way to keep them updated at all times.

    One way to do this is creating a template as a reference for the images so that updating it alone will apply changes to all images. Instead of changing 1000 images, you will only have to change one now—an instant 1000x productivity boost!

    You don't have to start from scratch. With a tool like Bannerbear, you can add image generation functionality to your application almost immediately. In this article, we’ll see how Bannerbear works and how you can use it in your PHP application.

    What is Bannerbear

    Bannerbear is a tool that helps you generate custom images, videos, and more using API. It has libraries in various popular programming languages like Ruby, PHP, and Node.js, making integrating image generation and other media manipulation functionalities into your application effortless.

    The images and other media files are created based on a template where you can add static and dynamic objects such as images, text, and shapes. By passing different data to the API, the values of these dynamic objects can be altered to generate unique content.

    All API requests on Bannerbear are scoped to a project and you can create multiple design templates in the same one. The design templates can be accessed using the project API key and their template IDs.

    Pre-requisites

    Getting Started

    Create a Bannerbear Design Template

    To start using Bannerbear, you will first need to create a new project and add a template to it. This will create a blank canvas which you can add layers of static and dynamic text, image, and other objects.

    Alternatively, you can duplicate the template used in this tutorial and modify it to suit your needs.

    a Bannerbear design template for reviews and testimonials

    In the template above, we have these modifiable dynamic objects:

    • Text - review, name, location
    • Image - background, avatar
    • Special object - star_rating

    When we're using the PHP library, we can specify the values for these objects in an array and pass it to the create_image method. Images will be generated based on the values in the array. We’ll go into the details in the following section.

    🐻 You can get more free templates from the Template Library.

    Retrieve Your Project API Key and Template ID

    The project API key and template ID will be needed for authentication, so that your PHP application can access your Bannerbear project and the design template.

    You should see   “Settings/API Key” on your template page. Click on it to reveal your API key.

    Bannerbear Travel Review template menu

    For the template ID, it can be found in the template option as shown in the screenshot below:

    Bannerbear Travel Review template Settings

    Install Bannerbear PHP Library

    In your project directory, install Bannerbear PHP library by running the command below in the terminal:

    composer require yongfook/bannerbear
    

    Bannerbear specifies autoloading information, you can autoload the library by adding this to your code:

    require_once('vendor/autoload.php');
    

    This will allow you to access the methods provided by the Bannerbear PHP library and add image generation and other functionalities to your application in a few lines of code.

    Now that we have everything we need, let’s dive into the code!

    Generating Images with Bannerbear Library

    First, we’ll instantiate a new instance of Bannerbear using the project API key. Create a new Bannerbear instance using the code below:

    $bb = new Bannerbear\BannerbearClient("your_project_api_key");
    

    Next, we’ll try to do a simple method call, to use one of the core functionalities of Bannerbear—image generation.

    You can generate images using the create_image method by passing in your template ID and an array of modifications. In the modifications array, you can insert children arrays of the dynamic objects with their names and values.

    Let's see how to add them…

    Change Texts

    We'll start with the basic one—changing the text. The code below shows a simple example of changing the value of a text object (location):

    $res = (object) $bb->create_image("your_template_id", [
            "modifications" => [
                [
                  "name"=> "location",
                  "text"=> "Lotus Beach Resort & Spa"
                ],
              ],
        ], TRUE);
    

    The last parameter of the method is set to TRUE, so that the image will be created asynchronously and image URLs in various formats (.png/.jpg) will be returned in the response.

    This will assign the JPEG image URL to the $imgUrl variable:

    $imgUrl = $res->image_url_jpg;
    

    travel review - change location.jpeg

    Notice that the location on the template has two lines with different text colors but we have only one in the result generated? This is because we are not using the secondary styles that have been configured in the template.

    seocnday styles.png

    The secondary styles will let you change the value of a text object in two different styles. You can apply the secondary styles by wrapping the text between two asterisks (*).

    [
      "name"=> "location",
      "text"=> "Lotus Beach Resort & Spa \n *Desaru Beachfront, Desaru, Malaysia*"
    ],
    

    Bannerbear Travel Review image with updated text

    You can also change other properties like color, background, font_family, text_align_h, text_align_v,  font_family_2, and color_2 by adding them to the array.

    [
        "name"=> "location",
        "text"=> "Lotus Beach Resort & Spa \n *Desaru Beachfront, Desaru, Malaysia*",
        "color"=>"#2345FF",
        "font_family"=> "Alike"
    ],
    

    Bannerbear Travel Review image with updated font style and color

    Change Images

    Changing images used in a template works similarly, but with a different property name. Instead of using “text”, we will use “image_url”.

    Add this to the modifications array to change the background image:

    [
      "name"=>"background",
      "image_url"=>"https://images.unsplash.com/photo-1545175707-9eec1209f720?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
    ]
    

    Bannerbear Travel Review image with updated background image

    Other modifications that you can do to an image object include setting the effect, anchor_x, anchor_y, fill_type, disable_face_detect, and disable_smart_crop. You can find the values available for these properties from their dropdown menus in the template editor.

    configurations for secondary styles

    Here’s an example of applying the Sepia effect on the image:

    $res = (object) $bb->create_image("your_api_key", [
            "modifications" => [
                [
                  "name"=> "location",
                  "text"=> "Lotus Beach Resort & Spa \n *Desaru Beachfront, Desaru, Malaysia*",
                ],
                [
                  "name"=>"background",
                  "effect"=>"Sepia",
                  "image_url"=>"https://images.unsplash.com/photo-1545175707-9eec1209f720?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
                ]
              ],
        ], TRUE);
    

    Bannerbear Travel Review image with special effect (Sepia)

    🐻 Bannerbear detects faces and clearly-defined subjects (smart crop) in images automatically. You can disable them from the template or code.

    Change Special Objects

    Special objects like bar/line charts , star rating , and QR/bar codes can be added to templates and their values can be changed via API too.

    In this template, we have the star_rating object. The star rating has a maximum rating of five stars. It accepts a value from the range of 0-100 and convert it into a value within the range of 0-5 to match the number of stars.

    Add this to the modifications array to change the star rating:

    [
        "name"=>"star_rating",
        "rating"=>90,
    ]
    

    Bannerbear Travel Review image with updated special object (star rating)

    Generate Other Media Files with Bannerbear

    Generating images from a template is one of many things that you can do with Bannerbear. Besides that, you can also use Bannerbear to generate:

    • Videos
    • Collections of images
    • Movies
    • Animated Gifs
    • Screenshots

    Most of them use parameters similar to image generation. You can read the Bannerbear PHP library usage on GitHub for more details on what parameters to pass to the method.

    Signed URL

    In addition to the media types in the list above, you can also generate Signed URLs. Signed URL is not a type of media file but another convenient way you can use Bannerbear to integrate image generation functionality into your application. Instead of calling the create_image method, you can insert the Signed URLs into any part of your application to display the generated images.

    These tutorials show you how to use them:

    Conclusion

    The right tool will help you accomplish greater results in less time. Using the Bannerbear PHP library, you can add image generation functionality to your application without having to deal with the technical details of image manipulation. Not to mention that video/GIF/PDF generation and other media manipulations are available too.

    To get the most out of Bannerbear, you should try them out yourself. Creating an account is free!

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    FFmpeg 101: Top 10 Command Options You Need to Know (with Examples)

    FFmpeg is a complete, cross-platform solution to edit media files programatically. With hundreds of command options available, it is easy to feel overwhelmed. In this article, we’ll go through 10 essential FFmpeg options you should know.

    How to Create an Image Slider in HTML, CSS, and Javascript

    Many JavaScript image slider libraries are available but which is the best for your project? Instead of using an external library, let's create one from scratch using simple HTML, CSS, and JavaScript.

    6 Pro Tips for Optimizing Web Automation Using Puppeteer

    Using Puppeteer to automate web browser-related tasks is a great way to speed up your work as a developer. In this article, we have listed six tips that will help you optimize them.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

    How to Start Generating Images Dynamically in PHP with Bannerbear
    How to Start Generating Images Dynamically in PHP with Bannerbear