This article covers how to upload images for general use on a Magento store.

Navigating to the Image Up-loader

While editing content in Magento, there is an "insert image" feature that allows you to insert images directly into that content. For this article, we'll be using some of it's functionality.

1. Log into your Magento Admin Panel.

2. Navigate to Content > Elements > Blocks

19007500.png

3. Click Add New Block in the top right corner.

19007502.png

Using the Wysiwyg Image Uploader

This new block won't be needed to use the images on the website, it simply serves as a way to navigate to Wysiwyg, which is the name for the text editor below. (And stands for "What you see is what you get")

1. Click the Insert Image button. A new window should appear. The files that you can upload to are shown on the left. Begin by clicking "Choose Files" and selecting a picture on your computer.

19007507.png

2. When finished, the name of the image should appear below. Note the case-sensitive name of the file, this will be needed later. In this "Pumpkin.jpg"

19007504.png

3. Exit the "Insert File..." window, and leave the empty block without saving. The image is uploaded to the website regardless if you saved the block or not.

Using the New Image

Now the file is uploaded to the website, and can be referenced by pages. By default, the image uploader uploads to yourwebsite.com/media/wysiwyg. If you uploaded the file to any folder inside the image uploader, it will be inside of:

Your URL
    www.yourwebsite.com/media/wysiwyg/yourFolders/yourImageName

In this case, 'Pumpkin.jpg" was uploaded to a folder called "mypictures", which means using this image requires a reference to:

Pumpkin URL
www.yourwebsite.com/media/mypictures/Pumpkin.jpg

You can use the above URL and open it in a new tab in your browser to ensure that you have the correct URL. If the URL is correct, then you will see your image on an empty page and nothing else. Take note of everything in the URL after the "/media/" part. You can close this extra tab and then navigate to the page or static block you wish to edit. Insert the following code, adapted for your image with everything that was after "/media/" in your URL appearing between the single quotes:

Pumpkin Image in HTML
    <img src="{{media url='mypictures/Pumpkin.jpg'}}">

Save your changes, and now the image will appear in your content.


Related Article