I had a couple of problems I wanted to resolve:
- The hovering Save button was in the wrong location for some of the pictures in the gallery.
- Pins from all of the pictures in the gallery had the same description, taken from the gallery page description. I wanted the description to come from the captions that display in the gallery.
Fixing the Position of Pinterest Hovering Save Button on Gallery Thumbnails
<script async defer data-pin-hover="true" data-pin-save="true" src="//assets.pinterest.com/js/pinit.js"></script>
To get to the footer code of your page when editing your website in Weebly, select Pages and then select your page from the list at the left of the screen. Select SEO Settings and scroll down toward the bottom until you see the box labeled FOOTER CODE. Paste the code there.
On the Weebly Gallery options, I chose the square aspect ratio for my gallery thumbnails so that they would make a nice uniform array of pictures. This crops all the pictures into squares for the thumbnail array. However, the Pinterest Save button hovers over the top left corner of the original picture, instead of the top left corner of the cropped picture. So some of the pin buttons hover over non-visible parts of the pictures. When you try to click on them, they disappear as soon as your pointer leaves the visible picture.
I decided to correct this problem by forcing the cropped thumbnail picture to include the top left corner of the original picture. The way to do this is to add the following to main-style.css:
.galleryImage {
top: 0 !important;
left: 0 !important;
}
To edit the main-style.css file, select Theme on the main menu. Then click on the Edit HTML/CSS button on the bottom left of the screen. You will find main-style.css under the ASSETS folder. I don't know if it matters where in the file you put the code, but I put it right after the formatting for .galleryImageHolder as shown in the screenshot below:
In the next post, I will cover how I changed the pin descriptions to come from the Gallery captions for the pictures rather than from the page description.