Add Button Style options 📌

[robinmetral]

See Pinterest Developers

Types of Save buttons

1. • Image Hover: save any image on hover
2. • One Image: save a single predefined image
3. • Any Image: save any image from the page

Button Style options for each type

1. Image Hover

• data-pin-hover: set to true to activate image hover
• data-pin-tall: bigger button
• data-pin-round: round logo button
• data-pin-sticky: if false hover buttons won't appear on mobile devices

2. One Image

• data-pin-tall: bigger button
• data-pin-round: round logo button
• data-pin-count: show Save count above button (Not for round buttons)

3. Any Image

• data-pin-tall: bigger button
• data-pin-round: round logo button
• data-pin-count: show Save count above or beside the button (Not for round buttons)

[lilyntalmers]

I am facing the same issue. Currently I am using Image Hover but I want to use Any Image.

[robinmetral]

Hey @lilyntalmers, thanks for reaching out 🙂 Do you want to open a PR for this? I'm a bit busy at the moment but I'm happy to help with the feature or review code!

[robinske]

Hey @robinmetral question about this issue -

data-pin-tall and data-pin-round are independent attributes from data-pin-hover, however the plugin always sets data-pin-hover if you provide the saveButton config.

saveButton is a bit confusing because it's actually the data-pin-hover setting.

Looks like the plugin used to support top level round/tall settings but those are now marked as deprecated. Did you have another idea to support those at the script level but also add One Image and Any Image support?

Maybe something like:

options: {
  hover: {  // replaces existing saveButton
    round: false,
    tall: true,
  },
  oneImage: {  // requires data-pin-do=buttonPin on pages where you want to add the button
    round: false,
    tall: true,
  },
  anyImage: {  // requires data-pin-do=buttonBookmark on pages where you want to add the button
    round: false,
    tall: true,
  }
},

It's repetitive but explicit and would allow more clear support for data-pin-count, data-pin-sticky and anything else that might be missing too. Let me know what you think and I can submit a PR.

[robinmetral]

Hi @robinske, thanks for following-up on this, and sorry it took me so long to respond! Crazy EOY.

About your suggestion for options

Your suggestion makes total sense, I agree that the current config can be confusing since it's not aligned with the Pinterest addon config.

Do you think we should expose every combination of settings, or would something like this work too?

options: {
  buttonTypes: [hover] // hover, oneImage, anyImage (can these be used in combination?)
  buttonStyles: [round, tall] // round, tall, hover, count (available options depend on the type)
}

I'm genuinely not sure, ironically I'm not a big Pinterest user and don't know which combinations we should support 🙈

Whatever we go for, this will naturally have to be a new major version. Let's try to find a solution that's as future-proof as possible, to avoid having to change the plugin's API too often 😛 (my bad)

Side note: let's keep the Pin widget in mind

We also need to keep in mind one more use case: users of gatsby-remark-embedder might want to use the plugin to embed a Pin widget into their markdown (with data-pin-do="embedPin").

This is independent from the Save button: the Pin widget is to render a pin from Pinterest; the Save button is to enable pinning images to Pinterest. See #4 for more context.

That means that we should also support adding the script without any bookmark buttons. Currently this is possible when saveButton is falsy.

[moonmeister]

Thanks for your interest in this project. This plugin is moving into the Gatsby User Collective and this repo will be archived. Please open an issue in that repository, submit a PR if you'd like to see this implemented, or join us on Discord if you have questions!