{"id":32808,"date":"2024-02-09T07:00:00","date_gmt":"2024-02-09T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32808"},"modified":"2025-04-16T12:34:49","modified_gmt":"2025-04-16T19:34:49","slug":"hugo-cloudinary-assets-delivered-one-image-partial","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial","title":{"rendered":"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong><em>How and why to serve Cloudinary assets with Hugo and the cloudinary-core-shrinkwrap.js library.<\/em><\/strong><\/p>\n\n\n\n<p>This is a continuation of my previous blog post, \u201c<a href=\"https:\/\/cloudinary.com\/blog\/editor-friendly-image-transformation-optimized-delivery-cloudinary-decap-cms\">Editor-Friendly Image Transformation and Optimized Delivery With Cloudinary and Decap CMS<\/a>\u201d, where we showed how to set up simple yet powerful ways for editors to define assets with Decap CMS and Cloudinary. This blog post also assumes you\u2019ve set up the project with Hugo, Decap, and Cloudinary. If you haven\u2019t, follow the steps in the first blog post.<\/p>\n\n\n\n<p>Hugo actually has its way of <a href=\"https:\/\/gohugo.io\/content-management\/image-processing\/\">processing images<\/a>, which is pretty powerful. However, storing images in a git repository isn\u2019t scalable. GitHub and other providers limit the size of files allowed in repositories. We can work around that by using <a href=\"https:\/\/git-lfs.com\/\">Git Large File Storage<\/a> (LFS), but it doesn\u2019t provide the best developer experience. Instead, I recommend using a digital asset manager (DAM) like Cloudinary to store, transform, and deliver such assets.<\/p>\n\n\n\n<p>In this blog post you\u2019ll learn how to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up Hugo Layouts.<\/li>\n\n\n\n<li>Use Cloudinary\u2019s URLs.<\/li>\n\n\n\n<li>Create Responsive Images with Cloudinary.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up Hugo Layouts<\/strong><\/h2>\n\n\n\n<p>Let\u2019s set up Hugo minimally, just to render our blog posts. The focus will be on the image partial.<\/p>\n\n\n\n<p>Create a dummy single layout and a blog post with a title, image partial, and markdown content. I included some basic styles for readability.<\/p>\n\n\n<pre class=\"wp-block-code\" 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\">layouts\/_default\/single.html\n\n<span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"UTF-8\"<\/span>&gt;<\/span>\n\n\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"viewport\"<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">\"width=device-width, initial-scale=1.0\"<\/span>&gt;<\/span>\n\n\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>{{ .Title }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\n\n\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n\n\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">main<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span> auto;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">840px<\/span>;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attribute\">font-family<\/span>: sans-serif;\n\n\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0<span class=\"hljs-selector-tag\">img<\/span> {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n\n\u00a0\u00a0\u00a0}\n\n\u00a0<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>{{ .Title }}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n\n\u00a0\u00a0\u00a0{{ partial \"image\" (dict \"src\" .Params.image \"alt\" .Title) }}\n\n\u00a0\u00a0\u00a0{{ .Content }}\n\n\u00a0<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">main<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/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\n\n<p>Add the image partial. We\u2019ll improve on this later.<\/p>\n\n\n\n<p><code>layouts\/partials\/image.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" 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\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{ .src }}\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"{{ .alt }}\"<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><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\n\n<p><code>content\/blog\/post.md<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">---\n\ntitle: Post\n\n<span class=\"hljs-attr\">image<\/span>: https:<span class=\"hljs-comment\">\/\/res.cloudinary.com\/poslovnimediji\/image\/upload\/sample.jpg<\/span>\n\n---\n\nSome markdown content<\/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\n\n<p>Run <code>hugo server<\/code><\/p>\n\n\n\n<p>You should access this on <code>http:\/\/localhost:1313\/blog\/post\/<\/code> and see a simple page with your title, image, and content:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/O3FXQ1fnM9Eyy1ODjnEwMwgdVBDBaLEN4AlNyhbDW5Q-fGHuQfIO5LYsa_APATp3B5KQY_cZlOhy84A0QzO_sWoMNnCp9soXnz4rBuH15eZZ32rvAq4DGSGVzVpkOUuIcQzYfvS42UWKIbn8Eqm3XV8\" alt=\"Post layout\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Using Cloudinary\u2019s URLs<\/strong><\/h2>\n\n\n\n<p>We\u2019ve seen that we can get different URLs from the Cloudinary Media Library widget. It can be just a filename, a URL without transformations, or a URL with transformations. Let\u2019s look at delivery options for the first two. If we get a URL with transformations, we can just use it directly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Filename<\/strong><\/h3>\n\n\n\n<p>We get only the asset ID from our frontmatter, so we must store the domain and some default transformations elsewhere. We can do this in the <code>hugo.toml<\/code> file, so it\u2019s accessible under site.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">hugo.toml\n\n&#91;params]\n\n&#91;params.cld]\n\nurl = <span class=\"hljs-string\">\"https:\/\/res.cloudinary.com\/poslovnimediji\/image\/upload\/\"<\/span>\n\ntransform = <span class=\"hljs-string\">\"c_fill,w_auto,g_auto,q_auto,dpr_auto\/f_auto\"<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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\n\n<p>We can now use this in our partial.<\/p>\n\n\n\n<p><code>layouts\/partials\/image.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" 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\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{ print site.Params.cld.url site.Params.cld.transform .src }}\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"{{ .alt }}\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- src: https:\/\/res.cloudinary.com\/poslovnimediji\/image\/upload\/c_fill,w_auto,g_auto,q_auto,dpr_auto\/f_auto\/sample.jpg --&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><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\n\n<p>Unfortunately, the filename option won\u2019t supply us with the subfolder, so we have to hardcode it. However, an editor can easily include an asset from another folder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>URL Without transformations<\/strong><\/h3>\n\n\n\n<p>This option will supply us with the subfolder to use directly, but we still need to add the default transformations from hugo.toml. To achieve this, let\u2019s take apart the URL, add the transformations, and reconstruct the URL.<\/p>\n\n\n\n<p><code>layouts\/partials\/image.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" 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-comment\">&lt;!-- get Cloudinary base url and common transformations from hugo.toml --&gt;<\/span>\n\n{{ $cldUrl := site.Params.cld.url }}\n\n{{ $cldTransform := site.Params.cld.transform }}\n\n{{ $src := .src }}\n\n<span class=\"hljs-comment\">&lt;!-- check if image is hosted on Cloudinary --&gt;<\/span>\n\n{{ if hasPrefix $src $cldUrl\u00a0 }}\n\n\u00a0<span class=\"hljs-comment\">&lt;!-- get asset id from the url --&gt;<\/span>\n\n\u00a0{{ $assetId := replace $src $cldUrl \"\" }}\n\n\u00a0<span class=\"hljs-comment\">&lt;!-- construct image url again with transformations --&gt;<\/span>\n\n\u00a0{{ $src = print $cldUrl $cldTransform \"\/\" $assetId }}\n\n\u00a0<span class=\"hljs-comment\">&lt;!-- src: https:\/\/res.cloudinary.com\/poslovnimediji\/image\/upload\/c_fill,w_auto,g_auto,q_auto,dpr_auto\/f_auto\/sample.jpg --&gt;<\/span>\n\n{{ end }}\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"{{ $src }}\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"{{ .alt }}\"<\/span>&gt;<\/span><\/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\n\n<p>A different approach for the same result would be to use <code>default_transformations<\/code> in the Decap config. This will add transformations to all URLs of the selected assets. If you decide to change the default transformations, you\u2019ll have to update all existing URLs. In the example above, you can just change the <code>hugo.toml<\/code> file.<\/p>\n\n\n\n<p>If you go with any of the two approaches, I recommend setting <code>use_transformations: false<\/code> in Decap. This way, any unwanted transformations set by the editor will be ignored. If you want to allow the editor to set transformations, you can set <code>use_transformations: true<\/code> and chain it on top of default transformations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Creating Responsive Images With Cloudinary<\/strong><\/h2>\n\n\n\n<p>Cloudinary\u2019s JS library <code>cloudinary-core-shrinkwrap.js<\/code> is an excellent tool for setting the width transformation on the client side. It will set the image&#8217;s src attribute to the URL with the width transformation that fits the container. This way, we can have a single image in the content and let Cloudinary handle the rest.<\/p>\n\n\n\n<p>Add these scripts to your template before the closing body tag to add the library to the project.<\/p>\n\n\n\n<p><code>layouts\/_default\/single.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" 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\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/npm\/cloudinary-core@2.11.3\/cloudinary-core-shrinkwrap.min.js\"<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"actionscript\">\n\n\u00a0<span class=\"hljs-keyword\">const<\/span> cl = cloudinary.Cloudinary.new({ cloud_name: <span class=\"hljs-string\">'poslovnimediji'<\/span> });\n\n\u00a0cl.responsive();\n\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- CDN is used here, but you can also serve it from your static folder --&gt;<\/span><\/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\n\n<p>Now add the cld-responsive class to the image and change the src attribute to data-src.<\/p>\n\n\n\n<p><code>layouts\/partials\/image.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&lt;img data-src=<span class=\"hljs-string\">\"{{ $src }}\"<\/span> <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span><\/span>=<span class=\"hljs-string\">\"cld-responsive\"<\/span> alt=<span class=\"hljs-string\">\"{{ .alt }}\"<\/span>&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><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\n\n<p>More information on responsive images can be found in the <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_client_side_js\">Cloudinary documentation using the cloudinary-core JS library<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mobile and Desktop images<\/strong><\/h3>\n\n\n\n<p>A common use case is to have a different image for mobile and desktop, and editors should be able to set both in the CMS. This is an easy way to render both images.<\/p>\n\n\n\n<p><code>layouts\/partials\/image.html<\/code><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">&lt;!-- get Cloudinary base url <span class=\"hljs-keyword\">and<\/span> common transformations from hugo.toml --&gt;\n\n{{ $cldUrl := site.Params.cld.url }}\n\n{{ $cldTransform := site.Params.cld.transform }}\n\n{{ $src := .src }}\n\n{{ $srcDesktop := .srcDesktop }}\n\n{{ <span class=\"hljs-keyword\">if<\/span> hasPrefix $src $cldUrl }}\n\n\u00a0{{ $assetId := replace $src $cldUrl <span class=\"hljs-string\">\"\"<\/span> }}\n\n\u00a0{{ $src = <span class=\"hljs-keyword\">print<\/span> $cldUrl $cldTransform <span class=\"hljs-string\">\"\/\"<\/span> $assetId }}\n\n{{ end }}\n\n{{ <span class=\"hljs-keyword\">if<\/span> hasPrefix $srcDesktop $cldUrl }}\n\n\u00a0{{ $assetIdDesktop := replace $srcDesktop $cldUrl <span class=\"hljs-string\">\"\"<\/span> }}\n\n\u00a0{{ $srcDesktop = <span class=\"hljs-keyword\">print<\/span> $cldUrl $cldTransform <span class=\"hljs-string\">\"\/\"<\/span> $assetIdDesktop }}\n\n{{ end }}\n\n&lt;picture&gt;\n\n\u00a0{{ <span class=\"hljs-keyword\">if<\/span> $srcDesktop }} &lt;!-- check this <span class=\"hljs-keyword\">if<\/span> field is optional --&gt;\n\n\u00a0\u00a0\u00a0&lt;source media=<span class=\"hljs-string\">\"(min-width: 768px)\"<\/span> srcset=<span class=\"hljs-string\">\"{{ $srcDesktop }}\"<\/span>&gt;\n\n\u00a0{{ end }}\n\n\u00a0&lt;img src=<span class=\"hljs-string\">\"{{ $src }}\"<\/span> alt=<span class=\"hljs-string\">\"{{ .alt }}\"<\/span>&gt;\n\n&lt;\/picture&gt;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>We\u2019ve seen some options to deliver <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Cloudinary assets<\/a> with Hugo. You can use some of them together to get the best results. For example, you can use the mobile plus desktop image and add the <code>cld-responsive<\/code> class to deliver the best image for the container.<\/p>\n\n\n\n<p>Elevate your web design and create stunning, responsive websites with images that adapt to any framework. Cloudinary streamlines your image management, ensuring optimal display across devices. <a href=\"https:\/\/cloudinary.com\/users\/register_free\">Sign up for free today<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How and why to serve Cloudinary assets with Hugo and the cloudinary-core-shrinkwrap.js library. This is a continuation of my previous blog post, \u201cEditor-Friendly Image Transformation and Optimized Delivery With Cloudinary and Decap CMS\u201d, where we showed how to set up simple yet powerful ways for editors to define assets with Decap CMS and Cloudinary. This [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32810,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[89,134],"class_list":["post-32808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-digital-asset-management","tag-guest-post"],"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>Deliver Cloudinary Assets With Hugo<\/title>\n<meta name=\"description\" content=\"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.\" \/>\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\/hugo-cloudinary-assets-delivered-one-image-partial\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial\" \/>\n<meta property=\"og:description\" content=\"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-09T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T19:34:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/hugo-cloudinary-assets-delivered-one-image-partial#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial\",\"datePublished\":\"2024-02-09T15:00:00+00:00\",\"dateModified\":\"2025-04-16T19:34:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\"},\"wordCount\":754,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA\",\"keywords\":[\"Digital Asset Management\",\"Guest Post\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\",\"url\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\",\"name\":\"Deliver Cloudinary Assets With Hugo\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA\",\"datePublished\":\"2024-02-09T15:00:00+00:00\",\"dateModified\":\"2025-04-16T19:34:49+00:00\",\"description\":\"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Deliver Cloudinary Assets With Hugo","description":"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.","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\/hugo-cloudinary-assets-delivered-one-image-partial","og_locale":"en_US","og_type":"article","og_title":"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial","og_description":"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.","og_url":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial","og_site_name":"Cloudinary Blog","article_published_time":"2024-02-09T15:00:00+00:00","article_modified_time":"2025-04-16T19:34:49+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial","datePublished":"2024-02-09T15:00:00+00:00","dateModified":"2025-04-16T19:34:49+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial"},"wordCount":754,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA","keywords":["Digital Asset Management","Guest Post"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial","url":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial","name":"Deliver Cloudinary Assets With Hugo","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA","datePublished":"2024-02-09T15:00:00+00:00","dateModified":"2025-04-16T19:34:49+00:00","description":"Learn how to set up Hugo Layouts, use Cloudinary\u2019s URLs, and create Responsive Images with Cloudinary to deliver your assets.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/hugo-cloudinary-assets-delivered-one-image-partial#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Delivery With Hugo: Cloudinary Assets Delivered With One Image Partial"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1706907632\/delivery_with_Hugo-blog\/delivery_with_Hugo-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32808","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32808"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32808\/revisions"}],"predecessor-version":[{"id":37427,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32808\/revisions\/37427"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32810"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}