Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates. To maintain your site's performance, security, and PCIPayment Card Industry: Refers to debit and credit cards and their associated businesses. compliance, upgrade to the latest version of Magento.
Images and Videos
Using high-quality images of consistent proportion gives your product catalog a professional look with commercial appeal. If you have a large catalog with several images per product, you can easily have hundreds, if not thousands of product images to manage. Before you get started, it’s a good idea to establish a naming convention for your image files, and organize them so you can find the originals if you ever need them.
A single product image might appear in several different sizes throughout the catalog. The size of the image container on the page is defined in the CSSCascading Style Sheets: A style sheet language that controls the appearance of HTML documents; a way to control the appearance of text, graphics, lists, links, and all other elements on a web page., but how the image is used is determined by its role. The main product image, or “base” image, must be large enough to produce the magnification that is needed for zoom. In addition to the main image on the product page, a smaller version of the same image might appear in product listings, or as a thumbnail in the shopping cartA grouping of products that the customer wishes to purchase at the end of their shopping session.. You can upload an image in the largest size that is needed, and let Magento render the image as needed for each role. The same image can be used for all roles, or a different image can be assigned to each role. By default, the first image that is uploaded is assigned to all three roles.
From the Product Detail section, you can perform basic image management tasks such as uploading multiple images, rearranging the order of the images, and controlling how each image is used. For additional control over individual images you can open the image in “detail view.”
If you have a large quantity of images to manage, you might prefer to import them as a batch, rather than upload each one individually. To learn more, see: Importing Product Images.
To perform basic image management:
|1.||Open the product in edit mode. Then, do any of the following:|
An orange bannerPromotional graphics displayed either horizontally on the top of a web page or vertically on the left or right margins. Website advertisements are often displayed as banners. appears in the upper-left corner of the current base image.To use a different image as the base, move the mouse over the image that you want to use, and tap Make Base.
To view image detail:
|1.||To open an image in detail view:|
- Tap the Image Management link below the image tiles.
- In the panel on the left under Basic Settings, tap Image Management.
Then, do any of the following:
Image Alt text is referenced by screen readers to improve web accessibility, and by search engines when indexing the site. Some browsers display the Alt text on mouseover. Alt text can be several words long, and include carefully selected key words.
In the Alt Text box, enter a brief description of the image.
By default, all three roles are assigned to the first image that is uploaded to the product. To reassign a role to another image, do the following:
|1.||Tap an image tile to open the image in detail view.|
|2.||In the Role box, choose the role that you want to assign to the image.|
The assigned role appears with a checkmark in selected mode, and the previous image is no longer assigned to the role.
|2.||To close Detail View, click the Closebox in the upper-right corner.|
|3.||When complete, tap Save|
Thumbnail images appear in the thumbnail gallery, shopping cart, and in some blocks such as Related Items. Example size:
The small image is used for the product images in listings on categoryA set of products that share particular characteristics or attributes. and search results pages, and to display the product images needed for sections such as for Up-sells, Cross-sells, and the New Products List. Example size:
470 x 470 pixels (without Zoom)
1100 x 1100 pixels (with Zoom)