Teachers Pay Teachers Quote Box: Animated GIF
Learn from MY mistakes!
Beginning reading is the focus of my blog, but today I’m going off-topic. A fellow Teachers Pay Teachers seller asked for help creating an animated gif in her quote box, so I thought I might help you, at the same time!
There’s quite a learning curve to setting up a store on Teachers Pay Teachers! One of the most challenging aspects of the process for me has been putting a slide show in the quote box on my TpT home page—the rectangular gray area to the right of our votes, and to the left of our free download box.
I had previously put static images in my quote box, and that was hard enough!
But several months ago I learned how to put up the rotating images—commonly referred to as an animated GIF. (Well, let’s just say that I “accomplished” the task…since, when I went to change the GIF, it was still quite challenging.)
So, having recently “accomplished” a new slide show (Phew!), I thought I would share the problems I had, so others can learn from my mistakes.
Are you ready? Here we go!
First: Thanks to TpT Sellers
I want to thank all the TpT sellers who have so generously shared their expertise on setting up images (static or animated) in the quote box. You can find lots of tutorials on blogs or YouTube by doing a search for tpt quote box animated gif.
Here are links to some of the blog posts that helped me:
The most recent post that helped me was by Shelley, at Pitch Clips:
Oddly enough, I found the answers to one of my problems (Problem B) in a comment left under this blog post! Thank you, Shelley, for your tutorial, and thanks to Stella Cook for asking her blurriness question in the comment section! (https://www.teacherspayteachers.com/Store/My-Kinder-Garden) More about the blurriness problem later…
Now the basics
First I’ll summarize the steps for making the slide show, and then I’ll explain each step in detail, pointing out the problems that can arise.
Here are the 10 steps you will take:
- Create images on PowerPoint.
- Set up your html formula on a PPT slide.
- Create the animated GIF at gifmaker.me.
- Upload the GIF to its new online home.
- Shorten the image url at bitly.com.
- Decide which product you want to take people to, when they click on your lovely slide show.
- Shorten that product’s url in bitly.
- Insert the two shortened urls into the html formula.
- Copy the html code to your personal quote area.
- If you succeeded, congratulate yourself! If you didn’t–stay calm, know that you’re not alone, and try to figure out what went wrong.
Next the details
Now let’s look more closely at each step and the problems I had along the way.
Step 1. Create images on PowerPoint.
Open a PowerPoint document. You are going to have one page (slide) for each image you want in your slide show, plus a final page with your html code.
Problem A: curly quotation marks
I first tried to do all this in Word, but encountered problems due to curly quotation marks. You will be using quotation marks in the html code, and they have to be straight, not curly. A little research turned up the fact that PowerPoint works better than Word for this process. Using the Calibri font in PPT solved that problem. (Some fonts use curly quotation marks, and some straight.)
Remember, the font you use won’t show in your images. It’s just the font you use to write the html code.
Problem B: blurriness
The images can end up blurry if you start with a PPT sized too small. The solution is to set your PPT slides to 30″ X 10″. Do this in the Design tab (custom). This helps to avoid blurriness. You will be changing the size later.
Problem C: wrong background color
If the background color is white or a darker gray, the quote box image can look weird, so you may want to match the background color of the PPT slides to the TpT website color.
To format the background color of your slides, right-click somewhere on the slide, and the format background window will open up on the right. Make sure you have solid fill clicked.
Then go to color→more colors→custom. Set the RGB colors to 241, 241, 241.
I set the background format on the first slide, then used Duplicate Slide (right click) so I didn’t have to keep formatting each slide.
Problem D: images not saved correctly
Design each image on a different slide. You can do as many as you like. I did three the first time, and four the second time, but some people double that.
You want to save twice. First save the whole PowerPoint document. You can save as a regular PPT presentation (extension pptx) or as a template (potx). It really doesn’t matter which. I save everything to a QUOTE BOX folder in the BUSINESS folder in my TPT folder on my computer.
Next you want to save all your images as pngs (images). Save As and select png from the drop down menu.
PPT will ask you whether you want to save all of the slides as png images, or just the slide that is showing (the page you are on). Another mistake I made was to save the images one at a time. It’s quicker to save All Slides as pngs at once, rather than doing singly. Powerpoint will give them the same title, but they will have different numbers.
Beware: When you Save As, if PowerPoint says that the document already exists, and asks, “Do you want to replace it?”–that means you forgot to change the file type to png.
Phew! That was 4 problems in one step. Now on to the next step.
Step 2. Set up your html formula on a PPT slide.
I like to create a final slide in the PPT document where I put the html formula for the quote box, so I have everything I need in one place. It doesn’t matter about the background on this slide. Here’s the code:
<a href=”SHORTENED PRODUCT URL”><img src=”SHORTENEND GIF URL”></a>
Pay close attention to spaces or lack of spaces. Be sure not to put “img scr.” I did that once, because I thought scr stands for screen. Actually src stands for source (image source).
Problem E: Mixing up the urls
Above the html formula, I also type PRODUCT URL on one line, and GIF URL on another line. This is so I won’t mix up the two urls when I copy them into the code later. Don’t worry! You will understand this all a bit more later.
Also double check for Problem A: Make sure you have straight quotation marks.
Save the PowerPoint document again (not pngs, just as a normal PPT doc with extension pptx).
Step 3. Create the animated GIF at gifmaker.me.
The gifmaker.me website is wonderfully easy. It’s nerve-racking the first time, of course, but try to enjoy it–even play around with it a little bit, especially the timing.
Upload your images. They should show up below the Upload Images button. The slide show will start on the right at the top of the Control Panel. If you don’t like the order of the images, simply drag them to change where you want them.
Problem F: Changing the canvas size
Change the canvas size to 450 X 150 pixels (50%) while in gifmaker. Otherwise your quote box images will be HUGE! (Been there, done that!)
Then adjust the Animation Speed in milliseconds for how long you want each slide to be shown. It’s fun to experiment here. I have used 3000, 4000, and 5000, but see what you like. You can get a little chuckle if you lower the number (sometimes happens by accident if you type 300 instead of 3000!). I just ignore everything else (leave Repeat times at 0).
Click the Create GIF Animation button, to make sure that the images change. You should see the page below, with the rotating images at the top.
If the images don’t rotate or you don’t like the speed, click Make a new GIF, and go back and check all the steps above. (And don’t get discouraged. I can’t tell you how many times I had to do this…)
If all is well and the images do rotate, click Download this GIF Image and save on your computer. I save mine in the same QUOTE BOX folder.
Step 4. Upload the GIF to its new online home.
The GIF needs a new home on the web, so it will have a url. Unfortunately, you can’t just leave the slide show on your computer. I have a website, so I upload it to the Library there. Other people use Photobucket or even Pinterest. Sorry. I can’t help you with Photobucket. Try one of the links above for that. With Pinterest, I’ve read that you can upload the image to a secret board and save it there. The Pin will have its own url.
On my WordPress website, I double check to make sure that the dimensions are set to 450 X 150 pixels (3:1). The next step is to copy the url of the image.
Step 5. Shorten the image url at bitly.com.
Problem G: The urls have to be shortened.
TpT limits the number of characters in the quote box html formula to 120, so you have to shorten both the image url and the product link url, which you will deal with below. Just go to bitly.com and follow the directions. Then copy the shortened url for the image to your PPT slide where it says image url. I forgot this step once. No go!
Step 6. Decide which product you want to take people to, when they click on your lovely slide show.
Unfortunately you can only link to one TpT product or page, no matter how many slides you have in your slide show. Copy the url for that product or for your store home page.
Step 7. Shorten that product’s url at bitly.com.
Of course you now know how to shorten urls—easy peasy!! (See Problem G.) Shorten your product/store url at bitly.com.
Step 8. Insert the two shortened urls in the html formula.
Now comes the fun part. Isn’t this exciting? Copy the shortened url into the formula on your last PPT slide where it says product url. (See Step 2.) Don’t forget about Problem A, the curly quotation marks. Make sure they are straight.
Problem H: spaces in the code
For some reason, when you copy the urls into the html formula, spaces sometimes appear around the quotation marks—at least for me. Make sure there are no spaces between the urls and the quotation marks.
Step 9. Copy the html code to your personal quote area.
Problem I: Where to put the html code
I first searched on the TpT Dashboard to see where to put the html code. But you have to go to the My TpT dropdown menu at your store (top right) and click on My Account. In the menu on the left, click on Store Profile. Now you should be able to see your Personal Quote or whatever image you have in there now. Scroll down to the bottom of the page and click the red Edit button. You should see something like this:
See where the code goes? See how it says “Should not exceed 120 characters”? That’s why you did the shortening in bitly. Copy your html code from the last PPT slide to the Personal Quote box. Scroll down and click Save.
This will take you to the Successfully Updated page. Check your GIF. Keep in mind that whatever it shows is what people are seeing when they visit your store.
If something weird is showing in your Personal Quote area, as happened to me many times (!), delete the code in the quote area and type in a quick quotation (in words) so that your store won’t look odd while you are working on redoing your animated GIF.
Step 10. If you succeeded, congratulate yourself! If you didn’t–stay calm, know that you’re not alone, and try to figure out what went wrong. (See below.)
Below is a list of issues you might be having if the animated GIF didn’t work, followed by possible solutions. The solutions are lettered according to the Problems described earlier.
Issue: You can’t figure out where to put the html code.
Solution I: Put the html code in your Personal Quote area under My Account: Store Profile. (Step 9)
Issue: The animated GIF works, but the images are blurry.
Solution B: To avoid blurriness, make sure that you resized your PPT doc to 30 X 10″. (Step 1)
Issue: The image isn’t the right size.
Solution B: Make sure that you resized your PPT doc to 30 X 10″ at the beginning. (Step 1)
Solution F: Make sure you change the canvas/image size to 450 X 150 pxls in gifmaker. (Step 3)
Issue: The background isn’t the same color as the TpT store background.
Solution C: To make your GIF blend in with your TpT store background, format your PPT slide background color to RGB 241, 241, 241. (Step 1)
Issue: Some of your images are missing in the folder.
Solution D: Save your PPT doc once as pptx (regular save), and once as pngs. (Step 1)
Issue: Your html code is too long (longer than 120 characters).
Solution G: Don’t forget to shorten both urls in bitly. (Step 5)
Issue: Only one image is showing. There is no animation or rotation.
Solution A: Make sure you used PowerPoint with Calibri font, so that your quotation marks in your html code are straight. (Step 1)
Solution E: Don’t mix up the two urls you need in the html code: the IMAGE url and the PRODUCT url. (Step 2)
Solution G: Don’t forget to shorten both urls in bitly. (Step 5)
Solution H: Make sure there are no spaces in your html code. (Step 8)
Voilà! Hopefully you have learned from my many mistakes and will be thrilled at your accomplishment, rather than frustrated with the problems! Wouldn’t it be lovely if I could turn my difficulties into your success?!
Happy Animated GIF in your Quote Box!!
(By the way, if you have any other problems, please let me know, and I’ll add them to the checklist! And, of course, if you find any mistakes in these directions, I hope you will point them out to me. We can do this together!)