Back

Documentation

Table of Contents

How to pin images from any website

Pinning images without going through the upload process requires a browser bookmarklet.

Create a new bookmark, call it PropertyPin and add the code below. After clicking the bookmarklet, a “Pin It” button overlay will appear when hovering any image on the page.

javascript:(function(){const e=document.querySelectorAll("img");e.forEach(e=>{const t=document.createElement("button");t.innerText="⨀ Pin",t.style.position="absolute",t.style.top="10px",t.style.right="10px",t.style.backgroundColor="#78e08f",t.style.color="#000",t.style.fontWeight="700",t.style.padding="5px 10px",t.style.cursor="pointer",t.style.zIndex="1000",t.style.display="none",t.style.border="none",t.style.borderRadius="48px",t.style.background="linear-gradient(#b8e994 0%, #78e08f 100%)",t.style.boxShadow="rgba(0, 0, 0, 0.2) 0px 0px 0px 1px inset";const n=e.parentElement;"static"===getComputedStyle(n).position&&(n.style.position="relative"),n.appendChild(t);const o=()=>{t.style.display="block"},s=()=>{t.style.display="none"};e.addEventListener("mouseenter",o),e.addEventListener("mouseleave",s),t.addEventListener("mouseenter",o),t.addEventListener("mouseleave",s),t.addEventListener("click",()=>{let t=e.src;if(!t&&e.srcset){const n=e.srcset.split(",").map(e=>e.trim().split(" "));t=n.reduce((e,t)=>parseInt(e[1],10)>parseInt(t[1],10)?e:t)[0]}const n=encodeURIComponent(window.location.href),o=%60https://propertypin.co/?pin=${encodeURIComponent(t)}&source=${n}&remotepin=true%60;window.open(o,"_blank")})})})();

How to pin any images from any website you control

Add the code snippet below and CTRL+click on any image. Make sure the image is high resolution enough (1000×1000 or higher is recommended).

document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('img');

    images.forEach(img => {
        const checkImageSize = () => {
            if (img.naturalWidth > 600 && img.naturalHeight > 600) {
                img.title = "CTRL+click to save to PropertyPin";
            }
        };

        if (img.complete) {
            checkImageSize();
        } else {
            img.onload = checkImageSize;
        }
    });

    function handleCtrlClick(event) {
        if (event.target.tagName === 'IMG' && event.ctrlKey) {
            event.preventDefault();

            const image = event.target;
            if (image.naturalWidth > 600 && image.naturalHeight > 600) {
                const imageUrl = encodeURIComponent(image.src);
                const pageUrl = encodeURIComponent(window.location.href);
                const targetUrl = `https://propertypin.co/?pin=${imageUrl}&source=${pageUrl}&remotepin=true`;

                window.location.href = targetUrl;
            }
        }
    }

    document.addEventListener('click', handleCtrlClick);
});

Use the link below and pass the high resolution image URL and the page URL:

https://propertypin.co/?pin={imageURL}&source={pageURL}

Note: Replace {imageURL} with your image URL and {pageURL} with your page URL.

Example:

<a href="https://propertypin.co/?pin=https://www.example.com/my-page/my-image.jpg&source=https://www.example.com/my-page/">Pin</a>