Media Cloud for WordPress

A WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix urls for your site's images
PHP 76 4 months ago Interfacelab/ilab-media-tools Maintainer: Interfacelab

Overview

Media Cloud is a revolutionary plug-in for WordPress that will supercharge the performance of your website and radically transform the way that you work with media in WordPress.

Media Cloud works by moving your images, media and other files from your WordPress server to online cloud storage such as Amazon S3, Google Cloud Storage, DigitalOcean Spaces and many others. You can then serve that media through a CDN like Amazon Cloud front, Cloudflare, Fastly and others.

Beyond cloud storage, Media Cloud also has deep integration with imgix, the leading real-time image manipulation and optimization CDN. Media Cloud is the first plugin for WordPress to bring the full benefit of what imgix offers - simplifying your development efforts, reducing your site’s page load times and opening up creative options that simply haven’t existed until now.

Media Cloud also provides advanced image editing tools that provide improved cropping options, effects, filters, watermarking and more.

Installation

There are two ways to install this plugin: via the WordPress plugin dashboard, or manually via Composer.

  1. Installing via WordPress
  2. Installing via Composer
    • run composer require ilab/ilab-media-tools

Configuration

Once installed, you will need to set up both your S3 and imgix credentials. Before you get started with either of those, go to Media Cloud → Enable/Disable Tools, and enable these options:

  • Image Crop
  • Storage
  • imgix Support

Media Cloud page for enabling tools

Storage Setup

First, access access the storage settings in the sidebar:

Media CLoud storage settings page

Once there, select your S3 source and configure the settings to whatever your preference is.

We've included notes for more important options below:

  • Delete Uploaded Files: This deletes uploaded files from the WordPress folder after they've been successfully uploaded. If you wish to save on bandwidth, this is a useful feature to enable.

    If you have this enabled, note that using the batch import feature in Media Cloud will cause WordPress images to be deleted from the folder after they've been uploaded.

Setting Up imgix

To set up imgix, access the imgix settings on the left sidebar:

Simply enter your imgix domain (ex: subdomain.imgix.net) in the imgix Domains field and check off the options you need.

Media Cloud imgix options page

Below are some notes for the more important options:

  • Use HTTPS: This is important to enable if your site is using HTTPS, otherwise your images may not render.
  • Keep WordPress Thumbnails: Turning this feature off can save you space, as imgix generates several sizes for you using parameters. However, if you ever plan on turning off imgix, keeping this feature turned on can allow you to switch back to WordPress images easily.
  • Enable GIFs: As this is a premium feature, you should contact the imgix sales team before enabling this option

Storage Importer

The Storage Importer tool allows Media Cloud to import all your WordPress images into your S3 bucket.

Before doing this, we recommend turning off the Delete Uploaded Files feature in the storage settings, as uploading the images will cause images to be deleted with this setting turned on.

Once you've confirmed that the files have been uploaded correctly into the correct folders, you can delete the images manually from your WordPress folder.

Additional Resources

FAQ

Using imgix URLs for previous images

Media Cloud only serves images through imgix for images post installation. For images that were previously being served via WordPress, they will continue to use WordPress image links.

If you wish to change all your WordPress image links to use imgix URLs, you can do this by editing the WordPress database. General instructions below:

NOTE: Before proceeding, please make a backup of your WordPress site and your database.

  1. Install the Media Cloud plugin and edit the configurations
  2. After connecting the Media Cloud plugin to your S3 bucket, upload a few images and make note of the folder structure in S3
  3. Upload the rest of your WordPress images to your S3 bucket, making sure to clone the folder structure in your S3
  4. Do a find and replace in your WP database (instructions vary on how to do this - you can try exporting the database → edit it with a code editor → import it back)
    • Make sure to make a backup of your database before doing any find and replace operations. Failing to do so will prevent you from restoring your data in case you make a mistake.
  5. Look for old image BASE paths (ex: www.wordpresssite.com/wp-content/uploads/)
  6. Replace with your new imgix path (subdomain.imgix.net/)
  7. Save and apply
  8. This should update all your old image URLs with your new imgix URLs. Any new URLs being used will use imgix as per your Media Cloud settings.

Note that these are the general instructions for converting WordPress image URLs to imgix. Depending on your WordPress setup, you may need to do more than just edit the database values.

Can I set automatic parameters in Media Cloud?

Media Cloud allows for automatically applying the parameters auto=format,compress for all imgix images in your WordPress site.

If you need to set other parameters on a global level, you can do so by setting up default parameters in your Source.

How to use srcsets with Media Cloud?

As of WordPress 4.4, srcsets are automatically generated using the different sizes that are generated in WordPress.

It's recommended to edit the WordPress template files to ensure that the sizes attribute is set to display the images at the correct dimensions on your site.


More Plugins