hugo post image process. Resize, Center, FancyBox

application.js

  let images = document.querySelectorAll('.article-entry img');
  images.forEach(function (i) {
    i.style.maxHeight = '450px'
    i.style.maxWidth = '600px';
    i.style.boxShadow = '2px 2px 8px 0px #888888';
    i.style.borderRadius = '8px';
    let a = document.createElement("a");
    a.setAttribute("data-fancybox", "gallery");
    a.setAttribute("href", i.getAttribute("src"));
    a.setAttribute("data-caption", i.alt);
    i.parentElement.appendChild(a);
    let info = document.createElement("p");
    info.style.fontSize = '12px';
    info.style.color = "gray";
    let tip = "click to see big pic";
    if (i.alt != undefined && i.alt != '') {
      tip = "[" + i.alt + "]" + tip;
    }
    info.innerText = tip;
    i.parentElement.appendChild(info);
    a.insertAdjacentElement("afterbegin", i);
    i.parentElement.parentElement.style.textAlign = 'center';
  });