Change size of Pins

Ask the Community Customization
1

Change size of Pins

1 Like
2

Hi there @Andrew_Marchbank and welcome aboard :wave:

The size of pins depends on their number in the feed. Unfortunately, there is no option to set the number of columns in the widget’s configurator. However, our devs came up with a custom script for you:

<script>
const MAX_WIDTH_PIN = 300;

window.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  document.head.appendChild(style);

  const resizeObserver = new ResizeObserver(([{ contentRect }]) => {
    const { width } = contentRect;

    const columns = Math.floor(width / MAX_WIDTH_PIN);

    style.innerHTML = `
        .eapps-pinterest-feed .eapps-pinterest-feed-pin-container {
            max-width: calc(100% / ${columns}) !important;
        }
    `;
  });

  resizeObserver.observe(document.body);
});
</script>

You need to add this code right after your widget’s installation code. This script will control the changes of the browser window and adjust the needed number of columns.

In the variable MAX_WIDTH_PIN, we specify the maximum width of the pin block. If fewer columns and a larger image are needed, increase this value.

Check it out and let me know if it worked for you :slightly_smiling_face: