Hi, nooby here
Maybe I can help you guys out having the same problem: I’m building a website for a client and she wants to have the ability to change images etc. herself but she doesn’t have any technical knowledge.
I’m taking the approach to add multiple widgets to netlify cms:
-
install netlify CMS as you would
- download this wonderful https://sharadcodes.github.io/hugo-shortcodes-netlify-cms/dist/hugo_shortcodes_netlify_cms.js template, save it in /static/js/ (or where appropriate) and linkt to it in your „/static/admin/index.html“:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<!-- Include custom shortcodes in netlify CMS thanks to https://github.com/sharadcodes/hugo-shortcodes-netlify-cms -->
<script src="/js/hugo_shortcodes_netlify_cms.js"></script>
</body>
</html>
- now add your new component to “hugo_shortcodes_netlify_cms.js”:
CMS.registerEditorComponent({
id: "Bild",
label: "Bild",
fields: [{
name: "title",
label: "Bild Titel",
widget: "string"
},
{
name: "src",
label: "Bild Quelle",
widget: "image"
},
],
pattern: /{{< img src="([a-zA-Z0-9-_ ]+)" title="([a-zA-Z0-9-_ ]+)" >}}/,
fromBlock: function(match) {
return {
title: match[1],
src: match[2],
};
},
toBlock: function(obj) {
return `{{< img src="${obj.src}" title="${obj.title}" class="img-responsive">}}`;
},
toPreview: function(obj) {
return `<img><img src=${obj.src} alt=${obj.title}><figcaption>${obj.title}</figcaption></img>`;
},
});
- as you can see, I’m using the following shortcode (along with fancybox) – substitute for your own shortcode here:
{{ $path := .Get "src" }}
{{ $caption := .Get "title" }}
<div class="fancybox">
<a data-fancybox="gallery" href="{{ $path | absURL }}" data-caption="{{ $caption }}">
<img src="{{ $path | absURL }}" class="img-responsive" alt="" loading="lazy" />
</a>
</div>
- now create a new shortcode, I’ve named it img50c.html (centered image 50% width) and inserted a new class “img-50c”:
{{ $path := .Get "src" }}
{{ $caption := .Get "title" }}
<div class="fancybox">
<a data-fancybox="gallery" href="{{ $path | absURL }}" data-caption="{{ $caption }}">
<img src="{{ $path | absURL }}" class="img-50c" alt="" loading="lazy" />
</a>
</div>
- add the new shortcode to your “/js/hugo_shortcodes_netlify_cms.js” like so:
CMS.registerEditorComponent({
id: "bild50c",
label: "Bild 50% Zentrum",
fields: [{
name: "title",
label: "Bild Titel",
widget: "string"
},
{
name: "src",
label: "Bild Quelle",
widget: "image"
},
],
pattern: /{{< img50c src="([a-zA-Z0-9-_ ]+)" title="([a-zA-Z0-9-_ ]+)" >}}/,
fromBlock: function(match) {
return {
title: match[1],
src: match[2],
};
},
toBlock: function(obj) {
return `{{< img50c src="${obj.src}" title="${obj.title}" >}}`;
},
toPreview: function(obj) {
return `<img><img50c src=${obj.src} alt=${obj.title}><figcaption>${obj.title}</figcaption></img>`;
},
});
- and create the appropriate css class:
.img-50c {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
- rinse, repeat
- profit
I hope this helps. It’s not optimal but the best I could come up with.