{"id":27900,"date":"2022-03-24T19:57:24","date_gmt":"2022-03-24T19:57:24","guid":{"rendered":"http:\/\/create-an-article-banner-generator-in-nuxt.js"},"modified":"2022-03-24T19:57:24","modified_gmt":"2022-03-24T19:57:24","slug":"create-an-article-banner-generator-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/","title":{"rendered":"Create an Article Banner Generator"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>The idea of a blog article banner gives a pictorial representation of its body.\nThis post discusses implementing an article banner generator that allows us to dynamically select an image of our choice, write some text on it, change the background and text color.<\/p>\n<p>We will use <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> as our frontend technology. Nuxt is an open-source framework that provides frontend developers with the power to build fast and high-performing websites.<\/p>\n<p>For this post, we\u2019ll store the base banner image on <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> and apply multiple transformations to it.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/wizardly-wood-0lhzzz\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/wizardly-wood-0lhzzz?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=\"article banner generator\"\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  <div class=\"wp-block-cloudinary-markdown \"><p>Check the source code on <a href=\"https:\/\/github.com\/terieyenike\/image-banner\">GitHub<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To complete this tutorial, we will need the following:<\/p>\n<ul>\n<li>Node for installing dependencies<\/li>\n<li>The knowledge of JavaScript and Vue.js<\/li>\n<li>A Cloudinary account. <a href=\"https:\/\/cloudinary.com\/signup\">Sign up<\/a> for a free account<\/li>\n<\/ul>\n<h2>Creating a new project with Nuxt.js<\/h2>\n<p>We need to scaffold a new project using the <code>CLI<\/code>, which will ask a series of questions with the following terminal command:<\/p>\n<pre><code>yarn create nuxt-app image-banner\n# OR \nnpm init nuxt-app image-banner\n# OR \nnpx create-nuxt-app image-banner\n<\/code><\/pre>\n<p>With the above command, choose the following configuration as shown below:<\/p>\n<pre><code>Project name: accept the default, press Enter\nProgramming language: JAVASCRIPT\nPackage manager: Npm\nUI framework: Tailwind CSS\nNuxt.js modules: N\/A\nLinting tools: N\/A\nTesting framework: None\nRendering mode: Universal (SSR \/ SSG)\nDeployment target: Static (Static\/Jamstack hosting)\nDevelopment tools: jsconfig.json\nWhat is your GitHub username? &lt;github-username&gt;\nVersion control system: GIT\n<\/code><\/pre>\n<p>Once the installation is complete, navigate to that directory and start up a development server to preview the app on <code>http:\/\/localhost:3000<\/code>.<\/p>\n<pre><code>cd image-banner &amp;&amp; yarn dev\n# or\ncd image-banner &amp;&amp; npm run dev\n<\/code><\/pre>\n<p>Next, we install Cloudinary\u2019s Nuxt.js module with:<\/p>\n<pre><code>yarn add @nuxtjs\/cloudinary \n# or \nnpm install @nuxtjs\/cloudinary\n<\/code><\/pre>\n<p>With the dependency installed, we must add the module in the <code>nuxt.config.js<\/code> file under the modules section.<\/p>\n<p>nuxt.config.js<\/p>\n<pre><code>modules: [\n  &quot;@nuxtjs\/cloudinary&quot;\n]\n<\/code><\/pre>\n<p>Below the modules section, add the following to configure Cloudinary with the <code>useComponent<\/code> and <code>cloudName<\/code> field option.<\/p>\n<p>nuxt.config.js<\/p>\n<pre><code>modules: [\n  &quot;@nuxtjs\/cloudinary&quot;\n],\n\n\/\/ add this \ncloudinary: {\n  cloudName: &quot;&lt;your-cloud-name&gt;&quot;,\n  useComponent: true,\n}\n<\/code><\/pre>\n<p><code>useComponent<\/code> set to true allows the use of Vue image components.\nYou can obtain your Cloudinary cloud name from your dashboard on Cloudinary.<\/p>\n<h2>Image Upload to Cloudinary<\/h2>\n<p>With our app setup completed, we\u2019ll upload two sample royalty-free images to Cloudinary.<\/p>\n<p>In our dashboard, we will have access to upload and save the downloaded images in Cloudinary by clicking the <code>Media Library<\/code> tab and <code>Upload<\/code> button as displayed in the image 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_5E9D3E3825FDEDA886574C8977C00E10A9DA5F2EBE832C18AB5E0B62D40D562A_1646438441285_Screen+Shot+2022-03-05+at+00.53.52.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1278\" height=\"127\"\/><\/p>\n<p>Next, we need to copy the publicId for the saved images from our dashboard, which will be necessary to generate the article banner.<\/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_5E9D3E3825FDEDA886574C8977C00E10A9DA5F2EBE832C18AB5E0B62D40D562A_1646438764310_Screen+Shot+2022-03-05+at+01.04.17.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1273\" height=\"581\"\/><\/p>\n<h2>Setup the Image Store<\/h2>\n<p>In our Nuxt.js project root directory, create a folder called <code>utils<\/code>, and within this folder, create a file, <code>banners.json<\/code>, with the following json data.<\/p>\n<p>utils\/banners.json<\/p>\n<pre><code>[\n  {\n    &quot;id&quot;: 1,\n    &quot;publicId&quot;: &quot;pexels-christina-morillo-1181681_itscxa&quot;,\n    &quot;alt&quot;: &quot;woman on her laptop&quot;\n  },\n  {\n    &quot;id&quot;: 2,\n    &quot;publicId&quot;: &quot;pexels-hasan-albari-1229861_njoool&quot;,\n    &quot;alt&quot;: &quot;workstation&quot;\n  }\n]\n<\/code><\/pre>\n<h2>Creating the Article Banner<\/h2>\n<p>In creating the article banner, we need to set up the markup, styling, and data properties in the <code>script<\/code> section of the file, index.vue.<\/p>\n<p>To do this, replace the <code>index.vue<\/code> file with the code from this <a href=\"https:\/\/gist.github.com\/Terieyenike\/ad9881d156af027eb3c1a7cec2925551\">gist<\/a>, and we\u2019ll explain what is happening after:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/Terieyenike\/ad9881d156af027eb3c1a7cec2925551\">https:\/\/gist.github.com\/Terieyenike\/ad9881d156af027eb3c1a7cec2925551<\/a><\/p>\n<p><a href=\"https:\/\/gist.github.com\/Terieyenike\/ad9881d156af027eb3c1a7cec2925551\">https:\/\/gist.github.com\/Terieyenike\/ad9881d156af027eb3c1a7cec2925551<\/a><\/p>\n<p>From the code snippet in the gist, we:<\/p>\n<ul>\n<li>We created the data method and declared a list of variables to use in the <code>index.vue<\/code> component. This includes the imported image JSON data, image id, the form data, and a <code>showBanner<\/code> boolean field.<\/li>\n<li>We wrote markup to conditionally render the image collection with the <code>v-if<\/code> and <code>v-for<\/code> directives. We also bound the class on the image element to dynamically set a border.<\/li>\n<li>Within the markup, we use Cloudinary image components to display the image with the help of the package <code>@nuxtjs\/cloudinary<\/code>\n<\/li>\n<li>We managed a form error message when no image is selected.<\/li>\n<li>Finally, we set an alternative message using the <code>v-else<\/code>  directive in the absence of an image list.<\/li>\n<\/ul>\n<p>With the above process done, we should have our app looking like this:<\/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_5E9D3E3825FDEDA886574C8977C00E10A9DA5F2EBE832C18AB5E0B62D40D562A_1646446602392_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"444\" height=\"479\"\/><\/p>\n<h2>Generating the Article Banner<\/h2>\n<p>We\u2019ll create a <code>Banner<\/code> component that establishes a banner image when clicking the <em>Generate Banner b<\/em>utton. Create and add the following snippet to <code>components\/Banner.vue<\/code>.<\/p>\n<p>components\/Banner.vue<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;mt-8&quot;&gt;\n    &lt;cld-image :public-id=&quot;publicId&quot;&gt;\n      &lt;cld-transformation\n        :background=&quot;bgColour&quot;\n        crop=&quot;fit&quot;\n        opacity=&quot;20&quot;\n        width=&quot;2000&quot;\n      \/&gt;\n      &lt;cld-transformation\n        :color=&quot;textColour&quot;\n        :overlay=&quot;{\n          fontFamily: 'Arial',\n          fontSize: 80,\n          fontWeight: 'bold',\n          text: message.toUpperCase(),\n        }&quot;\n      \/&gt;\n            &lt;cld-transformation flags=&quot;layer_apply&quot;\/&gt;\n    &lt;\/cld-image&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  props: [&quot;message&quot;, &quot;publicId&quot;, &quot;bgColour&quot;, &quot;textColour&quot;],\n};\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>The above snippet renders the generated image using the <code>cld-image<\/code> and <code>cld-transformation<\/code> components, with the message, <code>publicId<\/code>, <code>bgColour<\/code>, and <code>textColour<\/code> as props.<\/p>\n<p>Cloudinary components provide a good experience with setting multiple transformations on an image. These include font properties, block lettering the message property with the method <code>toUpperCase<\/code>, opacity, background, and text color attributes.<\/p>\n<p>In the <code>index.vue<\/code> file, we import and conditionally render the created <code>Banner<\/code> component.<\/p>\n<p>pages\/index.vue<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;lg:flex lg:items-center px-8 py-8 max-w-md m-auto md:max-w-2xl lg:m-0 lg-p-0 w-full lg:max-w-5xl&quot;&gt;\n    &lt;div class=&quot;lg:w-2\/4&quot;&gt;\n      &lt;h1 class=&quot;text-gray-900 text-lg mb-2 font-bold uppercase md:text-3xl lg:text-2xl&quot;&gt;\n        &lt;!-- Header title detail here --&gt;\n    &lt;\/h1&gt;\n      &lt;form @submit.prevent=&quot;handleSubmit&quot;&gt; &lt;!-- add handleSubmit method --&gt;\n        &lt;!-- form content details here --&gt;\n      &lt;\/form&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- conditionally render the Banner component here --&gt;\n    &lt;div v-if=&quot;showBanner&quot; class=&quot;mt-10 lg:w-2\/4 lg:mt-0&quot;&gt;\n      &lt;Banner\n        :bgColour=&quot;formData.backgroundColour&quot;\n        :message=&quot;formData.message&quot;\n        :publicId=&quot;formData.publicId&quot;\n        :textColour=&quot;formData.textColour&quot;\n      \/&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\n\/\/ import here\nexport default {\n  data() {\n    return {\n      \/\/ data objects code here\n    }\n  },\n  methods: {\n    \/\/ other methods go in here\n    \/\/ add this\n    handleSubmit() {\n      if (this.imageId) {\n        this.showBanner = true\n      } else {\n        this.formData.error = true\n      }\n    },\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>The above snippet conditionally renders the banner component with the required props. The function <code>handleSubmit<\/code> checks if an image is selected before rendering it or throwing an error in its absence.<\/p>\n<p>Our app should look like the image 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_5E9D3E3825FDEDA886574C8977C00E10A9DA5F2EBE832C18AB5E0B62D40D562A_1646451325806_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1008\" height=\"492\"\/><\/p>\n<h2>Creating a Copiable Link<\/h2>\n<p>We will quickly add a function to copy the link of the generated image.<\/p>\n<p>In the Banner.vue, we update the source code with the following:<\/p>\n<p>components\/Banner.vue<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;mt-8&quot;&gt;\n    &lt;cld-image ref=&quot;ref&quot; :public-id=&quot;publicId&quot;&gt;\n      &lt;!-- Transformation component goes here --&gt;\n    &lt;\/cld-image&gt;\n\n    \/\/ add this: copiable link section\n    &lt;div class=&quot;mt-10&quot;&gt;\n      &lt;h2 class=&quot;mb-2 text-gray-500 font-semibold&quot;&gt;Copiable link&lt;\/h2&gt;\n      &lt;input\n        :value=&quot;url&quot;\n        class=&quot;w-full border-gray-300 rounded-sm border p-2&quot;\n      \/&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  props: \/\/ props,\n  \/\/ add data objet here\n  data() {\n    return {\n      url: &quot;&quot;,\n    };\n  },\n  mounted() {\n    this.$nextTick(() =&gt; {\n      this.url = this.$refs.ref.$el.src\n    });\n  },\n};\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>The code above does the following:<\/p>\n<ul>\n<li>Included an empty initialized <code>url<\/code> in the data object<\/li>\n<li>On the <code>cld-image<\/code> component, added the <code>ref<\/code> attribute to access the <code>src<\/code> of the underlying image element<\/li>\n<li>The <code>mounted<\/code> lifecycle method, retrieves the image URL and updates the <code>url<\/code> data in the state.<\/li>\n<li>Bound the <code>url<\/code> data to the value of the input element.<\/li>\n<\/ul>\n<p>The app then looks like this.<\/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_5E9D3E3825FDEDA886574C8977C00E10A9DA5F2EBE832C18AB5E0B62D40D562A_1646453274237_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1013\" height=\"514\"\/><\/p>\n<p>Check out the <a href=\"https:\/\/res.cloudinary.com\/terieyenike\/image\/upload\/b_rgb:242323,c_fit,o_20,w_2000\/co_rgb:ffffff,l_text:Arial_80_bold:MEDIA%20ASSET%20STORAGE%20WITH%20CLOUDINARY\/fl_layer_apply\/pexels-christina-morillo-1181681_itscxa\">copiable link<\/a> from the above image.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post explains how to create a banner image generator using Nuxt.js, with Cloudinary providing media storage and transformations.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">Transforming images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.nuxtjs.org\/usage\/vue-components#cldimage\">Cloudinary nuxt image components<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27901,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,175,372,371,315],"class_list":["post-27900","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-jamstack","tag-nuxtjs","tag-under-review","tag-vue"],"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 an Article Banner Generator<\/title>\n<meta name=\"description\" content=\"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.\" \/>\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-an-article-banner-generator-in-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create an Article Banner Generator\" \/>\n<meta property=\"og:description\" content=\"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T19:57:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA\" \/>\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-an-article-banner-generator-in-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create an Article Banner Generator\",\"datePublished\":\"2022-03-24T19:57:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"JAMStack\",\"NuxtJS\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\",\"name\":\"Create an Article Banner Generator\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA\",\"datePublished\":\"2022-03-24T19:57:24+00:00\",\"description\":\"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA\",\"width\":6016,\"height\":4016},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create an Article Banner Generator\"}]},{\"@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 an Article Banner Generator","description":"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.","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-an-article-banner-generator-in-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Create an Article Banner Generator","og_description":"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-24T19:57:24+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/"},"author":{"name":"","@id":""},"headline":"Create an Article Banner Generator","datePublished":"2022-03-24T19:57:24+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/"},"wordCount":5,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","keywords":["Guest Post","Image","JAMStack","NuxtJS","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/","name":"Create an Article Banner Generator","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","datePublished":"2022-03-24T19:57:24+00:00","description":"The creation of an article banner generator gives a pictorial representation of its body that allows you to dynamically select an image of your choice, write some text on it, change the background, and text color.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","width":6016,"height":4016},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-an-article-banner-generator-in-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create an Article Banner Generator"}]},{"@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\/v1681925947\/Web_Assets\/blog\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee\/a3f4b64a237b0cb70e7e182af62b2b07510f6ed1-6016x4016-1_27901338ee.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27900","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=27900"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27900\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27901"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}