Skip to main content

Magento 2.x

Jonathan Nyborg
  • Updated

We have two methods of integrating ImageEngine with a Magento 2.x site:

  1. Directly modifying the Base URLs in your Magento 'web' settings.
  2. Using a plugin that we have created for the purpose of integrating with Magento.

In both cases, to implement ImageEngine’s image optimization for Magento 2.x, you will first need to sign up for an ImageEngine account, if you do not already have one. During the signup process, you’ll be asked for the website domain where you intend to use ImageEngine and origin URL for the majority of the images. For more information about signing up, please refer to this article: Getting Started: Signup.

Once signed up, you will be issued a unique delivery address following this pattern: “aabbcc.cdn.imgeng.in.” Custom delivery addresses may also be made after the initial signup process is complete. For more information, see our article here.

Take note of your delivery address, as it will be needed for both of the suggested deployment methods.

 

Base URL modification method: 

  1. In the Admin Panel click the “Stores” and under the Settings category click “Configuration.”
    step-1_annotated.png

  2. In the General settings click on the “Web” section.
    step-2_-_annotated.png

  3. Open up the “Base URLs” settings. 
    step-2_-_annotated-2.png

  4. Modify the “Base URL for User Media Files” to use your ImageEngine Delivery Address. Remember to append the Magento media/ directory to the end of the domain name: http://images.example.com/media/.

    • Important: Perform the same operation in "Base URL for User Media Files" in the “Base URLs (Secure)” section.
      Note: You must make this change to “Base URLs (Secure)” if you are serving HTTPS traffic
      step-3_annotated.png

  5. Save your Configuration. 

  6. It is recommended that the Catalog and Page Caches are flushed to ensure that the old image URLs are not still represented. To do this, navigate to System->Cache Management. 
    magento_purge.png

    1. Check the "Page Cache" box
    2. Click "Flush Catalog Images Cache"
    3. Click "Flush Magento Cache" 
  7. Once finished, verify that images are being served by ImageEngine.  

 

Plugin Method:

Installation using Composer

The ImageEngine Magento module is available on pagagist.org and can be installed using composer:

# Install the module with Composer
composer require scientiamobile/module-magento2-image-cdn-imageengine
# Enable the module
magento module:enable scientiamobile/module-magento2-image-cdn-imageengine

 

Note

Please pay attention to the supported PHP versions: 
~7.1.0|~7.2.0|~7.3.0|~7.4.0 

 

Installation through Magento Marketplace

This guide assumes your marketplace account is synced up with your Magento 2 instance. See this article if you need help setting up access keys which are used as marketplace login credentials within the application.

  1. After adding the ImageEngine module to your marketplace account, log into the admin panel and install it. In the application menu on the left, click System and choose Web Setup Wizard:
    System Configuration

  2. Once on the Setup Wizard’s home page, proceed to Extension Manager:
    Setup Wizard

  3. To make sure the ImageEngine module is available, hit refresh, and go to the list of extensions awaiting installation:
    Extension Manager

  4. Install the module:
    Plugin Installation

  5. Lastly, verify that the module is enabled. You can check its status in the Module Manager section:
    Module Manager
    Locate scientiamobile/magento2-module-io in the list of installed modules and ensure that it is turned on:
    Enabled Modules

 Plugin Configuration

  1. Go to Stores in the application menu and select Configuration:
    Stores Configuration

  2. You should see tab labeled "ScientiaMobile" on the left.

  3. Log into your ImageEngine account via control.imageengine.io to access your account dashboard. Copy the “Delivery Address” from the Engines table.

  4. Going back to the plugin settings in Magento, paste the ImageEngine Delivery Address into the “ImageEngine media URL” field. Be sure to include http:// or https:// in front of the Delivery Address. 

    Blank_Skitch_Document.png

    This configuration will change the secure and non-secure base media URL in the Magento settings. Note that the module will automatically append the media/ path to the provided domain name.

  5. Enable the module globally.

  6. Save the configuration. 

ImageEngine is now configured. Verify that images are loaded from the Delivery Address pasted into the ImageEngine media URL field.

You can fine-tune the image delivery in the ImageEngine control panel.

Related articles

Comments

0 comments

Please sign in to leave a comment.