Using Sirv on WordPress
The standard media options for WordPress websites can be quite limiting.
The Sirv plugin changes that, giving you instant control over your media library, helping you deliver images perfectly optimized for the web. Sirv removes the hassle of image management, with a single media library to embed images anywhere online (not just in WordPress). With WooCommerce support, you can leverage Sirv's most powerful features: amazing 360 spins, multiple image zoom effects and product videos to help you increase sales.
Follow the steps below to enjoy 360 spins, zoomable images, responsive images and plain images throughout your WordPress website.
Install Sirv on WordPress
Simply install the plugin from your WordPress admin, with the following steps. Alternatively, download the zip from our official WordPress CDN plugin page.
1. Go to the Plugins section of your WordPress admin and click "Add New":
2. Search for "Sirv":
3. Install and then activate the plugin:
4. Go to the "Settings" page for Sirv:
5. If you have an active Sirv account, just enter your login details.
If you don't have a Sirv account, you can create it in the plugin itself or by visiting our website.
Congratulations, Sirv is now installed! Your free trial includes 5GB of storage and 20GB of bandwidth.
Configure Sirv
Custom domain
During registration, you have the option to choose a custom Sirv sub-domain that will be associated with your account, like abcwidgets.sirv.com. If you'd like to use your own domain, for example - media.abcwidgets.com, follow these instructions.
Sync your media library with Sirv
By default, Sirv will automatically fetch images from your server, when they are requested. This can make the initial first load slightly slow for your visitors. You can synchronize your entire media library with Sirv, for faster user experience.
Choose how to load Sirv
Sirv JS is responsible for lazy loading, responsive imaging, and Sirv Media (Spin, Zoom, Video). You have several options to choose from on how to load it.
1. Include Sirv on all pages. Choose this if you have problems with the second option.
2. Detect. Sirv JS will only be loaded on pages that use Sirv features. Recommended option.
3. No pages. Choose this if you are going to implement Sirv JS by yourself and know what you're doing.
You can also choose which version of Sirv JS to load.
1. Original. This is Sirv JS v2, battle-tested and stable as a rock.
2. Original light. Sirv JS v2, but without 360 spin support. Use this if you only need to speed up your WordPress website.
3. Latest. Sirv JS v3, the latest and greatest version of Sirv you can find. Create stunning image galleries with 360 spins, videos (hosted on Sirv or YouTube/Vimeo), several kinds of image zoom, and static images. We recommend using this version.
Make use of custom profiles
Sirv has a neat feature called profiles, which allows you to change your image settings in bulk. You can apply different settings (quality, watermarks, overlay text and many more) to your featured images (and their thumbnails), as well as any other Sirv shortcodes you create.
Speed up WordPress
Speed up your WordPress website by serving the most optimal image for each user. Sirv automatically converts images (preserving the originals), serving them in the most efficient dimensions and image format (WebP, JPEG, PNG, or PNG). It'll apply compression and other optimizations to minimize file size. For hi-res screens, it'll serve retina images. Finally, it'll cache the images ready for rapid delivery across Sirv's fast global CDN from the nearest of 20 server locations.
Enable the CDN
Sirv has dedicated servers located on all continents, all of your static assets are distributed between them and when your site visitors request them - we load them from the nearest Sirv location. A CDN is vital if you have visitors from all over the world.
Enable the Sirv WordPress image CDN to instantly accelerate your WordPress site:
All featured images, gallery images, WooCommerce and other plugin embedded images will be delivered by Sirv. Theme and plugin images will continue to be served from your server. Proceed to the next step to find out how to serve all of your static assets with Sirv.
Not only will Sirv serve your images faster, it also takes the pressure off your own server so it can dedicate more resources to serving your other page files faster.
Set up fetching (origin pull) for theme and plugin files
1. Set up fetching in Sirv.
2. Get Wp Super Cache or your plugin of choice that allows to set up an origin pull CDN. Configure the plugin. You're done.
Enable lazy loading
Lazy loading is a technique that defers loading of your WordPress images until they are needed.
Sirv does not simply load images when they're visible in the viewport, it also automatically resizes and optimizes them on-the-fly for fastest load times and the best user experience.
It usually takes milliseconds to process a single image, this technique has proven itself to be the best way to treat WordPress image optimization.
Media management
Uploading media
Upload files to Sirv either from your Sirv account or via your WordPress admin panel: "Sirv" > "Media Library", this is how it looks like:
Upload images by clicking the 'Upload images' button
Renaming and Deleting media
You can rename and delete media in Sirv Media Library. Simply right-click a file, or click the dropdown menu icon and choose the action you want to do.
Using Search
Use the search box to quickly find the files you need.
Add Sirv Media to posts and pages
Sirv supports plenty of media you can embed in your pages or posts:
You can organize your media by using shortcodes.
Gutenberg vs Classic Editor differences
Sirv fully supports both Gutenberg and Classic Editor.
Here's how to add a Sirv Media block in Gutenberg:
And here's how to add Sirv Media in the Classic Editor:
Add 360 degree spin to a page or post
Enjoy life-like 360 spins. Display spins on its own or as part of an image gallery.
1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select 360 spin image in your Sirv Library > Click "Continue":
4. Configure your 360 spin options and click the "Insert into page" button:
5. The 360 Spin will appear in page/post as a gallery:
You can also add additional images to your gallery. Click "Edit gallery" settings icon > Click "Add images" button > Select additional images > Click "Continue" button > Click "Update" button:
8. Your spin is now fully interactive in your page/post.
Add zoomable images to page or post
Visitors love seeing close-up detail of any image. The larger your original images are, the deeper the zoom.
1. Install Sirv plugin on your WordPress site.
2. Click the "Add Sirv Media" button in your page or post.
3. Select images to be zoomed > Click "Continue":
4. Choose "Zoom Gallery" & Click "Insert into page" button:
5. Zoomable images will appear in page/post as a gallery:
6. To update gallery settings click "Edit gallery" icon:
Add responsive images to page or post
A single image or a gallery of images can be added without the zoom effect. The image(s) will be optimized and resized on-the-fly. They will load fast and will look perfect on any viewing device.
1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select images you want to be responsive > Click "Continue":
4. Select "Responsive image" option, configure your settings and click "Insert into page" button:
You can set the maximum width of your images, whether to show the caption or not.
Lazy loading will automatically resize and optimize your images for the perfect user experience.
5. Responsive images will appear in page/post as image embeds.
Add a static image to a page or post
If you'd like more control over your images, you can load regular static images from Sirv.
1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select image from your Sirv Library > Click "Continue":
4. Select "Static image" option > Click "Insert into page" button:
5. The images will appear in your post or page just like regular WordPress images would. You can go to the 'Text' tab in your editor and apply different transformations like changing size, contrast, sharpness, and many more.
Add a video to a page or post
1. Install Sirv plugin on your WordPress site.
2. Click "Add Sirv Media" button in your page or post:
3. Select your video (or videos) and click 'Continue'.
4. Configure video options and click 'Insert into Post/Page'
Sirv shortcodes explained
Sirv shortcodes are a convenient way to reuse and embed image galleries and 360 spins.
Whenever you add Sirv media and create an image gallery, 360 spin, image zoom, or a 'zoom gallery', they will be saved in the 'shortcodes section' of Sirv settings.
You can add more shortcodes from this setting section too.
When editing a post or a page, you can easily add shortcodes to posts or pages by going to Add Sirv Media -> Select 'Choose shorcode' tab -> Insert Shortcode.
Featured images and Sirv
By default, WordPress asks you to choose featured images from your Media Library. You can use the 'Featured image from URL' plugin to choose featured images from your Sirv account or by simply entering the image URL.
This will allow you to use your Sirv Media as featured images for posts and WooCommerce products.
Add Sirv to WooCommerce
Add a beautiful Sirv gallery to your products. It will replace the original WooCommerce (or your custom themes') product gallery. Here's a live demo:
It supports static images, 360 spins, videos hosted on Sirv, YouTube and Vimeo.
Installation
1. Install Sirv plugin.
2. Go through the initial configuration.
3. Configure WooCommerce options.
3.1 Enable 'Sirv Media Viewer', this will enable Sirv's product gallery for your products.
3.2 Select where Sirv media should appear, before, after your WooCommerce product images, or you can choose to show only images hosted by Sirv.
3.3 Select how you'd like to handle your product variation images, you can show all images (product gallery + all variation images), or to show only images of the chosen variation.
You can also choose which profile to apply to your product images.
Add Sirv Media to the product gallery
You can add static images, 360 spins and videos as a part of your product image gallery. Here's a short video showing how to do it:
To add a gorgeous Sirv Gallery to your product images, follow these steps:
1. Find the Sirv Gallery box in your product editing screen. Then click the 'Add Sirv Media' button.
2. Choose media you'd like to add to your product and click the 'Add images' button.
That's it! Here's how it'll look in the admin section:
Add Sirv Media to product variations
Each variation can have its own set of Sirv Media. The process is almost identical to adding images to the main product gallery, You can add product videos, static images and 360 spins. Here's a quick video explaining how to add Sirv Media to product variations:
Add YouTube or Vimeo videos to WooCommerce products
YouTube or Vimeo videos can be added to both the main product image gallery and product variation media.
Click on the 'Add online video' button and paste your video URL.
At the moment, videos from YouTube and Vimeo are supported. If you'd like to add a video hosted on Sirv, just add it like you would add an image or a spin.
Add a featured product image hosted on Sirv
If your product images are stored only on Sirv and not in WordPress, you might find it tricky to add featured images. To solve this problem, you can use the 'Featured image from URL' plugin to add Sirv Media as your featured product image. It'll look like this:
Help from a Sirv expert
If you have any questions about how to use the Sirv for WordPress plugin, please contact our support team from your Sirv account.