{"id":28219,"date":"2022-11-22T11:22:24","date_gmt":"2022-11-22T11:22:24","guid":{"rendered":"http:\/\/create-a-brand-asset-visualizer-in-blitzjs"},"modified":"2023-07-07T16:25:12","modified_gmt":"2023-07-07T23:25:12","slug":"create-a-brand-asset-visualizer-in-blitzjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/","title":{"rendered":"Create a Brand Asset Visualizer in Blitz.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Branding is one of the ways to gain relevance and credibility for both small businesses and large enterprises. A well-designed <a href=\"https:\/\/cloudinary.com\/glossary\/brand-assets\">brand asset<\/a> creates an excellent first impression that drags customers\u2019 attention and entices them to discover more about the business or company. Part of branding is testing the generated brand entity on different screens, including clothing merchandise, web page, business cards, and office stationery.<\/p>\n<p>In this post, we will create a brand visualizer with Cloudinary and Blitz.js.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> offers an end-to-end solution for all our image and video needs, including the upload, storage, administration, transformation, and optimized delivery.<\/p>\n<p><a href=\"https:\/\/blitzjs.com\/\">Blitz.js<\/a> is a full-stack React framework with a No-API data layer built on Next.js and inspired by Ruby on Rails. It also provides helpful defaults for routing, databases, and authentication while being extremely flexible.<\/p>\n<p>We can find the completed project in the <a href=\"https:\/\/codesandbox.io\/s\/brand-visualizer-bybxjm\">CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/brand-visualizer-bybxjm?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Brand-asset-visualizer-with-blitz.js\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h2>Github Repository<\/h2>\n<p><a href=\"https:\/\/github.com\/Kizmelvin\/blitz-brand-visualizer\">https:\/\/github.com\/Kizmelvin\/blitz-brand-visualizer<\/a><\/p>\n<h2>Prerequisites<\/h2>\n<p>The following are required to follow this project:<\/p>\n<ul>\n<li>Basic knowledge of JavaScript and React.js<\/li>\n<li>A Cloudinary account (Create an account <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">here<\/a>)<\/li>\n<li>Knowledge of Next.js is good but not a necessity<\/li>\n<li>Node.js version 12 or newer, installed on the computer<\/li>\n<\/ul>\n<h2>Setting up a Blitz.js Application and Cloudinary<\/h2>\n<p>Run the following command to install Blitz.js Command Line Interface globally on our machine:<\/p>\n<pre><code>npm i -g blitz\n# OR\nyarn add global blitz\n<\/code><\/pre>\n<p>Next, scaffold a new Blitz.js project with the below command:<\/p>\n<pre><code>blitz new brand-visualizer\n<\/code><\/pre>\n<p>Run the above terminal command and follow the prompts to create a new Blitz.js application in a <strong>brand-visualizer<\/strong> folder**.**<\/p>\n<p>Next, navigate into the project directory and start the development server with the following commands:<\/p>\n<pre><code>cd brand-visualizer # navigates into the project directory\nblitz dev #starts the dev server\n<\/code><\/pre>\n<p>Blitz.js will start a live development server at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658657855232_Screenshot+2022-07-24+at+11.17.25.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1301\" height=\"699\"\/><\/p>\n<p>Next, <a href=\"https:\/\/cloudinary.com\/users\/login\">log in<\/a> to Cloudinary, navigate to the Media Library tab, create a <strong>brand-visualizer<\/strong> folder, and inside it, create two new folders; logos and mockups.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658660669725_Screenshot+2022-07-24+at+12.02.08.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"790\"\/><\/p>\n<p>Download a few logos and mockups from <a href=\"https:\/\/www.freepik.com\/\">freepik<\/a> and upload them to the respective folder.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658661714852_Screenshot+2022-07-24+at+12.21.42.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"790\"\/>\n<img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658661885117_Screenshot+2022-07-24+at+12.24.31.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"790\"\/><\/p>\n<p>Next, navigate to the Dashboard tab and grab the Cloud Name, API Key and API Secret; we will use them to access the assets.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658663965546_Screenshot+2022-07-24+at+12.56.07.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1440\" height=\"790\"\/><\/p>\n<h2>Building the Application<\/h2>\n<p>To start, let\u2019s install the following npm packages:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/cloudinary\">cloudinary<\/a> &#8211; To effortlessly optimize, transform, upload and manage our cloud assets<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/bootstrap\">bootstrap<\/a> and <a href=\"https:\/\/www.npmjs.com\/package\/react-bootstrap\">react-bootstrap<\/a> &#8211; To handle styling and to use bootstrap components in a react environment<\/li>\n<li>\n<a href=\"https:\/\/www.npmjs.com\/package\/axios\">axios<\/a> &#8211; A promise-based HTTP client for the browser and Node.js<\/li>\n<\/ul>\n<p>Now, run the following command to install the above packages:<\/p>\n<pre><code>npm install cloudinary bootstrap react-bootstrap axios\n<\/code><\/pre>\n<p>Next, update the .env.local file with the Cloudinary account credentials like below:<\/p>\n<pre><code>\/\/.env.local\nCLOUD_NAME = &quot;CLOUD NAME HERE&quot;\nAPI_KEY = &quot;API KEY HERE&quot;\nAPI_SECRET = &quot;API SECRET HERE&quot; \n<\/code><\/pre>\n<p>Now in the <strong>app<\/strong> directory, create an <strong>api<\/strong> folder and create a <code>cloudinary.js<\/code> file with the following snippets:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Kizmelvin\/549d7e66105fc56dbea82d8caf39f673\">https:\/\/gist.github.com\/Kizmelvin\/549d7e66105fc56dbea82d8caf39f673<\/a><\/p>\n<p><a href=\"https:\/\/gist.github.com\/Kizmelvin\/549d7e66105fc56dbea82d8caf39f673\">https:\/\/gist.github.com\/Kizmelvin\/549d7e66105fc56dbea82d8caf39f673<\/a><\/p>\n<p>In the snippets above, we:<\/p>\n<ul>\n<li>Imported <code>C``loudinary<\/code>, created a <code>transformImage()<\/code> function.<\/li>\n<li>Configured a cloudinary instance with the credentials in the <code>.env.local<\/code> file.<\/li>\n<li>Destructured <code>id<\/code> from <code>req.query<\/code>, targeted the mockup URLs.<\/li>\n<li>Used transformations, and overlaid brand logo on the mockup images.<\/li>\n<\/ul>\n<p>Next, in the <strong>app<\/strong> directory, inside the <strong>pages<\/strong> folder, update the <code>index.js<\/code> file with the following snippets:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Kizmelvin\/6a8c60046c6d8b227448bd2cd41b277f\">https:\/\/gist.github.com\/Kizmelvin\/6a8c60046c6d8b227448bd2cd41b277f<\/a><\/p>\n<p><a href=\"https:\/\/gist.github.com\/Kizmelvin\/6a8c60046c6d8b227448bd2cd41b277f\">https:\/\/gist.github.com\/Kizmelvin\/6a8c60046c6d8b227448bd2cd41b277f<\/a><\/p>\n<p>In the above snippets, we:<\/p>\n<ul>\n<li>Imported <code>useState<\/code> from \u201creact,\u201d <code>Axios<\/code> from \u201caxios,\u201d and <code>Col<\/code>, <code>Row<\/code>, <code>Container<\/code> from \u201creact-bootstrap.\u201d<\/li>\n<li>Created <code>coffeBrand<\/code>, <code>notepadBrand<\/code>, <code>hoodieBrand<\/code>, and <code>cardBrand<\/code> states with the <code>useState<\/code> react hook.<\/li>\n<li>Created the <code>handleClick()<\/code> function that sent a post request to the \u201capi\/cloudinary\u201d route and passed the <code>logoId<\/code> as the <code>id<\/code> param.<\/li>\n<li>Destructured <code>mug<\/code>, <code>notepad<\/code>, <code>hoodie<\/code>, and <code>card<\/code> from <code>res.data<\/code> in the <code>handleClick()<\/code> function and updated the states accordingly.<\/li>\n<li>Used <code>Row<\/code> and <code>Col<\/code> components to display the logos and passed the <code>handleClick()<\/code> function to it.<\/li>\n<li>Conditionally displayed the local mockup and state images when a logo is selected.<\/li>\n<\/ul>\n<p>Now in the browser, we will have the application looking like the below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_5C8A5D4253A2A8700FEA0F881EA2D436346D2815E60FC36BB6610277F07187BA_1658709339706_ezgif.com-gif-maker+2.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"404\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>This post discussed creating a brand asset visualizer with Cloudinary and Blitz.js.<\/p>\n<h2>Resources<\/h2>\n<p>The following resources might be helpful:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/daily.dev\/blog\/getting-started-with-blitzjs\">Getting Started with Blitz.js<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/layers\">Placing layers on Cloudinary image<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28220,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,371],"class_list":["post-28219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create a Brand Asset Visualizer in Blitz.js<\/title>\n<meta name=\"description\" content=\"This post discussed how to create a Brand Visualizer using Blitz.js\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Brand Asset Visualizer in Blitz.js\" \/>\n<meta property=\"og:description\" content=\"This post discussed how to create a Brand Visualizer using Blitz.js\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-22T11:22:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-07T23:25:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5472\" \/>\n\t<meta property=\"og:image:height\" content=\"3648\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Brand Asset Visualizer in Blitz.js\",\"datePublished\":\"2022-11-22T11:22:24+00:00\",\"dateModified\":\"2023-07-07T23:25:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\",\"name\":\"Create a Brand Asset Visualizer in Blitz.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA\",\"datePublished\":\"2022-11-22T11:22:24+00:00\",\"dateModified\":\"2023-07-07T23:25:12+00:00\",\"description\":\"This post discussed how to create a Brand Visualizer using Blitz.js\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA\",\"width\":5472,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Brand Asset Visualizer in Blitz.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create a Brand Asset Visualizer in Blitz.js","description":"This post discussed how to create a Brand Visualizer using Blitz.js","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/","og_locale":"en_US","og_type":"article","og_title":"Create a Brand Asset Visualizer in Blitz.js","og_description":"This post discussed how to create a Brand Visualizer using Blitz.js","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-11-22T11:22:24+00:00","article_modified_time":"2023-07-07T23:25:12+00:00","og_image":[{"width":5472,"height":3648,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/"},"author":{"name":"","@id":""},"headline":"Create a Brand Asset Visualizer in Blitz.js","datePublished":"2022-11-22T11:22:24+00:00","dateModified":"2023-07-07T23:25:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/","name":"Create a Brand Asset Visualizer in Blitz.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA","datePublished":"2022-11-22T11:22:24+00:00","dateModified":"2023-07-07T23:25:12+00:00","description":"This post discussed how to create a Brand Visualizer using Blitz.js","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA","width":5472,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-brand-asset-visualizer-in-blitzjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Brand Asset Visualizer in Blitz.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923584\/Web_Assets\/blog\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de\/d560556ac1b4ee3a063cd7ed08c3a13f623bc87a-5472x3648-1_28220a76de.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28219"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28219\/revisions"}],"predecessor-version":[{"id":30239,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28219\/revisions\/30239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28220"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}