How to use an animated GIF in the Drag and Drop Editor
The following step by step guide covers how to use an animated .gif in our drag and drop editor.
Click "Gallery" on the orange bar along the top of the editor to load your File Manager.
Upload your animated .gif image to your File Manager.
Right click the image, and go to "Edit". Once the "Edit image" window has popped up, click "Resize" on the left.
The maximum width for an image to fit the body of the email is 534 pixels. If your image is larger than that, change the number in the "W" box to 534 (leaving the "Constrain proportions" box ticked).
Once you have changed the W to 534, click somewhere else (e.g. on the grey area at the side) and you should see the "H" property automatically change.
Now make a note of the W and H (example width=534, height=288).
Note: If your animated gif was 534 pixels wide or less already, just take note of the dimensions, no need to edit anything in the W and H boxes.
Now click the X at the top right of the "Edit image" pop up to exit out of it (not saving over the image).
You should now be back in your File manager again.
Right click your animated .gif image again and this time select "Info".
Highlight everything in the "Url" field, right click and copy. (You should now have the URL to the .gif image copied).
Paste this somewhere (such as a blank notepad document) as you will need to quickly copy it again shortly.
Click "Ok" and the click the X at the top right of the "MoxieManager" window to close your File Manager.
You should now be back in the editor.
Click inside the text box, a grey toolbar should appear at the top with options such as Bold, Italic etc. Just to the left of the "Fields" dropdown there is a source code < > button. Click this.
Note: at times, the toolbar disappears in the text blocks. If that happens just click inside another block and back inside the block you are editing.
In the "Source Code" pop up window, delete everything. Then paste in the following:
<p align="center"><img class="mobile-full" style="display: block; margin-left: auto; margin-right: auto;" src="insert image URL here" width="200" height="200" /></p>
Update "insert image URL here" with your image url, and change the width and height from 200 to the dimensions you previously noted.
Click "Ok" and the animated .gif image should now be in your email.
Additional notes: This guide is written for the purpose of using an animated .gif which would occupy the full width of your email.
If you are using a .gif which will be placed in a layout with 2 columns, the maximum width should be 258px.
If you are using a .gif which will be placed in a layout with 3 columns, the maximum width should be 166px.
If you are using a side article block (A block with an image to one side, and a text/title/button to the other side), the image has 3 sizes: Small, Medium, and Big.
If you're using this block to present a .gif, the max widths will need to be:
Small - 120px
Medium - 166px
Big - 258px