How to Upload Images to Your Store
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
3. Click Add New Block in the top right corner.
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.
2. Whenfinished, 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"
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:
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:
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:
<img src="{{media url='mypictures/Pumpkin.jpg'}}">Save your changes, and now the image will appear in your content.
Related Article
- Page:
- Page:
- Page:
Related Articles
How to Upload Product Images
This article covers how to upload images to products that will be shown on their product pages and be used as thumbnails previews. In order to upload images for general use across the website, see this article. CPC Sync If your website store uses CPC ...How To Upload Images In Magento 2 - Pages
This article covers how to upload images for page use on a Magento store. TABLE OF CONTENTS Navigating to the Image Uploader Using the Image Uploader Using the New Image Navigating to the Image Uploader While editing content in Magento, there is an ...CP-Commerce Subcategory Images
When searching by category, it may be useful to have images to click for subcategories rather than a list of names. This article will guide you through the steps on setting up subcategory images and having them listed in a section above the ...Counterpoint: How to assign images to a product
This article will describe how to name product images so the CP-Commerce integration will recognize them and sync them to the webstore. It will also go into detail on how to assign multiple images to the same product. TABLE OF CONTENTS Before you ...How to populate the CPC-WEB test store with SecurePay credentials
Before order testing we will create a CPC-WEB store but it will need to be populated with SecurePay credentials before we can perform order testing. Step-by-step guide Log into CounterPoint Navigate to set-up> Point of Sale> Stores Open the CPC-WEB ...