Show Sections Hide Sections

Images

Inserting an Image in Magento 2

1. Edit the Page/Static Block

First start editing the page/static block where you would like to insert to the image.

2. Clcik the "Insert Image..." button.

3. Navigate to the correct directory.

Within the site (abreviated "hcg") directory find or create a new directory to contain the image (name your directory in all lower cases with no spaces (use "-" instead of spaces).

4. Click "Choose Files"

5. Select the files

Select the files you wish to upload and click "Open".

6. Select the thumbnail

7. Select "Insert File"

8. Copy the inserted code

Copy the inserted code into your code editor.

9. Edit the inserted code

By default the inserted code will look like this:

<img src="{{media url="wysiwyg/ami/my-folder/image.png"}}" alt="" />

Replace the src attribute delimiters (double quotes) to be single quotes:

<img src='{{media url="wysiwyg/ami/my-folder/image.png"}}' alt="My Image" />

Images with Captions

To create an image with a caption use the <figure> and <figcaption elements.

<figure>
  <img src='https://www.americanmeadows.com/media/wysiwyg/ami/my-folder/image.jpg' />
  <figcaption>This is an awesome image</figcaption>
</figure>

Floating Images

Floating is better explained in the Layout Style Guide. When images are floated a dotted border is automatically added to separate the image and the text.

<img src='https://www.americanmeadows.com/media/wysiwyg/ami/style-guide/image.jpg' class='float-right' />
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et doloribus qui eius dicta, omnis minima incidunt iusto illo ipsam soluta labore sequi fuga molestias pariatur...</p>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium ipsam placeat natus aperiam atque, adipisci nesciunt libero reiciendis suscipit omnis soluta voluptate deserunt perferendis, quibusdam cum hic exercitationem? Repellendus id possimus, labore aspernatur debitis eum commodi consectetur consequuntur aliquam natus vel voluptatum porro doloremque ipsam tempore quasi quia odit velit qui consequatur ducimus.

Possimus deleniti aliquam autem. Porro cupiditate soluta delectus molestiae exercitationem, praesentium, molestias officiis laudantium ut nobis dolorem doloribus cum saepe ipsum? Corporis magni alias rem eveniet nesciunt debitis aut odio quibusdam dolorem similique laborum molestias voluptate quod reprehenderit, ipsa in sed perspiciatis provident error ea!

Ab, id, dolorum adipisci doloremque esse vel expedita ducimus placeat neque dolore, similique ipsam vitae assumenda harum iste ullam alias eveniet distinctio recusandae doloribus suscipit aliquam consectetur! Quisquam non nobis dolor iusto, asperiores id soluta voluptatum architecto aut officiis inventore repudiandae? Nisi earum quibusdam qui asperiores fuga at quod sapiente eos accusamus!

<img src='https://www.americanmeadows.com/media/wysiwyg/common/style-guide/image.jpg' class='float-left' />
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et doloribus qui eius dicta, omnis minima incidunt iusto illo ipsam soluta labore sequi fuga molestias pariatur...</p>