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 Media Base URLs in your Magento 'web' settings.
  2. Installing a module that we have created to integrate with Magento.
    The module includes some additional features to improve performance. If you have the option of installing modules, this is the recommended alternative.

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 the origin URL for most 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. 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.

Note: Regardless of the method, upon completion of integration with Magento, your Magento site's images will be using the ImageEngine delivery address. The Original images are still available - The integration will rewrite the image URLs to use the specified ImageEngine Delivery address. 

Base Media URL modification method: 

Intro

Magento has built-in support for CDNs usage via its base URL system. Specifically, you will change the base media URL.
Changing the base URL will only impact URLs generated by Magento. If you have CMS blocks, CSS, or pages that use “hard-coded” URLs with your domain name, they will need to be configured manually to use an ImageEngine Delivery Address URL if you want them to take advantage of the CDN.

For more information, please see Magento's documentation for this method.  

 

Set up your Magento website to use ImageEngine:

  1. Identify whether or not your site uses the /pub/ directory. 
    A simple way to check this is to right-click an image on the site and “Open in a new tab”. The URL in your address bar should contain /media/ or /pub/media/. If you see /pub/ in the URL, your site is not using /pub/ as the document root, and therefore /pub/ must be included in the URLs you configure shortly.

  2. Test a URL to confirm that things will work before configuring Magento to use the ImageEngine Delivery Address. If you did not open an image in the last step, do so now. Then all you need to do is replace your domain in the address bar with your configured ImageEngine Delivery address domain, leaving the rest of the URL the same. 
    Where the URL is: 
    https://www.mydomain.com/pub/media/catalog/product/image.jpg
    The URL should be changed to:
    https://sampledeliveryaddress.cdn.imgeng.in/pub/media/catalog/product/image.jpg
    Load the new URL in your webbrowser, and if the image loads, you are ready to proceed. If the image does not load, contact our support team before proceeding: support@imageengine.io.

  3. Log in to your Magento Admin Panel.
  4. Navigate to Stores > Configuration > Web.
    step-1_annotated.pngIn the General settings click on the “Web” section.
    step-2_-_annotated.png

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

  6. Update your base media URLs to use your ImageEngine Delivery Address. What you will put here will depend on your Delivery Address and the usage of /pub/. The trailing slash `/` is vital on these links, so ensure you do not forget it.  

    For the Base URL for user media Files you should use either:
    https://<your_delivery_address>/pub/media/ or https://<your_delivery_address>/media/

    Whether you use /media/ or /pub/media/ will depend on whether or not your URL in steps 1 and 2 contained /pub/.

    Note: You must also make this change to “Base URLs (Secure)” if you are serving HTTPS traffic
    step-3_annotated.png 
  7. Save your Configuration.
  8. You must clear your website’s cache so that pages are rebuilt using CDN URLs. To perform the cache flush, 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" 
  9. Once finished, verify that images are being served by ImageEngine.  
  10. To ensure a smooth go-live, consider following the recommendations laid out here: Advice for going live with ImageEngine in production environment

 

ImageEngine module for Magento

By using the ImageEngine module for Magento, image references and references to other static content will be automatically changed. Additionally, the module will enable client hints and resource hints to further optimize images. 

Please pay attention to the supported PHP versions:

7.1.0|~7.2.0|~7.3.0|~7.4.0|~8.1.0

Install the Magento Module using Composer

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

# Install the module with Composer
composer require scientiamobile/module-magento2-image-cdn-imageengine

Next, the module can be enabled locally in your Magento instance:

# Enable the module
magento module:enable scientiamobile/module-magento2-image-cdn-imageengine

Make sure to regularly check for new versions.

 Configuring the Magento module

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

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

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

  4. Going back to the module configuration in Magento, paste the ImageEngine Delivery Address into the “ImageEngine Delivery Address” field. Be sure to include http:// or https:// in front of the Delivery Address. 
    mceclip0.png

  5. Confirm that media is located un the  /media/ media folder of your site. If not, change the path so it matches your setup.

  6. Enable the module globally.

  7. Save the configuration. 

  8. You must clear your website’s cache so that pages are rebuilt using CDN URLs. To perform the cache flush, 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" 
  9. To ensure a smooth go-live, consider following the recommendations laid out here: Advice for going live with ImageEngine in production environment

ImageEngine is now configured. Verify that images are now served with ImageEngine.

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

 

Troubleshooting

Problem: Broken Images after setting up the integration

Solution: Often, this results from an incorrectly formed ImageEngine delivery address. Ensure the delivery address is set up correctly with the correct origin. See our delivery address article for more information: Delivery Address

Problem: After setting up the integration, the site's images are not updating to use  ImageEngine.

Solution: Make sure to refresh the Magento Cache.
If this does not resolve the issue, ensure that the unaffected images are not images that are hardcoded in the theme. If there are hardcoded images, you must manually add the ImageEngine delivery address to hardcoded images in your Magento theme files.

 

Related articles

Comments

0 comments

Please sign in to leave a comment.