Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • General Pages

Inserting Images

Written by Edi Sipkas

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Components
  • Editing Your WineDirect Template
  • General Pages
  • Kiosk Tags
  • Payment Gateway 1 1
  • Reports
    Allocation Reports Club Member Reports Compliance/Shipping Reports Contacts Reports Financial Reports Marketing Reports Product Reports Sales Reports
  • Dashboard
  • Store 1
    Allocations Gift Cards 1 Gifting Inventory Orders Products Promos - Promo Builder Shipping State Profile Wine Clubs WineDirect Marketplace
  • Webservices 2.0
+ More

Table of Contents

Alternative Text Size Your Image Image Alignment Image Link Advanced Image not uploading? How to troubleshoot FAQs Images I can't see the 'OK' or 'Save' button when inserting an image. How do I add the image?

1. Click on the Insert Image icon in the second row near the toolbar's left side.  

2. Click Browse Server and click [+] Add A File in the grey bar in the new window. 

3. Search for your image on your computer and click Upload Image and Save.

Before uploading your image or creating an image folder, be sure there are no spaces or special characters in the image or folder name. Otherwise, the image will not display correctly in content or emails.



Alternative Text

The alternative text field is used to name your images. It is helpful for people with low bandwidth connections who may opt not to load graphics, as well as for search engine optimization, as search engines will interpret the meaning of objects by examining their alt text. To allow your alt text to display on hover, right-click your added image and select Image Properties from the menu, then go to the Advanced tab and add your alt text to the Advisory Title field.

This option may not be available in all web browsers; some versions of Internet Explorer display alt text, whereas versions of Firefox or Safari may not. You will want to search and ensure your browser supports image alt text.



Size Your Image

In the Image Properties, under the Image Info tab, you will notice by default, our system will lock the width-to-height ratio. This is nearly always the best choice since it is the only way to avoid image distortion. 

When resizing an image used across multiple sections of your website, including emails, it will resize the image in all its present places. If you want to have different sizes of the same image in multiple locations, copy the image and rename it with a unique filename.

For the best image quality, it is recommended that all images be resized to the desired size before uploading them to the platform.

Our system can handle general resizing. However, if you are working with a colossal image, you should begin by resizing it in a program such as Adobe Photoshop.



Image Alignment

You can choose left or right by clicking on the Align drop-down menu in your image editor dialog box. By choosing one of these options in your dialog box, you can see in the image preview that your text will wrap either to the left or right.

The horizontal space and vertical space boxes allow you to add space between your image and text. You may want to start with a number between 5 and 10 and adjust until it looks right. The Border field allows you to place a black border around your image.

You may want to try inserting a table for more advanced image editing.



Image Link

If you want to link your image to another page, either on your website or an external site.

1. Choose the Link tab in the image properties dialog box. 

2. Add the URL of the page you want to link to in the URL field. The Target drop-down allows you to choose whether or not you would like the link to open up a new window. If you do not select anything here, the link will take you away from the current page to the page you are linking to.

For more information on adding links, please see the Documentation.



Advanced

In the Advanced tab of the Image Properties window, click inside the Style Sheet Classes fields and enter one of the following:

featureLeft (left alignment with padding and border)
featureRight (right alignment with padding and border)
left (left alignment with padding)
border (adds padding and border)

Unfortunately, these borders won't work in the email document section; they only work on the website. All email viewers (e.g., Outlook, Gmail, Yahoo Mail, Hotmail, etc.) view emails differently; because of this, we're unable to make the unique borders work in the emails as they do on your site.

To achieve the border look, you must add a border from the Image properties screen (but your only option is a black border). You could also add a border directly to the picture in a photo editing program like Photoshop to achieve the desired look.



Image not uploading? How to troubleshoot

If your image isn't uploading or is displaying incorrectly, check the following:

  • The file type must be. JPG (.JPEG) or. PNG.
  • It must be in RBG color format.
  • Image and folder names must not contain spaces and special characters (such as '&'). 
  • Dashes [ - ] or Underscores [ _ ] can be used in place of spaces when naming images and image folders and are the only valid special characters that can be added to names. Example: Our-Winery-Photo or Our_Winery_Photo.
  • Images with special characters cannot be deleted from your image server.
  • Images uploaded to products and pods must have specific pixel width and height, in order for the server to upload them. 



 

FAQs Images

I can't see the 'OK' or 'Save' button when inserting an image. How do I add the image?

Here are some common trouble shooting methods for this issue:

  1. Change your browser zoom settings to be 100%. If that doesn't work, try changing it to 80%. Change back to 100% after.
  2. You can also try hiding some of your toolbars to see if that helps and possibly go into "kiosk" mode to see if that opens up enough screen real estate.
  3. Click the alignment dropdown, and click whatever alignment you want (even if you aren't changing the setting). Then press Tab, and then enter. It will happen off screen, but pressing Tab moves the active selection from the dropdown to the "OK" button, and hitting Enter selects OK.
  4. If you go to the advanced tab it's a bit shorter and you can just barely see the "ok" button to click on it.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Inserting Components
  • Inserting Horizontal Lines
  • Inserting Tables
  • Inserting PDFs
  • Page Properties
WineDirect Logo info@winedirect.com 800 819 0325

Products

  • Online Store
  • Tasting Room
  • Wine Club
  • Fulfillment
  • What's New

Learn

  • Documentation
  • Content Hub

Resources

  • Pricing
  • App Integrations
  • Terms & Conditions
  • Privacy Policy
  • Status Page
  • WineDirect Partner Center

Connect

  • About Us
  • Contact Us
  • Careers
  • Events
instagram icon Facebook WineDirect Twitter (X) Logo LinkedIn WineDirect Vimeo WineDirect
All Rights Reserved 2024 © WineDirect
Expand