How to add product image to Magento 2

Apr 10, 2019

2131 Yuri Doroshevich

How to add product image to Magento 2

Product image is a vital aspect of the whole product page, for it attracts a visitor’s eyes in the first place. Magento is a greatly flexible and customizable platform that allows to add product images in different ways. In today’s article, we will explore four methods of adding images to Magento product page: via admin panel, programmatically, via import and via REST API.

Table of contents:

Add product image via admin panel
Add product image programmatically
Add product image via import
Add product image via REST API

Method #1: add product image via admin panel

Adding product image via admin panel is considered the easiest way, for it does not require technical and developer expertise – only knowledge of Magento admin panel.

Log in to the admin panel. As you navigate to Catalog -> Products, you will get to the list of products in your shop.

product dashboard magento

Choose the product you wish to add an image to and press Edit. You will get to the product configuration menu.

product page configuration menu magento

magento custom development

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page

Scroll down to the Images and Videos tab. Click on the grey icon and select one or more images to upload to the product page.

images and video tab

The images uploaded should be in gif, jpg, jpeg or png formats.

magento images formats

To delete a certain image, press the basket icon in the left lower corner.

delete product image magento

Click the image to get the Image Detail configuration menu.

image detail magento

The menu consists of the following fields:

  • Alt Image – alt text of the product image;
  • Role – choose the mode of the image reflection at the product page:

Base – a good quality image that enlarges as you click on it;

base image magento

Small – is image type for the pages containing more than one image, like category or search pages.

small images magento

Thumbnail – the images placed below the Base image; they will also be reflected if you add the product to the cart.

thumbnail image magento

Swatch – the image type for advanced shop configurations; for instance, if a product is available in the wide color range, you upload several swatch images that further can be applied to any product.

Method #2: add product image programmatically

In case you possess enough developer expertise, you can add Magento product image via script.

I created the following specialized module for adding product images and declared a console command.

add image programmatically magento

https://github.com/belvgdarik/Example

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

Method #3: add product image via import

Another way of adding a product image in Magento is import. The picture will be uploaded to Magento server, an external server, or to Media Storage.

Magento automatically creates a directory structure for product images, organized alphabetically, which means you do not need to specify the path – only place a forward slash before the file name of each image.

Log in to the admin panel and navigate to System -> Import. You will get to the import menu page. Click the Download Sample File – this is the example of how your future CSV file should look like.

download sample file

To upload product images, specify in the SKU column the product SKU and add the following fields:
base_image, base_image_label, thumbnail_image, thumbnail_image_label, small_image, small_image_label.

Moreover, you need to specify the name of the picture you are uploading.

import product images csv example

Upload images into the pub/media/import folder.

import dashboard magento

Then, select the uploaded file and specify the folder you place it into. Press Check Data to make sure you have done everything right and press the Import button.

NB! In the file directory field specify the /pub/media/import path.

magento webdesign

Magento Webdesign

Take your online store to the next level with BelVG Magento webdesign

Visit the page

Method #4: add product image via REST API

The final way is adding product image via REST API. If you are planning integrations with third-party services or have already performed one, this is an excellent non-admin way to upload product images.

Send to http://yourstoreurl/index.php/rest/V1/products/{sku}/media  the following request:

The request is sent via a specialized service PostMan.

api request

Wrapping it up

These were the four core methods of adding a product image to the Magento page. If you have any questions or comments, feel free to leave them down below.

Magento Audit

Magento Audit

Take your online store to the next level with BelVG Magento Audit

Visit the page
Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *