The essential news about content management systems and mobile technology. Powered by Perfect Publisher and XT Search for Algolia.
The News Site publishes posts to the following channels: Facebook, Instagram, Twitter, Telegram, Web Push, Tumblr, and Blogger.
One technique that websites use to increase the number of page views is to split up their articles into multiple pages. By splitting up their articles into multiple pages, they increase the amount of advertising they can sell.
Have you ever seen one of those top 10 lists where each item is on a different page?
One OSTraining member wanted to do the same thing with Joomla.
I'm going to show you how to split your articles by using page breaks and a simple template override.
First, create the content. The topic is up to you; take in mind since we are talking about viral content, be sure the title is catchy and uses a number on it. In my example is "The 5 Yellow Millionaires of All Time!".
Once you have the content, define the intro text by clicking on the "read more" button. Normally we add this after the first or second paragraph.
Then, split the rest of the content by clicking on the "Page break" button.
Insert as many break pages as you need, depending in how many parts you want to split your article into. For example, for a Top 10 post, nine page breaks would be enough.
If you open your article in the frontend, this will be the result:
As you can see only the content before the first page break is displayed. In order to continue seeing the rest of the text, use the pagination as below:
This step is optional, however it is highly recommended for a better user experience.
I would like to keep only the "prev" and "next" pagination buttons visible and remove the rest, in order to get a more concise pagination.
I will do a template override to customize the pagination.
If your template uses a framework or if pagination.php file already exists, ignore the following steps and ask for help from your template provider.
function pagination_item_active(&$item)
{
// Check for "Prev" item
if ($item->text == JText::_('JPREV'))
{
$display = '<li><a title="' . $item->text . '" href="' . $item->link . '" class="pagenav">' . JText::_('JPREV') . '</a></li>';
}
// Check for "Next" item
if ($item->text == JText::_('JNEXT'))
{
$display = '<li><a title="' . $item->text . '" href="' . $item->link . '" class="pagenav">' . JText::_('JNEXT') . '</a></li>';
}
if(!isset($display)){
$display = '';
}
return $display;
}
Look for the method pagination_item_inactive and replace it with:
function pagination_item_inactive(&$item)
{
return '';
}
Without going in details, we removed the code that printed the extra pagination buttons we don't need.
Refresh your article to confirm the pagination is shorter.
Note: during this tutorial, I needed to refresh my page more than one time to see the template override in action. In case you experience something similar, refresh a couple of times and clear the Joomla cache if necessary.
About the author
Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.
Copyscape is a great tool to know if other websites copied your content.
For SEO purposes, it's always a good idea to keep an eye on whether your content is being ripped off.
In this short post, I'll share with you how to use Copyscape to look for duplicated content on other sites.
If a considerable portion of your content is being used on another site, it will be listed below.
Note: this doesn't 100% mean the sites listed in the results copied your site's content. It can also list long phrases that match small portions of your text.
About the author
Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.
If you use Joomla for marketing automation, we have a new OSDownloads feature that you'll love.
OSDownloads now integrates with MailChimp Groups. This means you can send targeted emails to people who download a particular file.
For example, if someone downloads OSDownloads, we can send them a series of follow-up emails about that extension.
Let' s see how this new feature works.
On this screen, you can choose the global settings for OSDownloads' integration with MailChimp.
In addition to the global setting, you can also connect MailChimp to different categories and files.
Now you are ready to create your autoresponders. Go back to MailChimp.com and you can use their "Automation" feature to set up your emails.
We're going to add custom fields so that you can collect specific information from people when they download a file.
This will make OSDownloads an even more useful marketing automation tool for Joomla.
About the author
Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.
Ustream is a really popular way to publish videos on the web.
Did you know that you can add Ustream videos to your Joomla site, using just a URL?
You can do that with the OSEmbed extension. Here's how easy it is to make Ustream work with Joomla ...
About the author
Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.
We use Wistia[1] to host all our videos and provide a great viewing experience for our users.
The Wistia platform offers many useful features out-of-the-box, including the design of the player, video controls, social sharing, timeline actions, and more. If you login to your Wistia account, you'll be able to customize all these features using their friendly admin panel.
However, Wistia also has an API that allows you to add your own customizations. From a developer perspective, I want to show you how to take advantage the Wistia API to adding extra features to their video player.
The image below shows the Wistia videos hosted here at OSTraining.com. Our developers have used the Wistia API to add many customizations.
Wistia provides a documented JavaScript API[2]. This API allows you to embed your video, customizing and controlling many aspects of your video player.
Many of Wistia's default features are packaged as plugins. Plugins are additional scripts you can add to your video, giving it new functionality and adding new interfaces. You can enable, disable or even modify these plugins. A good example of
A good example of plugins are embed options[3] which include dim-the-lights, turnstile,resumable, and others. These can be a nice starting point for your research.
To use these plugins, make sure you are using the HTML5 player, not the Flash Player. No API is provided for the Flash Player and so custom plugin will not work.
For any plugin you create, you can use the same basic structure I have below:
/**
* @package MyPlugin
* @license https://www.gnu.org/licenses/gpl.html GNU/GPL
*/
Wistia.plugin('myplugin', function(video) {
// Wait for the video element to be fully loaded
interval = setInterval(function() {
if (video.elem() != null) {
clearInterval(interval);
interval = null;
// Your magic goes here
}
}, 500);
return {
'myplugin': this
};
});
Adding the custom Wistia
plugin feature
Now that we have a basic
plugin, let's use it to add a new feature. What will the plugin do?
It will rewind the video for "n" seconds.
This will be a simple feature
with no fancy interface integration. We will just have a button at
the top of the video, allowing the user to rewind.
Later, in my next post,
I'll share some tips about how to hack the interface and
customize the button, making it look like a native Wistia
control.
One key concept to
understand is that in HTML5 video, all the controls and wrappers
are basically a set of HTML, CSS, and JavaScript elements. We just
need to find out where we want to display our custom element, and
how to interact with the provided API or native video
element.
Check the comments in the code
below:
/**
* @package Rewind
* @license https://www.gnu.org/licenses/gpl.html GNU/GPL
*/
Wistia.plugin('rewind', function(video) {
// Wait for the video element to be fully loaded
interval = setInterval(function() {
if (video.elem() != null) {
clearInterval(interval);
interval = null;
// Get the option with the period we want to rewind.
// We will see later how to set options
var rewindTime = video.options.rewindTime;
// Create the button, using a native JS method
var rewindButton = document.createElement('button');
// Set a basic style just to display it on the position we want
rewindButton.style.position = 'absolute';
rewindButton.style.top = '2px';
rewindButton.style.right = '2px';
rewindButton.style.width = '30px';
rewindButton.style.height = '20px';
// Set the button text, to display the configured rewind time
rewindButton.innerText = '< ' + parseInt(rewindTime);
// Let's inject the button into the video player's grid
video.grid.center.appendChild(rewindButton);
// Add the action to the button
rewindButton.addEventListener('click', function() {
// Get the current time in the video
// https://wistia.com/doc/player-api#time
var currentTime = wistiaEmbed.time()
// Get the target time we desire
var newTime = parseInt(currentTime - rewindTime);
// Just check if we have a negative time, and reset to 0
if (newTime < 0) {
newTime = 0;
}
// Set the time in the video
// https://wistia.com/doc/player-api#timeval
wistiaEmbed.time(newTime);
});
}
}, 500);
return {
'rewind': this
};
});
We are using only native
JavaScript, but feel free to use other libraries like jQuery. It
will make your work easier.
Loading and testing the
Wistia plugin
There are other ways to load
Wistia player and your plugin asynchronously, but just to keep it
simple for now, here is how you can load and test your
plugin.
...
<div id="wistia_lq4ie79g8o" class="wistia_embed" style="width:640px; height:360px;"></div>
<script charset="ISO-8859-1" src="https://fast.wistia.com/assets/external/E-v1.js"></script>
<script>
// Considering our video ID as: lq4ie79g8o
// Instantiate the embed player
window.wistiaEmbed = Wistia.embed("lq4ie79g8o", {
// Set the value for the global param we accessed from the plugin using:
// ... video.options.rewindTime
rewindTime: 10,
plugin: {
// Here is a list of plugins you want to load
'rewind': {
src: 'file:///Users/anderson/Projects/ostraining/tmp/wistia-blog/plugin.js'
}
// To add multiple plugins, just add new items
// ,
// 'other_plugin': {
// src: 'https://.....'
// }
}
});
</script>
...
The image below is a preview
of how the rewind button will appear for you. For better styling,
we can work with different grid positions and use some native CSS
classes with the "romulus" prefix. We will cover these subjects in
an upcoming blog post. Whethere you're using Joomla, WordPress,
Drupal or another platform for your videos, you'll be able to
create a great-looking experience with Wistia.