Skip to content
English
  • There are no suggestions because the search field is empty.

I-Frames: Adding Images To IFrame Banners

Article Contents: This article shows you how to create an IFrame banner, insert an image (from your computer or a URL), and save it so it displays correctly for all users.

 

This article walks you through how to add banner images to your IFrame pages in Club Caddie. You’ll learn how to create a new banner, configure its placement and publish dates, insert an image, and make sure it displays correctly—especially if you’re working with a locally saved file.

Getting to the IFrame Banner Area

First, navigate to the IFrame Banner settings in Club Caddie.

  1. Go to Settings in the left-hand menu.
  2. Click on I-Frames.
  3. Select the I-Frame Banner tab along the top. This brings you to the IFrame Banner management screen where you can see all existing banners and create new ones.

Adding a New Banner

Now that you’re on the IFrame Banner screen, let’s set up a new banner.

  1. Click ADD Banner in the upper right corner. The Add IFrame Banner window will open.

The Add IFrame Banner window with Placement Identifier, date fields, and Banner Content editor

  1. Select the Placement Identifier (1) for the location where you’d like this banner to appear. This determines which IFrame page will display the banner.
  2. Set the Publish Start Date (2) — this is when the banner will begin showing to your users.
  3. Set the Publish End Date (3) — this is when the banner will stop displaying.
  4. You’ll see the Banner Content (4) area below. This is the rich text editor where you’ll add your image.

Inserting a Banner Image

Here’s where you’ll add the actual image to your banner.

  1. In the Banner Content editor, click the Image icon in the toolbar. It looks like a small landscape picture.
  2. An Image Properties window will appear. This is where you’ll configure your image source and display settings.

The Image Properties window in the IFrame Banner editor

Using a Locally Saved Image

If you’re using an image file saved on your computer, there’s an important step you need to take so the image actually displays on the live page.

  1. Select Local file with absolute path under Picture Source File.
  2. Click Browse and select the image from your computer.
  3. Check the box for Insert local image as base64.

 

NOTE: This step is essential. Without checking the base64 box, the image path will reference your local computer’s file system (for example, C:\Users\yourname\Downloads\banner.jpg). That path is not accessible to anyone viewing the page online, so the image will appear broken. The base64 option embeds the image data directly into the banner, which means it will display for all users.


Using an Internet URL

Alternatively, if your image is already hosted online (for example, on your club’s website or a cloud storage service), select Internet URL and paste the full web address of the image. Make sure the URL starts with https:// so it loads properly on the secure IFrame page.

Adjusting the Style and Layout

The Image Properties window also includes a Style section where you can fine-tune how your banner image appears.

  • Alignment — Choose Left, Middle, or Right to control where the image sits within the banner area. Middle is recommended for most banners so the image stays centered across different screen sizes.
  • Border Color, Thickness, and Style — These are optional. If you’d like a visible border around your banner image, you can configure it here.

Under the Layout section:

  • Lock Aspect Ratio — Keep this checked so your image doesn’t stretch or get distorted.
  • Width and Height — You can manually set these values in pixels. If your image was created at the recommended size, these should auto-populate when you insert the file.

 

Recommended Image Specifications

When creating your banner image, use these specifications so it looks great across different monitors and screen sizes.

Specification

Recommendation

Dimensions

1200 × 300px  or  1200 × 400px

Aspect Ratio

3:1 or 4:1 (wide and short)

File Format

JPG or PNG

Max File Size

500 KB

Color Mode

RGB (sRGB)

What Does 1200 × 400 Actually Mean?

If you’re not familiar with pixel dimensions, here’s a simple way to think about it. The recommended banner size is a wide, short rectangle—similar to the shape of a website header or a Facebook cover photo.

Familiar Format

Size Comparison

Facebook Cover Photo

820 × 312px — our banner is a bit wider

Email Header / Newsletter Banner

600 × 200px — our banner is about double the width

Website Hero Banner

1200 × 400px — this is the same size

Twitter / X Header

1500 × 500px — our banner is slightly narrower

 

If you’re creating your image in a tool like Canva, PowerPoint, or Google Slides, you can set a custom size of 12.5 inches wide by 4.17 inches tall — that’s the equivalent of 1200 × 400 pixels.

TIP: Keep your text and logos centered in the middle 60–70% of the image. On narrower screens or mobile devices, the edges of the banner may get cropped or compressed. Centering important content ensures it looks good regardless of screen size.



Saving Your Banner

Once you’re happy with your image settings:

  1. Click OK in the Image Properties window to insert the image into the banner content.
  2. Review the banner content to make sure the image looks correct in the editor.

Click Save.