{"id":28435,"date":"2022-03-24T19:42:39","date_gmt":"2022-03-24T19:42:39","guid":{"rendered":"http:\/\/Automatically-Generate-Social-Images-for-Blog-Posts"},"modified":"2023-07-09T03:24:46","modified_gmt":"2023-07-09T10:24:46","slug":"automatically-generate-social-images-for-blog-posts","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/automatically-generate-social-images-for-blog-posts\/","title":{"rendered":"Generate Social Images for Blog Posts"},"content":{"rendered":"

Have you shared a link to a post on any social platform and been unhappy with the image displayed because it didn\u2019t fit the article title or your brand? In this article, we will build an application that dynamically generates social images<\/a> based on a template.<\/p>\n

You can use an image or a banner that suits your brand as a base image, and with Cloudinary, we can dynamically layer texts on that image to generate custom social images for blog posts.<\/p>\n

Here is a link to the demo on CodeSandbox<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Create a Design Layout<\/h2>\n

We need a banner that will serve as the base image. You can choose a random background if you don\u2019t have one that suits your brand or design a custom layout using any design tool (Figma, Adobe XD, Sketch, e.tc).<\/p>\n

For this tutorial, I will be using this simple layout I designed with Figma.<\/p>\n

\"\"<\/p>\n

Cloudinary Setup<\/h2>\n

First, we need to upload our image to Cloudinary. If you are new to Cloudinary, you can sign up here<\/a> for a free account. After successful signup, see this documentation<\/a> for options on uploading assets to your Cloudinary Media Library<\/a>. Upload the image you want to use as your base image and assign it a name you can easily remember.<\/p>\n

\"\"<\/p>\n

Project Setup<\/h2>\n

Open your terminal and run the following command to create a React application in a folder named social-media-card<\/code>.<\/p>\n

    npx create-react-app social-image-template\n<\/code><\/span><\/pre>\n
Next, let\u2019s install the dependencies we will need for this project. Run the following command to install them.<\/p>\n
    npm install cloudinary-react --save\n<\/code><\/span><\/pre>\n
The command above installs the Cloudinary\u2019s React SDK<\/a>.<\/p>\n
After the installation, and add the following to the App.js<\/code> file inside your src<\/code> folder:<\/p>\n
\n    import<\/span> \".\/App.css\"<\/span>;\n    import<\/span> React, { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> { Image, Transformation } from<\/span> \"cloudinary-react\"<\/span>;\n    \n    function<\/span> PostTitle<\/span>({ title, onTitleChange }<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span>><\/span>\n          <label<\/span> htmlFor<\/span>=\"blog title\"<\/span>><\/span>Blog Title:<\/label<\/span>><\/span>\n          <input<\/span>\n            value<\/span>={title}<\/span>\n            onChange<\/span>={onTitleChange}<\/span>\n            type<\/span>=\"text\"<\/span>\n            placeholder<\/span>=\"Enter a post title\"<\/span>\n          \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n    \n    function<\/span> Author<\/span>({ authorName, onNameChange }<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span>><\/span>\n          <label<\/span>><\/span>Author:<\/label<\/span>><\/span>\n          <input<\/span>\n            value<\/span>={authorName}<\/span>\n            onChange<\/span>={onNameChange}<\/span>\n            type<\/span>=\"text\"<\/span>\n            placeholder<\/span>=\"Enter author's name\"<\/span>\n          \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n    \n    const<\/span> App = ()<\/span> =><\/span> {\n      const<\/span> [blogInput, setBlogInput] = useState(\"\"<\/span>);\n      const<\/span> [authorName, setAuthorName] = useState(\"\"<\/span>);\n      return<\/span> (\n        <div<\/span> className<\/span>=\"wrapper\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n            <div<\/span> className<\/span>=\"form\"<\/span>><\/span>\n              <form<\/span>><\/span>\n                <PostTitle<\/span>\n                  title<\/span>={blogInput}<\/span>\n                  onTitleChange<\/span>={(e)<\/span> =><\/span> setBlogInput(e.target.value)}\n                \/>\n                <Author<\/span>\n                  authorName<\/span>={authorName}<\/span>\n                  onNameChange<\/span>={(e)<\/span> =><\/span> setAuthorName(e.target.value)}\n                \/>\n                <div<\/span> className<\/span>=\"button-wrapper\"<\/span>><\/span>\n                  <button<\/span>><\/span>Generate Social Image<\/button<\/span>><\/span>\n                <\/div<\/span>><\/span>\n              <\/form<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    \n    export<\/span> default<\/span> App;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, we\u2019re importing two components, Image<\/code> and Transformation<\/code>, from the cloudinary-react<\/code> library we installed.<\/p>\n
We then defined three components. The first two components return a label<\/code> and an input<\/code>. They will render a UI layer for interactively modifying the post title and the author\u2019s name fields, respectively.<\/p>\n
We also have our App<\/code> component, where we defined some state variables which manage the states of our PostTitle<\/code> and Author<\/code> components. Our App<\/code> component renders a form<\/code> containing the PostTitle<\/code> and Author<\/code> components, and they both receive as props their states and mechanisms for updating them.<\/p>\n
Add the following styles to your App.css<\/code> file:<\/p>\n
    .form-control<\/span> {\n      display<\/span>: flex;\n      align-items<\/span>: center;\n    }\n    label<\/span> {\n      font-weight<\/span>: 700<\/span>;\n      font-size<\/span>: 18px<\/span>;\n      width<\/span>: 100px<\/span>;\n      display<\/span>: block;\n    }\n    input<\/span> {\n      width<\/span>: 70%<\/span>;\n      border<\/span>: 1px<\/span> solid #ccc<\/span>;\n      border-radius<\/span>: 4px<\/span>;\n      padding<\/span>: 12px<\/span> 20px<\/span>;\n      margin<\/span>: 5px<\/span> 0<\/span>;\n    }\n    button<\/span> {\n      width<\/span>: 50%<\/span>;\n      background-color<\/span>: #38a6d2<\/span>;\n      color<\/span>: white;\n      font-weight<\/span>: 600<\/span>;\n      font-size<\/span>: 20px<\/span>;\n      padding<\/span>: 15px<\/span>;\n      border<\/span>: none;\n      border-radius<\/span>: 4px<\/span>;\n      cursor<\/span>: pointer;\n    }\n    button<\/span>:hover<\/span> {\n      background-color<\/span>: #37963c<\/span>;\n    }\n    .button-wrapper<\/span> {\n      display<\/span>: flex;\n      justify-content<\/span>: center;\n      margin-top<\/span>: 20px<\/span>;\n    }\n    .form<\/span> {\n      margin<\/span>: 50px<\/span>;\n      background-color<\/span>: #e0e6e9<\/span>;\n      padding<\/span>: 30px<\/span>;\n      border-radius<\/span>: 10px<\/span>;\n    }\n    .container<\/span> {\n      width<\/span>: 100%<\/span>;\n    }\n    .wrapper<\/span> {\n      display<\/span>: flex;\n      justify-content<\/span>: center;\n    }\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Navigate to localhost:3000<\/code> in your browser, and you should see the following:<\/p>\n
\"\"<\/p>\n
So far, the idea is that when a user fills out the form and clicks the button, we want to generate an image based on the user\u2019s information. Let\u2019s add the logic for that.<\/p>\n
Add the following to your App.js<\/code> file:<\/p>\n
\n    import \".\/App.css\"<\/span>;\n    import React, { useState } from \"react\"<\/span>;\n    import { Image, Transformation } from \"cloudinary-react\"<\/span>;\n    \n    function<\/span> PostTitle<\/span>({ title, onTitleChange })<\/span> <\/span>{\n      return<\/span> (\n         \/\/...<\/span>\n      );\n    }\n    \n    function<\/span> Author<\/span>({ authorName, onNameChange })<\/span> <\/span>{\n      return<\/span> (\n        \/\/...<\/span>\n      );\n    }\n    \n    const<\/span> App = () => {\n      const<\/span> [blogInput, setBlogInput] = useState(\"\"<\/span>);\n      const<\/span> [authorName, setAuthorName] = useState(\"\"<\/span>);\n      {\/* Add the following *\/<\/span>}\n      const<\/span> [showBanner, setShowBanner] = useState(false<\/span>);\n      const<\/span> displayImage = (e) => {\n        e.preventDefault();\n        if<\/span> (blogInput && authorName) {\n          setShowBanner(true<\/span>);\n        }\n      };\n    \n      return<\/span> (\n            \/\/...<\/span>\n            <div className=\"form\"<\/span>>\n              {\/* Add the onSubmit handler to the form element*\/<\/span>}\n              <form onSubmit={displayImage}>\n                <PostTitle\n                  \/\/...<\/span>\n                \/>\n                <Author\n                 \/\/...<\/span>\n                \/>\n                <div className=\"button-wrapper\"<\/span>>\n                  <button>Generate Social Image<\/button>\n                <\/div>\n              <\/form>\n            <\/div>\n            {\/* Add the following *\/<\/span>}\n            {showBanner && (\n              <div className=\"display\"<\/span>>\n                <Image publicId={\"social-card\"<\/span>} cloudName=\"ifeomaimoh\"<\/span>>\n                  <Transformation width=\"800\"<\/span> height=\"500\"<\/span> crop=\"fit\"<\/span> \/>\n                <\/Image>\n              <\/div>\n            )}\n          <\/div>\n        <\/div>\n      );\n    };\n    export default<\/span> App;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
In the App component, we added a state variable, showBanner<\/code>, which stores a boolean. We can then check the value to determine whether to show the banner or not.<\/p>\n
We then created a function called displayImage<\/code> which, when called, flips the value of showBanner<\/code>. The function is also passed as an event handler to the onSubmit<\/code> event for the form<\/code> element.<\/p>\n
We\u2019re using the state variable showBanner<\/code> to conditionally render our image with the Cloudinary Image<\/code> component we imported.<\/p>\n
To use Cloudinary React components, you need to configure your cloudName<\/code>. We\u2019re specifying that directly to the Image<\/code> component with the publicID<\/code> of the image we uploaded to Cloudinary.<\/p>\n
The Image<\/code>  component currently accepts a Transformation<\/code> element that allows us to define the width and height of our image. We defined a maximum width of 500 pixels for our image template using the fit<\/code> crop mode in the Transformation<\/code> element.<\/p>\n
Add Text Overlay<\/h2>\n
Next, we need to add Transformation<\/code>  elements to the Image<\/code> component that adds and positions text overlays on our image when a user fills the form.<\/p>\n
Add the following to the Image<\/code> component in your App.js<\/code> file:<\/p>\n
\n      <Transformation\n        overlay={{\n          fontFamily<\/span>: \"Arial\"<\/span>,\n          fontSize<\/span>: 40<\/span>,\n          fontWeight<\/span>: \"bold\"<\/span>,\n          letter_spacing<\/span>: 4<\/span>,\n          text<\/span>: `${blogInput}<\/span>`<\/span>,\n        }}\n        color=\"#FFFFFF\"<\/span>\n        width=\"500\"<\/span>\n        height=\"200\"<\/span>\n        crop=\"fit\"<\/span>\n      \/>\n      <Transformation<\/span> flags<\/span>=\"layer_apply\"<\/span> gravity<\/span>=\"west\"<\/span> x<\/span>=\"40\"<\/span> \/><\/span><\/span>\n      <Transformation<\/span>\n        overlay<\/span>={{<\/span>\n          fontFamily:<\/span> \"Arial<\/span>\",\n          fontSize:<\/span> 25<\/span>,\n          text:<\/span> `Author:<\/span> ${authorName<\/span>}`,\n          textAlign:<\/span> \"\",\n          fontWeight:<\/span> \"bold<\/span>\",\n        }}\n        color<\/span>=\"#FFFFFF\"<\/span>\n        width<\/span>=\"100\"<\/span>\n        height<\/span>=\"100\"<\/span>\n        crop<\/span>=\"fit\"<\/span>\n      \/><\/span><\/span>\n      <Transformation<\/span> flags<\/span>=\"layer_apply\"<\/span> gravity<\/span>=\"south_west\"<\/span> x<\/span>=\"40\"<\/span> y<\/span>=\"50\"<\/span> \/><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We are adding two text overlays to our image template for the post title and the author name. We\u2019re using the text<\/code> property of the overlay<\/code> transformation prop to dynamically add the post title and the author name to the image, depending on the information provided by the user.<\/p>\n
The default text position when using the gravity parameter is center<\/code>. For both overlays, we\u2019re controlling the positions of the text overlays the base image by combining the gravity<\/code> parameter with the X and Y coordinates.<\/p>\n
Now you can head over to your browser and fill in the form, then click the Generate social image<\/strong> button to create an image with the text overlay you entered in the form.<\/p>\n
Here\u2019s what mine looks like:<\/p>\n
\"\"<\/p>\n
Find the project here on GitHub<\/a>.<\/p>\n
Summary<\/h2>\n
In this post, we saw how to generate social images for blog posts using Cloudinary\u2019s cloud-based media-management solution to layer texts on an image dynamically. You can further customize this image by adding your logo or a picture of yourself.<\/p>\n\n
Resources you may find useful:<\/strong><\/p>\n
For the post title, we defined a maximum width of 500px  and added the fit<\/code> crop mode so that if we have a multiline text, Cloudinary automatically wraps the text content<\/a> to the new line.<\/p>\n