{"id":28534,"date":"2022-05-05T08:40:48","date_gmt":"2022-05-05T08:40:48","guid":{"rendered":"http:\/\/create-a-custom-meetup-banner-in-nuxt.js"},"modified":"2025-09-26T13:43:10","modified_gmt":"2025-09-26T20:43:10","slug":"create-a-custom-meetup-banner-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/","title":{"rendered":"Create a Custom Meetup Banner in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h1>Create a custom meetup banner in Nuxt.js.<\/h1>\n<p>A meetup is a form of informal gathering between people who share common interests or hobbies. Creating a banner for meetups can be a daunting task, and in this article, we\u2019ll discuss how to generate a custom meetup banner.<\/p>\n<p>To build this banner, we will be using <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> and <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>. After reading this article, you\u2019ll have learned how to create a meetup banner using images stored in Cloudinary while applying Cloudinary transformations.<\/p>\n<p>Nuxt.js is a Vue.js-based, open-source JavaScript library that improves building server-rendered Vue.js applications, leading to more performant web applications.<\/p>\n<p>Cloudinary is a cloud-based video and image management platform that offers services for managing and transforming uploaded assets for usage on the web.<\/p>\n<h2>SandBox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/custom-meetup-banner-57o9od\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/custom-meetup-banner-57o9od?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=\"Creating custom meetup banner in Nuxt.js using Cloudinary transformation features on images\"\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<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/custom-meetup-banner\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js.<\/li>\n<li>Basic knowledge of JavaScript.<\/li>\n<li>Familiarity with Nuxt.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 Nuxt project<\/h2>\n<p>Use <code>npx create-nuxt-app &lt;project-name&gt;<\/code> to create a new Nuxt project.\nThe process of scaffolding the project should provide a list of options, which should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651261582\/e-622f762c6cb5ad0068bc82c6\/wliiirc6tdzh03uj4aoc.png\" alt=\"create a Nuxt project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"722\" height=\"281\"\/><\/p>\n<p>After successful project creation, we\u2019ll navigate into our directory and start our application by running the following commands.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\nnpm run dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Nuxt will, in turn, start a hot-reloading development environment that is accessible by default at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:<\/a><a href=\"http:\/\/localhost:3000\">3000<\/a>.<\/p>\n<h2>Cloudinary setup<\/h2>\n<p>To use Cloudinary, we will need to create an <a href=\"https:\/\/cloudinary.com\/\">account<\/a> and also install the <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary Nuxt SDK<\/a> in our project, like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">npm<\/span> <span class=\"hljs-selector-tag\">install<\/span> <span class=\"hljs-keyword\">@nuxtjs<\/span>\/cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h3>Configuring <code>nuxt.config<\/code> for Cloudinary<\/h3>\n<p>We need to configure our Nuxt application in the <code>nuxt.config<\/code> file before we can use Cloudinary.<\/p>\n<p>To do this, we will need to perform the following steps:<\/p>\n<ol>\n<li>Create a <code>.env<\/code> file in the root of our project and add our Cloudinary <strong>Cloudname<\/strong>, <strong>API Key<\/strong>, and the <strong>API Secret<\/strong>. We can find these by navigating to the <a href=\"https:\/\/cloudinary.com\/console\/\">Cloudinary dashboard<\/a>.<\/li>\n<li>Register these properties in our <code>.env<\/code> file like so:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudName=<span class=\"hljs-string\">'***'<\/span>\napiKey=<span class=\"hljs-string\">'***'<\/span>\napiSecret=<span class=\"hljs-string\">'***'<\/span>   \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"3\">\n<li>Register the Cloudinary component for global use in the <code>nuxt.config<\/code> file by adding <code>'@nuxtjs\/cloudinary'<\/code> in the <code>modules<\/code> section<\/li>\n<li>Add a <code>cloudinary<\/code> section in the <code>nuxt.config<\/code> like so:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">cloudinary<\/span>: {\n  <span class=\"hljs-attribute\">cloudName<\/span>: process.env.cloudName,\n  apiKey: process.env.apiKey,\n  apiSecret: process.env.apiSecret,\n  useComponent: true,\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>NB<\/strong>: Endeavor to replace all occurrences of \u201c**\u201d with the correct values.<\/p>\n<h2>Uploading images to Cloudinary<\/h2>\n<p>With our Nuxt app scaffolding completed, we\u2019ll upload images from <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> to Cloudinary.<\/p>\n<p>Cloudinary allows us to upload images via the dashboard by clicking the <strong>Media Library<\/strong> tab.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651262369\/e-622f762c6cb5ad0068bc82c6\/jvngg3pkbqglphtzgr0b.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"889\" height=\"46\"\/><\/p>\n<p>After uploading the images, we will need to copy the <code>public Id<\/code>. This is required to pick each uploaded image from Cloudinary.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651262276\/e-622f762c6cb5ad0068bc82c6\/wj4lzar2zrdutewtmg2n.png\" alt=\"Uploaded image on Cloudinary\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1068\" height=\"262\"\/><\/p>\n<h2>Setting up the image store<\/h2>\n<p>We will need to call our images from the Nuxt application by creating a <code>utils<\/code> folder at the root of our application. We will then create a <code>banner.json<\/code> file within this folder to hold the individual image information for each image occurrence in our application.<\/p>\n<p>A sample snippet of our <code>banner.json<\/code> file should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">&#91;\n  {\n    <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n    <span class=\"hljs-attr\">\"publicId\"<\/span>: <span class=\"hljs-string\">\"s-o-c-i-a-l-c-u-t-unsplash\"<\/span>\n  },\n]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Creating the meetup banner<\/h2>\n<p>In creating the meetup banner, we will need to set up the markup, including Cloudinary\u2019s <code>cld-image<\/code> and <code>cld-transformation<\/code> components, which can be likened to using the native <code>&lt;img&gt;<\/code> tag in an HTML document.<\/p>\n<p>To achieve this, we will navigate to the <code>pages\/index.vue<\/code> file and replace the content with the code from the link below:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/0817c53d64a2cfddff836daaa6fd52d5\">https:\/\/gist.github.com\/MoeRayo\/0817c53d64a2cfddff836daaa6fd52d5<\/a><\/p>\n<p>We achieved the following in the code snippet above:<\/p>\n<ul>\n<li>Imported the banner JSON images from the <code>utils<\/code> folder and declared it in the data properties before using Cloudinary images components \u2014 <code>&lt;cld-image \/&gt;<\/code> and <code>&lt;cld-transformation \/&gt;<\/code> &#8211; to render the images in the application.<\/li>\n<li>Added a <code>click<\/code> function to the images rendered to show the active image.<\/li>\n<li>Created a functional form to handle user input for the event title, details, and speakers.<\/li>\n<li>Added an error message to prompt users to select an image and complete the input fields before submission.<\/li>\n<li>Added a <code>data<\/code> property to manage the form data, error message, and other vital properties.<\/li>\n<\/ul>\n<p>After this stage, our page should look like the image below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651264961\/e-622f762c6cb5ad0068bc82c6\/wpwiaz6gzzfqppfbfect.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"784\" height=\"634\"\/><\/p>\n<h2>Generating the meetup banner<\/h2>\n<p>We\u2019ll create a component that renders the generated banner when the <code>handleSubmit<\/code> function linked to the \u201cGenerate Banner\u201d button is clicked to generate a custom banner.<\/p>\n<p>We will create a <code>GeneratedBanner.vue<\/code> file in the <code>components<\/code> folder and add the code below to the file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"ref\"<\/span> <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"publicId\"<\/span>&gt;<\/span>\n    \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"blur:300\"<\/span>\/&gt;<\/span>\n      \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Berkshire Swash', fontSize: 40, fontWeight: 'bold', text: title}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">opacity<\/span>=<span class=\"hljs-string\">\"90\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"400\"<\/span> <span class=\"hljs-attr\">background<\/span>=<span class=\"hljs-string\">\"#000\"<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"-80\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"-60\"<\/span>\/&gt;<\/span>\n      \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Lustria', fontSize: 16, fontWeight: '', text: description}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#000\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"190\"<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"-200\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"35\"<\/span>\/&gt;<\/span>\n      \n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"{fontFamily: 'Lustria', fontSize: 15, fontWeight: 'bold', text: `Speakers: ${speakers}`}\"<\/span> <span class=\"hljs-attr\">color<\/span>=<span class=\"hljs-string\">\"#fff\"<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"shadow\"<\/span>  <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"fit\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"120\"<\/span> <span class=\"hljs-attr\">background<\/span>=<span class=\"hljs-string\">\"#000\"<\/span> <span class=\"hljs-attr\">x<\/span>=<span class=\"hljs-string\">\"200\"<\/span> <span class=\"hljs-attr\">y<\/span>=<span class=\"hljs-string\">\"130\"<\/span>\/&gt;<\/span>\n      \n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">props<\/span>: {\n      <span class=\"hljs-attr\">title<\/span>: { \n        <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n        <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span> \n      },\n      <span class=\"hljs-attr\">description<\/span>: { \n        <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n        <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span> \n      },\n      <span class=\"hljs-attr\">speakers<\/span>: { \n        <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n        <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\n      },\n      <span class=\"hljs-attr\">publicId<\/span>: { \n        <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-built_in\">String<\/span>, \n        <span class=\"hljs-attr\">required<\/span>: <span class=\"hljs-literal\">true<\/span>\n      },\n    },\n  }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>We achieved the following using the snippet above:<\/p>\n<ul>\n<li>Rendered the generated banner using Cloudinary\u2019s <code>&lt;cld-image \/&gt;<\/code> and <code>&lt;cld-transformation \/&gt;<\/code>.<\/li>\n<li>Configured the Cloudinary components to accept the <code>title<\/code>, <code>description<\/code>, <code>speakers<\/code>, and <code>publicId<\/code> as props.<\/li>\n<li>Cloudinary components support assets transformations, which we leveraged by blurring, changing the width, and cropping images. We also added text transformations like the font family and colours to achieve the desired banner image.<\/li>\n<\/ul>\n<p>To render the <code>GeneratedBanner.vue<\/code> component, in our view, we will need to import it into the <code>index.vue<\/code> file where it is conditionally rendered. Like so:<\/p>\n<p><a href=\"https:\/\/gist.github.com\/MoeRayo\/1cbd5447dd3eb7968602d4e46242a02b\">https:\/\/gist.github.com\/MoeRayo\/1cbd5447dd3eb7968602d4e46242a02b<\/a><\/p>\n<p>The <code>handleSubmit<\/code> method from the snippet above verifies whether an image is selected and if the title and speakers were added before conditionally rendering the <code>GeneratedBanner<\/code> component with the expected props.<\/p>\n<p>At this stage, our application should look like this.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651265081\/e-622f762c6cb5ad0068bc82c6\/bgar66a51s12lkwjjmzq.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1500\" height=\"650\"\/><\/p>\n<h2>Creating a shareable link<\/h2>\n<p>Sharing the generated banner is just as important as the banner creation process. To share our banner, we will modify the <code>GeneratedBanner.vue<\/code> component by adding functionality to create the image URL and a button that enables us to copy the URL.<\/p>\n<p>Thus, we\u2019ll add the following code in the <code>components\/GeneratedBanner.vue<\/code>.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">\"ref\"<\/span> <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"publicId\"<\/span>&gt;<\/span>\n      <span class=\"hljs-comment\">&lt;!-- Cloudinary image transformation code --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-comment\">&lt;!-- Add the shareable link functionality --&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"mv4 dn\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db mb2 f3 fw4 b\"<\/span>&gt;<\/span>Shareable link<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">disabled<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"db w-90 pv3 ph2 br2 ba b--black-40 f7\"<\/span> <span class=\"hljs-attr\">:value<\/span>=<span class=\"hljs-string\">\"url\"<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"f6 link dim br2 ph3 pv2 db white bg-dark-green ba b--green mt2\"<\/span> @<span class=\"hljs-attr\">click<\/span>=<span class=\"hljs-string\">\"copyUrl\"<\/span>&gt;<\/span>{{share}}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n  <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n    <span class=\"hljs-attr\">props<\/span>: {\n      <span class=\"hljs-comment\">\/\/ props<\/span>\n    },\n    data() {\n      <span class=\"hljs-keyword\">return<\/span> {\n        <span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">\"\"<\/span>,\n        <span class=\"hljs-attr\">share<\/span>: <span class=\"hljs-string\">'Share Link'<\/span>\n      };\n    },\n    mounted() {\n      <span class=\"hljs-keyword\">this<\/span>.$nextTick(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">this<\/span>.url = <span class=\"hljs-keyword\">this<\/span>.$refs.ref.$el.src\n      });\n    },\n    <span class=\"hljs-attr\">methods<\/span>: {\n      copyUrl(){\n        navigator.clipboard\n        .writeText(<span class=\"hljs-keyword\">this<\/span>.url)\n        .then(<span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> (<span class=\"hljs-keyword\">this<\/span>.share = <span class=\"hljs-string\">'Copied!'<\/span>))\n        .catch(<span class=\"hljs-function\">(<span class=\"hljs-params\">err<\/span>) =&gt;<\/span> err)\n      }\n    }\n  }\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>    \n    \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The code block above does the following:<\/p>\n<ul>\n<li>Adds a ref attribute to the <code>cld-image<\/code> component to access the <code>src<\/code> attribute of the rendered image in the DOM.<\/li>\n<li>Creates a <code>url<\/code> in the <code>data<\/code> options, which is initialized to \u201cempty\u201d but gets updated with the image <code>src<\/code> value when the component is mounted.<\/li>\n<li>Added a <code>copyUrl<\/code> method that copies the updated URL to the clipboard for easy sharing.<\/li>\n<\/ul>\n<p>Our application, at this stage, should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/mediadevs\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/v1651265178\/e-622f762c6cb5ad0068bc82c6\/nkcmc8dmbsctn2wj0qzv.gif\" alt=\"Completed application\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"368\"\/><\/p>\n<p>Click <a href=\"https:\/\/res.cloudinary.com\/moerayo\/image\/upload\/e_blur:300\/b_rgb:000,c_fit,co_rgb:fff,e_shadow,l_text:Berkshire%20Swash_40_bold:The%20Riverside%20baking%20community,o_90,w_400,x_-80,y_-60\/c_fit,co_rgb:000,l_text:Lustria_16:Join%20us%20at%20the%20Riverside%20Pub%20to%20catch%20up%20on%20the%20latest%20baking%20techniques,w_190,x_-200,y_35\/b_rgb:000,c_fit,co_rgb:fff,e_shadow,l_text:Lustria_15_bold:Speakers:%20Jane%252C%20John,w_120,x_200,y_130\/s-o-c-i-a-l-c-u-t-unsplash\">here<\/a> to find the shareable link from the generated banner.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post explains creating a custom meetup banner using Nuxt.js and Cloudinary transformations.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary-nuxt<\/a>\n<\/li>\n<li>Vue Cloudinary image transformation<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28535,"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,372,371],"class_list":["post-28534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","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 Custom Meetup Banner in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.\" \/>\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-custom-meetup-banner-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 a Custom Meetup Banner in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-05T08:40:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T20:43:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"886\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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-custom-meetup-banner-in-nuxt-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Create a Custom Meetup Banner in NuxtJS\",\"datePublished\":\"2022-05-05T08:40:48+00:00\",\"dateModified\":\"2025-09-26T20:43:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\",\"name\":\"Create a Custom Meetup Banner in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA\",\"datePublished\":\"2022-05-05T08:40:48+00:00\",\"dateModified\":\"2025-09-26T20:43:10+00:00\",\"description\":\"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Custom Meetup Banner in NuxtJS\"}]},{\"@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 Custom Meetup Banner in NuxtJS","description":"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.","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-custom-meetup-banner-in-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Create a Custom Meetup Banner in NuxtJS","og_description":"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-05-05T08:40:48+00:00","article_modified_time":"2025-09-26T20:43:10+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/"},"author":{"name":"","@id":""},"headline":"Create a Custom Meetup Banner in NuxtJS","datePublished":"2022-05-05T08:40:48+00:00","dateModified":"2025-09-26T20:43:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/","name":"Create a Custom Meetup Banner in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","datePublished":"2022-05-05T08:40:48+00:00","dateModified":"2025-09-26T20:43:10+00:00","description":"Learn how to create a custom meetup banner in Nuxt.js using the Cloudinary transformation features on an image.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create a Custom Meetup Banner in NuxtJS"}]},{"@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\/v1681928509\/Web_Assets\/blog\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15\/309e80cd5307e449fa3a884cea4f0f173d494284-886x550-1_28535d6f15.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28534","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=28534"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28534\/revisions"}],"predecessor-version":[{"id":38612,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28534\/revisions\/38612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28535"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}