The Rocketspark picture block gives you a lot of flexibility with adding, cropping, and editing images that appear on your website. The video block allows you to add videos to your website from Youtube and Vimeo with the click of a button.
However, occasionally you need to add GIFs to your website for extra movement and design flexibility. The easiest way to do this is to use an image hosting service like Imgur to host the GIFs and then add them to Rocketspark using the HTML block.
- Create an Imgur account and upload all the GIFs to that account in the right size that you need them for the website.
- Copy the address that the GIF is stored at on the Imgur website.
(If this box doesn't come up, right-click on the GIF and select Copy Image Address). - Login to your Rocketspark dashboard and navigate to the page where you are wanting to add the GIF to.
- Add a Stack where you want the GIF to go and then choose the HTML Block from the block options.
- Paste the address into the HTML Block and add the following code around the address.
<img src="Your address here.gif">
Note: You may need to add .gif to the end of the address so that it pulls just the GIF without all the extra content around it. - Click Publish and check that the GIF is showing as required. If not, check the GIF is live on Imgur or that all the punctuation is 100% correct in the code.
Extra for Experts
Sometimes you may want to do more with your GIFs than just embed them onto your site.
Make your GIF responsive
Making something responsive means making it so it will change size and shape depending on the size of the screen. The code above will embed the GIF at the same size it was uploaded at. To make it responsive, simply add the following code just before the closing > in the <img> tag:
style="width: 100%; max-width: 100%; height: auto;"
Your final code will then look something like this:
<img src="Your address here.gif" style="width: 100%; max-width: 100%; height: auto;">
Your GIF should now scale up and down with the size of the screen, however, if the screen goes wider than the resolution at which you uploaded it, it won't expand beyond that point.
Link your GIF to a page
If you want your GIF to link off to another website you'll need to add a bit of extra code on either side of the <img> tag. The code you'll need is below:
<a href="Your link here"><img src="Your image here.gif"></a>
If you're linking to a page on your site, you'll need to navigate to that page in the editor, then remove everything to the right of /page/ otherwise it will open in a new tab/window. For example, if the URL looked something like this:
https://my-site.rocketspark.com/page/my-page/
You'd only need the bolded /page/my-page/ part as your link.