Member Login

How to add and organize images

This article provides an overview of adding images to your Frankie library, how to organize them into folders, and features some tutorials on ways to work with multiple images. 

You can easily add images to your Frankie library from a few places in the app depending on your account type and permission level, however, you can only organize images into folders while using the drag and drop editor. First, let's go over adding images in the drag and drop editor.

How to add images to image placeholders

Image placeholders are what load in your campaign when you select to add the Image or Images blocks from the drag and drop editor, then after you add an image to that spot you will no longer see the placeholder.

When you're ready to add an image, just click anywhere on the gray image placeholders to open your library.  


In the library, you’ll find several options for adding images. You can select images already in your library, import images from your Facebook or Flickr accounts, or choose to upload new images. 


To insert to an image into the placeholder, hover over the image you’d like and click Select to add the image.

 

How to remove image placeholders

Simply hover over an image placeholder to reveal the yellow toolbar and then click on the trash can icon. 

For images in multi-image settings or combo blocks, there will be two trash can options. One in the yellow toolbar above the block which will delete the entire block, or the second trash can icon that lives on the image placeholder that will delete just the image and remove it from the block.

 

How to upload new images 

Once inside your Frankie image library, you can either click the blue Upload button to locate images in your files, or simply drag an image from your device and hover over the button to locate the drop area. You can also drag in multiple photos at once to add them to your library. Or if you would like use images from your connected Facebook or Flickr accounts, then you would just click on the corresponding tab instead. 


If you've just uploaded an image, then you’ll next see the below screen where you can add a weblink for the image to connect to and also add the alternate text of your image. Alternate text is what visually impaired people will read instead of seeing the image, so you just want to describe what the image is.

Although it is not required, not all email recipients will have images turned on in their email program, so it's best practice to add some sort of a description as the alternate text so folks know what they're missing.

At the top of this popup screen, you'll also have the option to Choose another image to add to your library or click Edit this image to access the image editor where you can crop, rotate, or flip the image.

Image size options overview

To determine the size that an image will be featured in your campaign, use the Size dropdown menu on the image screen. We generally suggest selecting Best fit, but you can also choose from X-Large, Large, Medium, Small, or Thumbnail; depending on the original size of the uploaded image. 

Next to that is the Padding field where you can add uniform padding by adjusting all four sides of the image at once, or click the gear icon to expand the options and adjust the padding for the sides separately. Padding determines the amount of white space that surrounds your image. We like white space, so the padding defaults to 10 pixels on all sides but you can change it as you see fit. 

Image size breakdowns

A single image placeholder in a standard-width template is 640 pixels, and by default, the padding is set to 10 pixels. This means if you change the padding to 0 pixels on all sides, your image will show with that extra 10 pixels on each side. 

Here's how the different size options breakdown: 

  • Best Fit = max width is 610 pixels with no max height. (If it's square, the max size is 610 x 610. If the image is a rectangle, it will be 610 x corresponding adjusted height.)

  • Extra Large = max width OR height is 550 pixels

  • Large = max width OR height is 440 pixels

  • Medium = max width OR height is 280 pixels

  • Small = max width OR height is 120 pixels

  • Thumbnail = max width OR height is 50 pixels

Important note about PNG files

If you are getting an error when trying to add a png file, you might be trying to insert an interlaced png, which won't work. The difference between interlaced and non-interlaced pngs is how they appear to load to your audience. Because non-interlaced pngs produce smaller file sizes, they're optimal for an email environment. To troubleshoot this, try resaving your png file as non-interlaced or just save it as a different file type altogether, like jpeg or gif, to see if that successfully uploads into your mailing.

Search Function

Next to the Upload button is the Search feature which uses image names to locate your images, so it’s important to appropriately name your images before uploading them. Image file names also help to boost your SEO when they contain designated keywords. 


 

How to organize your image library into folders

With efficiency in mind, we’ve made it super easy to search your library by an image name so you can find images quickly, and in addition to that, you can also organize your images into folders. Use folders to organize your images by product type, mailing type, most frequently used, or whatever makes your life easier. You'll just need to be in an open campaign and using the drag and drop editor to be able to create a new folder.

Please note: You can add the same image to multiple folders and because of this, deleting an image from a subfolder does not delete it from your library or the other folders it is in. But if you delete an image from the All Images option, that image will then be deleted from all of the folders. 

After adding an image placeholder to your campaign from the drag and drop editor, hover over it and either click on it or choose the Select from library option, which will open your image library.

You will see the images in your library with a small checkbox in the upper left corner of each one. Check that small box for all of the images you'd like to add to a new folder and then click on Add folder in the bottom left corner of the library. Or if you have already created some folders, you can also hover over the Add to folder box that will appear above the selected images to choose to add them to one of your folders. 


Once added, you can select images (or select all using the checkbox above the images) and add them to a folder using the Add to folder dropdown menu that loads above the images. You’ll see your folders listed along the left side of the library, as well as an at-a-glance view of how many images are in each folder.


You can easily scroll through your entire library by navigating to the All Images option at the top of the folders list. Just don't forget that any images deleted from the All Images option will be removed from your library and all folders. Whereas, if you open a folder and delete an image that is also in multiple folders, it will only delete it from that specific folder. 

 

Image styles and settings overview

After you have added an image to your campaign there are styles and settings you can set for it. Simply hover over the image and then click the gear icon on the yellow toolbar that appears to open your image styles and settings menu. It will open to the Styles tab, which allows you to adjust the styling for that particular image block via the Background color, Margin, Padding, and Border.


Switch to the Settings tab to see those options available. Here, you can toggle to turn on or off Smart Sizing and Captions, change the Layout from Horizontal to Vertical, change the Count of images (which will add however many image placeholders you want and changes it to a multiple Images block), and the Position of the image. * We always suggest keeping the Smart Sizing option on.


 

How to work with multiple images

Using Frankie's flexible layouts with the drag and drop editor to build unique campaigns allows you to do a variety of things. We'll go over a few of these options including how to create sets of horizontal and vertical images and adding a gallery of images to show off multiple products.
Here's what these tutorials will cover:

  • Changing alignment from horizontal to vertical

  • Rearranging the order of images in a block

  • How Smart Sizing works

  • Creating a product image gallery

Changing alignment from horizontal to vertical 

To create a set of horizontal images, drag the Images content block into your campaign; this block is set to display the images horizontally by default.


Three image slots will appear in your mailing, like this:


To make the images display vertically, hover over the content block to make the yellow toolbar appear and then click on the gear icon.


In the image styles and settings menu that appears, select the Settings tab, and change the Layout from Horizontal to Vertical. 


Here's the result:

Rearranging the order of images in a block

To change the order of the images in a block, just hover over an image and click the four-way location icon, then drag the image to where you want it inside that block. You will not be able to move a single image from a multiple Images block to another block. Instead, you would need to add a new Image block to that block.   

How Smart Sizing works

Smart Sizing is a default setting that ensures images in the same block are proportionate. The result is a balanced, professional-looking campaign / mailing. To show you how it works, let's say you have a block with three image placeholders like this:

Add your images to the placeholders one at a time.

No matter the size of the individual images, the Frankie editor will resize each to match the smallest image in the block so they all look uniform and nice. Smart Sizing is turned on by default, and while we suggest leaving it on, there may be times when you'll want to adjust this setting to achieve a certain look in your mailing, so for this you would just toggle it to Off.

To see how your images would look with Smart Sizing turned off, simply adjust that setting manually:

  1. Hover over the Images block, and click the gear icon in the yellow toolbar menu.

  2. Select the Settings menu and toggle Smart Sizing to Off. Your images will now show in their varying sizes and you can decide which looks best. 


 

Creating a product image gallery

It's easy to create an image gallery for products in your campaign using the drag and drop editor. As an example, we'll provide instructions on making a gallery of nine product images, but you can adjust that to include as many images as you like. 

To start, drag and drop three of the multiple-image content blocks (select Images) into your campaign, creating nine image placeholders.

On the first block of three images, hover over it until you see the yellow toolbar appear above, then click on the gear icon titled: Change block styles and options. 
Select the Settings menu and leave Smart Sizing turned On, and then toggle the Captions to On so that you can write a product description beneath each image. Do this for each of the three Images blocks and it will look like this: 

When you click on the Image caption box, your cursor will appear so that you can add each of the captions individually to your products.