Insert GIFs that can be played and paused into your WordPress posts and pages using shortcodes and Gutenberg blocks.
You can select one of the three GIF player methods in the plugin options page.
This is the default method.
When a GIF is uploaded in your Media Library it will create an image thumbnail to use it as the GIF player preview and when the user clicks on the GIF player the original GIF will be loaded once.
With this method every GIF will be loaded in your post and then converted into a playable canvas. A thumbnail image is created as well when uploading the GIF in your Media Library.
For this process we're using the libgif.js JavaScript library by BuzzFeed.
Every GIF file will be converted to these video formats:
- WebM
- MP4
Why videos?
It is known that GIF files sizes are bigger than a video so using a video instead of a GIF file will help your website performance.
Want more details about converting GIF to video? Check the GIF as Video wiki.
The plugin will grab the GIF file and extract the first frame as JPEG image and use it as thumbnail preview. This file will be saved in the same folder of the original GIF.
The thumbnail image always generate once and doesn't matter the selected GIF method.
If you're still using the WordPress Classic Editor you must use the next shortcode:
[gif-player id="gif_id"]
If you don't know the GIF ID you can add a GIF player using the "Add GIF Player" button next to the "Add Media" button:
When you click the "Add GIF Player" button the Media Library window will open and you will be able to select or upload your GIF.
When you save and view the post, the plugin will render the GIF Player according to the selected GIF Method in the plugin options page.
You can use the GIF Player as a Gutenberg block. Check the wiki for more details.
For those GIF files that are already uploaded in your Media Library you can generate the assets in one click.
You just have to go to your Media Library section and see the media files as list then hover the GIF you want to generate the assets and click "Generate GIF Player" option:
You should see an admin notice after success or fail assets generation.
To use the GIF Player as video you need two things:
-
FFMpeg library. This is the library to convert the GIF files to video format.
-
shell_exec. A PHP function to run the ffmpeg command.
Check the GIF as Video wiki for more details.
By default the plugin converts the GIF to WebM and MP4 but you can add more using the custom filters.
Some Lazy Load plugins are compatible with the three GIF player methods in the plugin but there are other plugins that won't allow you to reproduce the GIF player.
In case the GIF player cannot reproduce you can use your Lazy Load plugin filters to skip Lazy Load by using the GIF CSS classes.
The CSS classes for every GIF player are:
- GIF:
wp-gp-pp-gif - Canvas:
wp-gp-pp-gif-canvas-player - Video:
wp-gp-pp-video-player
If your Lazy Load plugin ask you to add a custom CSS class into the GIF asset to avoid Lazy Load you will have to use the GIF player custom filters in your functions.php file. Check the custom filters to avoid Lazy Load for the GIF players.