Home
Support Forums

Registering a New Widget, but Doesn't work!

Hi, I am registerin a new widget to work with hugo.
The Code is here. I can’t see any errors in this code. please help me fix it. It doesn’t show up in editor.

  <script>
    CMS.registerEditorComponent({
      id: "advance_img",
      label: "Advance Image",
      fields: [
          {
              name: "the_image",
              label: "Image",
              widget: "image"
          },
          {
            label: "Align Image"
            name: "align"
            widget: "select"
            options: ["left", "center", "right"]
          },
          {
            label: "Image Size"
            name: "resize"
            widget: "select"
            options: ["exsmall", "small", "medium", "large", "full"]
          },
          {
            label: "Alt & Title"
            name: "title"
            widget: "string"
          },
      ],
      pattern: /{{< img src="([a-zA-Z0-9-_ ]+)" align="([a-zA-Z0-9-_ ]+)" resize="([a-zA-Z0-9-_ ]+)" alt="([a-zA-Z0-9-_ ]+)" title="([a-zA-Z0-9-_ ]+)" >}}/,
      fromBlock: function(match) {
          return {
              the_image: match[1],
              align: match[2],
              resize: match[3],
              title: match[4],
          };
      },
      toBlock: function(obj) {
          return `{{< img src="${obj.the_image}" align="${obj.align}" resize="${obj.resize}" alt="${obj.title}" title="${obj.title}" >}}`;
      },
      toPreview: function(obj) {
          return (`<figure><img src=${obj.the_image} alt=${obj.title}><figcaption>${obj.title}</figcaption></figure>`);
      },
  });
  </script>

Hi @yousafblogger,

Could you share your site URL?