credit-images.min.js

const imagesToCredit=document.querySelectorAll("img[data-credits]");if(imagesToCredit.length>0){const imageCopyright='<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>\n<path d="M13.5 9.17071C13.1872 9.06015 12.8506 9 12.5 9C10.8431 9 9.5 10.3431 9.5 12C9.5 13.6569 10.8431 15 12.5 15C12.8506 15 13.1872 14.9398 13.5 14.8293" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>\n</svg>',creditsCss="\n.image-with-credits {\n    position: relative;\n    width: fit-content;\n    display: block;\n}\n.image-with-credits .credits-image-box {\n    position: absolute;\n    background-color: #f6f6f6;\n    border-radius: 24px;\n    opacity: .6;\n    display: flex;\n    align-items: center;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n    padding: 4px 4px 0 4px;\n}\n.image-with-credits .credits-image-box.top {\n    top: 12px;\n    left: 10px;\n    margin-right: 10px;\n}\n.image-with-credits .credits-image-box.bottom {\n    bottom: 12px;\n    left: 10px;\n    margin-right: 10px;\n}\n.image-with-credits .credits-image-box .credits-image-cc {\n    color: #666;\n}\n.image-with-credits .credits-image-box .credits-image-text {\n    font-size: 12px;\n    font-family: Arial, Helvetica, sans-serif;\n    padding: 0 12px 2px 6px;\n    display: none;\n}\n.image-with-credits .credits-image-box:hover,\n.image-with-credits .credits-image-box:active {\n    opacity: 1;\n}\n.image-with-credits .credits-image-box:hover .credits-image-text,\n.image-with-credits .credits-image-box:active .credits-image-text  {\n    display: block;\n}",creditsStyleSheet=document.createElement("style");creditsStyleSheet.innerHTML=creditsCss,document.head.appendChild(creditsStyleSheet);for(let i=0;i<imagesToCredit.length;i++)if(""!=imagesToCredit[i].dataset.credits){let position=imagesToCredit[i].dataset.creditsPos&&"bottom"==imagesToCredit[i].dataset.creditsPos?"bottom":"top",style="";imagesToCredit[i].dataset.creditsMargin&&""!=imagesToCredit[i].dataset.creditsMargin&&("top"==position&&(style+=`top:${imagesToCredit[i].dataset.creditsMargin};left:${imagesToCredit[i].dataset.creditsMargin};margin-right:${imagesToCredit[i].dataset.creditsMargin};`),"bottom"==position&&(style+=`bottom:${imagesToCredit[i].dataset.creditsMargin};left:${imagesToCredit[i].dataset.creditsMargin};margin-right:${imagesToCredit[i].dataset.creditsMargin};`)),imagesToCredit[i].dataset.creditsBg&&""!=imagesToCredit[i].dataset.creditsBg&&(style+=`background-color:${imagesToCredit[i].dataset.creditsBg};`),imagesToCredit[i].dataset.creditsColor&&""!=imagesToCredit[i].dataset.creditsColor&&(style+=`color:${imagesToCredit[i].dataset.creditsColor};`);let div=document.createElement("div");div.classList.add("credits-image-box"),div.classList.add(position),""!=style&&div.setAttribute("style",style),div.innerHTML=`<div class="credits-image-cc">${imageCopyright}</div><div class="credits-image-text">${imagesToCredit[i].dataset.credits}</div>`,imagesToCredit[i].parentNode.insertBefore(div,imagesToCredit[i].nextSibling)}}