Using Internet-based images on BarTender label Follow

Avatar
Al Perez

Overview

It is possible to add images from the Internet to your BarTender label using HTML Markup Language Containers. Though you do not need to know a whole lot of HTML to learn how to do this, you'll need to be able to at least understand how the language works.

Applicable to

BarTender Designer 10.1 and above

Information

Before adding images to your label, please be wary of image ownership; consider using royalty-free clipart for your internet-based images.

Second, it's important to understand that not all images will be available for use in BarTender, as some images may be encrypted through the use of Hypertext Transfer Protocol Secure, or HTTPS for short. Only images marked as 'not secure' from the hyper-link can be used with BarTender's HTML container objects.

Additionally, internet images in use must still be of a supported format.

Using Internet-based images on your label

The following example is using BarTender 2019.

  1. In BarTender Designer, click on your Text Objects tool and select the HTML Container object (image below); place the object anywhere on your design space.  mceclip0.png
  2. Open up your HTML Container object by right-clicking on it and selecting Properties. In the new window called Markup Language Text Properties, to the left, select the embedded data source marked HTML and delete the sample data with exception of the actual HTML tags:

    mceclip1.png


  3. Between the pair of HTML tags, add a single image tag, written as
    <img src="image hyper-link belongs here">

    Make note of the brackets and the quotes, as they are needed for this to work.


  4. Using your favorite web-browser, find an image that you'd like to use and make sure that you're able to isolate the image's location; for example, with Chrome, right-click on your image and select Open image in new tab:
    mceclip2.png


  5. In the new tab, select the entire address in the address bar and right-click to select copy; note how the browser has identified the link to the image as not secure:
    mceclip3.png


  6. Switch back over to BarTender Designer; in the embedded data, move your text cursor in between the quotes of the image tag. Then, right-click and paste the address. You should see the image appear in the object (albeit somewhat 'broken', see image below). The next step will correct this.mceclip4.png


  7. Click on the Markup Language option on the left-hand side. In the Size and Scaling option, this is currently set to Automatically adjust object height to hold contents***. Use the image below; Instead, under Content Scaling (1), make this number smaller (you do not need to enter the percentage symbol) and to use this new number (2), re-select the Size and Scaling option. The image will scale in the background:
    mceclip5.png


  8. The suggestion here is to instead use Automatically scale contents to fit object dimensions, which would then allow you to use the reference points (green dots) around the object; this will allow you to extend the object's size and it can help with revealing the entire image.

Internal only information

***Ideally, the scaling options should work as intended, potentially cutting out a few steps out of this guide. For now, consider using the instructions above!

Do you have feedback or questions on this article? We encourage you to post them on our Community Forums