WordPress Media - GreenGeeks https://www.greengeeks.com/tutorials/category/wordpress-media/ How-to Website Tutorials Fri, 20 Oct 2023 14:17:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.3 How to Add a Loading Animation to your WordPress Website https://www.greengeeks.com/tutorials/loading-animation-wordpress/ https://www.greengeeks.com/tutorials/loading-animation-wordpress/#respond Wed, 02 Jun 2021 15:26:14 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=42250 With WordPress, you can customize every single aspect of your website, including the loading screen animation effect. Normally, you would need to use coding to […]

The post How to Add a Loading Animation to your WordPress Website appeared first on GreenGeeks.

]]>
With WordPress, you can customize every single aspect of your website, including the loading screen animation effect. Normally, you would need to use coding to achieve this. However, you can also use a plugin. And I have found the perfect one, WP Smart Preloader.

This plugin allows you to select a loading animation and apply it to the website. It also offers users the ability to add custom CSS to customize any of the default animations. Thus the possibilities are endless.

Today, I will demonstrate how to use the WP Smart Preloader plugin to customize the load screen.

What Is A Loading Animation?

Loading animation is a small animation that is visible when something is loading. For websites, these animations appear when pages take longer than usual to load or when a certain process requires additional time to complete, like a payment transaction.

There are many famous ones that have become synonymous with certain brands.

For instance, Mac users should be very familiar with the spinning color wheel. In many cases, these loading animations can become very recognizable. It really depends on the visitor’s perspective.

Why Change the WordPress Page Loading Animation?

In reality, there is absolutely no advantage of doing this from a performance standpoint. In fact, you might even be increasing the load times to do that (almost negligible). That said, making your website looks the way you want it to is a good enough reason for most.

And many visitors will appreciate that attention to detail.

Of course, there is one main advantage, which is custom branding. Instead of using generic preloader images, you can create a custom one. And that custom visual could include your logo or company mascot.

Therefore, even when a customer is loading, they can’t escape your brand.

That said, doing this requires more coding knowledge, so it isn’t for everyone.

It’s also worth mentioning that load animations are not just for pages. In some cases, customers may have to wait for the information to process on your website. These are great opportunities to show off flashy animations.

How to Customize the Loading Animation in WordPress

Step 1: Install WP Smart Preloader

The WP Smart Preloader plugin allows you to swap between 6 loading animations for your website. Each one can be customized further with additional CSS. You can also choose to add your own custom animation, but you must fully design it with code.

Overall, the process couldn’t be easier and will only take a few minutes at most.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for WP Smart Preloader in the available search box. This will pull up additional plugins that you may find helpful.

WP Smart Preloader

Scroll down until you find the WP Smart Preloader plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Select a Preloader Image

In terms of settings, there are not many. In reality, you just need to select the preloading gif and save your choice and everything will appear on your website.

On the left-hand admin panel, click on Settings and select the WP Smart Preloader option.

Settings

At the top, you will see a drop-down box that you can use to select a website loader. In total, there are six of them and you can create your own.

Since creating your own involves the use of custom code, I cannot demonstrate how to do that.

Instead, pick one of the preloader images.

Preloader

In the box below, you can see a preview of the loading animation.

Preview

There is a checkbox below this that will only display the animation on your home page. In reality, the home page is the most common spot to see a custom loading animation, thus it might make sense for your website to do the same.

Homepage

Step 3: Use Custom Code (Optional)

Next, you will find two text boxes in which you can add custom code to create a new loading animation or change existing ones. The custom animation box accepts HTML, while the custom CSS box accepts CSS code.

Even if you like the default loader, it is good to make sure that it uses your website colors.

Customize Animations

Keep in mind that these boxes don’t check for syntax errors. Therefore, you might want to use an actual HTML editor to troubleshoot.

If you’re looking for a great place to learn a bit of CSS for free, W3Schools has some awesome tutorials.

Step 4: Choose the Animation Time

Finally, you will see two more text boxes that you can use to control the duration and fade-out times of the animation. In most cases, you can leave these blank because they have a default value that is ideal for the default load animations.

If you chose to customize these effects, you are probably going to want to edit the duration and fade-out times. Simply enter the number of seconds that the animation will last.

Note: 1 second = 1000, thus if you wanted the effect to last 2.5 seconds, you would enter 2500.

Duration

Once you are satisfied with all of the changes you have made, click on the “Save Changes” button.

Save Changes

Congratulations, your new loading animation will be visible on your website. You can make changes to this section at any time.

Additional Plugins

As you might have guessed, there are quite a few plugins to choose from when it comes to loading animations in WordPress.

Here are a few other plugins you may find useful.

Preloader for Website

Preloader for Website

The Preloader for Website plugin allows users to add animated loading screens in WordPress. The plugin uses a lightweight design, which means the impact on your website is minimal. You can customize various features on the loading pages to better suit your needs.

Preloader Matrix

Preloader Matrix

Preloader Matrix is another excellent choice if you want to customize your loading screens and animations in WordPress. This plugin offers users over 40 unique animations to choose from with a variety of customization options. You can even set how long the loading screen will last.

I highly recommend taking a look at the animation this plugin offers if you are not satisfied with WP Smart Preloader.

Avoid Long Loading Times

Sadly, some developers might think that this is an excuse to have longer loading times, but let me assure you it is not. Long loading times not only ruin the user experience, but they will tank your search engine rankings.

Thus the best loading animations are the ones you never see.

However, there are many cases of on-page loading that are not the same as page loading. For instance, say your website performs a calculation that allows visitors to enter values. If the formula is complicated, that could result in an extended wait time.

Thus, having a flashy animation on screen while they wait for the data to load makes sense.

It really depends on the type of loading.

Conclusion

Adding a custom loading animation can help make your website stand out and show off your creativity. And if you make the animation incorporate your website’s logo and colors, you can help build brand recognition.

Of course, the fewer users actually see these loading animations the better. After all, seeing these animations means they are not enjoying your content or looking at products.

Did you use a default animation or create a custom one?

The post How to Add a Loading Animation to your WordPress Website appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/loading-animation-wordpress/feed/ 0
How to Make a Video Library with All-in-One Video Gallery in WordPress https://www.greengeeks.com/tutorials/all-in-one-video-gallery-wordpress/ https://www.greengeeks.com/tutorials/all-in-one-video-gallery-wordpress/#respond Fri, 02 Apr 2021 14:00:54 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=40548 Videos are the most engaging content on the internet, and that is exactly why marketing teams are focusing their efforts on them. In fact, 87% […]

The post How to Make a Video Library with All-in-One Video Gallery in WordPress appeared first on GreenGeeks.

]]>
Videos are the most engaging content on the internet, and that is exactly why marketing teams are focusing their efforts on them. In fact, 87% of marketers use video content. And you can too with the All-in-One Video Gallery plugin for WordPress.

With it, you can build a stunning video gallery without writing a single line of code. And you have access to the most popular video formats in the world, which include YouTube, Vimeo, Facebook, Daily Motion, and more.

Today, I will demonstrate how to build a video gallery in WordPress with the All-in-One Video Gallery plugin.

Why Is Video Content Important?

Video content is successful because it can immediately grab visitor’s attention, bring traffic to your website, and improve the click-through rate of your website.

With the popularity of social media websites and the rise of mobile devices, video content has been thriving. For instance, did you know that 82% of Twitter users consume video content? How about that 92% of mobile users are going to share video content with their friends?

These and many other stats are truly stunning, but they don’t explain why it is performing so well.

One major factor is convenience, especially for mobile users. Have you ever sat there and read a full blog post on your phone? If so, you are one of the rare few who do. In reality, mobile users are looking for video content and search engines know this.

Google and other engines all prioritize video content in their rankings. In fact, they even use the mobile version of your pages to rank your website. Thus, considering mobile users is necessary.

Social media has also played a huge role in the popularity of video content. Did you know that posts on Facebook with video content receive the most engagement and have the best sharability on the platform?

It’s really simple, video content sticks out from walls of text. Thus, it gets more attention.

How to Build A Video Gallery with All-in-One Video Gallery

Step 1: Install All-in-One Video Gallery

All-in-One Video Gallery is a free video gallery plugin that does not require any coding. Most importantly, it is fully compatible with YouTube and other video services. The gallery designs you can come up with are unique and customizable.

That said, you can create a YouTube-like gallery in a few minutes, which is the most popular option.

Let’s begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for All-in-One Video Gallery in the available search box. This will pull up additional plugins that you may find helpful.

All-In-One

Scroll down until you find the All-in-One Video Gallery plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Upon activation, you will be asked if you would like to receive notifications about important updates. You may choose to either opt-in or skip it. This will not impact the plugin in any way.

Step 2:Add Categories

Building a video gallery is pretty simple, but before you begin, you need to create categories for the videos. The plugin will group videos together in a gallery based on the category it is assigned. Thus, if it isn’t in a category, it won’t be in a gallery.

On the left-hand admin panel click on Video Gallery and select the Video Categories option.

Video Gallery

If you are getting a sense of deja vu, that’s normal. This screen is identical to creating categories for your WordPress website, however, it is entirely separate. Enter a name, slug, and description, then click on the “Add New Category” button.

Note: You can even add an image, but that’s really going a bit overboard.

Add New Category

Add as many categories as you want before moving on to the next step. There is also a tag section that works identical to this but isn’t required. It does provide more filtering options for the actual gallery if you choose to do so.

Step 3: Add Videos

Next, you need to begin adding videos to the plugin. The way you add videos depends on the type of video you want to share. In this example, I will demonstrate how to add YouTube videos to the gallery.

Note: If you are choosing to upload video files to WordPress, you may need to increase your file upload limit. By default, it is very unlikely that you will be able to upload a video file.

Select the All Videos option and click on the “Add New” button.

Add New Button

This will open up a new post that is only intended for a video. At the top, you can add a title, which I highly recommend. Scroll down to the Video Sources section.

The first option is the source type. In this case, I am selecting YouTube, but feel free to select any option.

Source Type

You can now enter the YouTube URL into the appropriate text box. If you picked a different option, you will instead need to enter the required information.

YouTube URL

You can choose to fill in the next three text boxes for Image, Duration, and View or choose to leave them blank. If you are using YouTube, it is unnecessary because these are handled by the platform.

Important Note: You must assign each video a category. If it does not have a category, it cannot be placed in a gallery.

Once, you select a category, click on the “Publish” button when you are done.

Publish

You will also find the shortcode next to the “Publish” button. This is handy if you want to place an individual video on your website.

Video Shortcode

Repeat this step to add as many videos as you want. Remember that the video must be added first before you can add it to the gallery.

Step 4: Build A WordPress Video Gallery

Finally, it’s time to actually build a gallery, which is pretty easy. Keep in mind that many of the customization options are only available in the Pro version. Thus, the options may seem a bit limited at first glance.

Click on the Dashboard option.

Dashboard

There are two tabs here, but the second tab only consists of an FAQ. It’s a great resource to utilize if you have any questions about the plugin.

In the General section, you can choose a template (only 1 choice for the free version), category (this determines what videos will appear), tag, limit how many videos appear on a page, and how the videos are ordered.

Click on the “+ Gallery” option when the choices are made.

Gallery

Here, you can further customize the gallery by selecting the number of columns, the thumbnail positions, and a variety of information that you can either hide or display.

When you are done, click on the “Generate Shortcode” button.

Note: This shortcode is unique and you will have to create a new gallery to get another.

Generate Shortcode

A small pop-up will appear. Copy the shortcode.

Copy Shortcode

Simply paste the shortcode into a shortcode block on the desired post or page and then save the changes. You can then view it on your website.

View Video Gallery

Congratulations on using the All-in-One Video Gallery plugin to create your very own video gallery in WordPress.

Make More Video Content

Video content is extremely important for every type of website. Even if you run an online shop, including video content alongside a product can result in higher sales. Or, if you write tutorials, including a video solution alongside a written one can help mobile visitors.

No matter what, you need to start creating more video content.

How easy did you find the plugin to use? Has a video gallery improved the user experience?

The post How to Make a Video Library with All-in-One Video Gallery in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/all-in-one-video-gallery-wordpress/feed/ 0
How to Display Latest Videos with YouTube Showcase in WordPress https://www.greengeeks.com/tutorials/youtube-showcase-wordpress/ https://www.greengeeks.com/tutorials/youtube-showcase-wordpress/#respond Mon, 08 Feb 2021 15:00:37 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=39662 Do you want to create a YouTube showcase on your WordPress website? Video content has been rapidly growing over the years with no signs of […]

The post How to Display Latest Videos with YouTube Showcase in WordPress appeared first on GreenGeeks.

]]>
Do you want to create a YouTube showcase on your WordPress website? Video content has been rapidly growing over the years with no signs of slowing down, and YouTube has been leading that charge as the premier video platform.

In fact, every single day 1 billion hours of video is watched on YouTube. It’s massive, to say the least, and everyone uses it to post their video content. As such, there is a large demand to utilize this content on personal websites.

Today, I will demonstrate how to build a YouTube showcase by using the YouTube Gallery plugin.

What is A YouTube Showcase?

A YouTube Showcase is a collection of videos from the YouTube platform assembled in a gallery format. The point of the videos is to show off a particular concept, theory, product, series, or a centralized idea of some sort.

For instance, you could create a showcase focused on Black History Month that shared a series of historical videos. Or you could assemble a collection of reviews about your business to show visitors that everyone likes the product or services you offer.

A showcase is simply a focused gallery, and they are easy to put together and don’t even require you to make video content because you can use anyone’s YouTube videos.

How to Build A WordPress YouTube Showcase

Step 1: Install YouTube Gallery

The YouTube Gallery plugin is one of the best choices to build a showcase or gallery in WordPress. It’s simple to use, allows you to add as many videos as you want, and looks great on any webpage. The Plugin allows you to place videos in a grid format and they can be any video.

Of course, if you want to just show off your latest videos, you can use the YouTube API to connect with your channel on WordPress. This will allow you to easily grab your own videos in a matter of seconds.

Note: The API features are locked behind the Pro version.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for YouTube Gallery in the available search box. This will pull up additional plugins that you may find helpful.

Note: There are multiple plugins that share the same name. In this case, the full plugin name is YouTube Gallery – Best YouTube Video Gallery for WordPress.

YouTube Gallery

Scroll down until you find the YouTube Gallery plugin, click on the “Install Now” button and activate the plugin for use.

Install Now

Upon activation, the plugin will ask to collect usage statistics from your website. You can choose to provide an email and accept or you can skip it. You can use the plugin regardless of your choice.

Step 2: Add Videos to the Showcase

The first step is to begin adding videos to the gallery, which is a very straightforward process. However, it is worth noting that it is much faster using the API available in the Pro version.

On the left-hand admin panel, click on Videos and select the Add New option.

Videos

At the top, you can enter a title for the video. This is NOT the same as the video title. It is the equivalent of creating a post for a specific video. For instance, if you were doing a trailer overview for a new movie or video game, you can use the name of the movie or video game.

You can then enter any text you want to include. So in our example, this is where you would enter your overview of the trailer. You can skip adding additional information, but the title is not optional.

Title

Beneath this, you will find the Video Info section. This is where you can enter all of the relevant video details. The first bit of that information is the Video Key. Every YouTube video has a unique, 11-digit key that can be found within the URL.

To identify the key, take a look at the URL of the video you want to add. Locate the “v=” part of the URL, and the next 11 characters are the video key.

Video Key

Now simply paste the video key into the appropriate box.

Paste Key

There are some other options you can choose that include if the video will be featured (great for promoting new content), the resolution of the video (remember higher resolutions are problematic for visitors with slow internet), and if autoplay is enabled.

You can also add a category and tag like a normal post. Once you are satisfied with all of the information you have added, click on the  “Publish” button.

Publish

You can now repeat these steps for every video you want to add to your showcase or gallery. If you plan to incorporate your own channel, the API features will save you quite a bit of time.

Step 3: Displaying Your Showcase

Once you have added some videos, it’s time to display your gallery. The plugin will include every video you have added in the previous step. And like most plugins, this one utilizes shortcodes:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][video_gallery][/ht_message]

Using this shortcode will result in the following view:

Gallery Shortcode

The latest video will be enlarged at the top of the grid view below it. This is to help promote new videos to visitors and is an excellent way to help new content get the views it deserves.

There is also a second shortcode that just adds the grid view without the latest video at the top and is as follows:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][video_grid][/ht_message]

The result will be as follows:

Grid Gallery

You can place these two shortcodes on any page or post on your website. However, since every title will open an individual post for that particular video, I strongly recommend making a page for the showcase or gallery.

Unfortunately, one shortcoming of this plugin is its inability to create multiple galleries. You can only have one at a time, and it can be a lot of work to arrange videos since the only option is to put them in the correct position, instead of rearranging them.

Thus, you may need a different gallery plugin if you want multiple galleries.

Congratulations on learning how to showcase video content in WordPress.YouTube Gallery is an amazing YouTube extension that can work on any website, so be sure to take advantage of it.

Video Content Is Crucial For Success in 2021

Without a doubt, video content is the most important type a website can produce in 2021. Visitors are ten times more likely to engage with a video and share it with their friends on a social media platform than traditional text-based content.

One of the biggest reasons for the sharp rise in recent years has been the dominance of mobile devices. Mobile users watch more content than desktop users, and they are now in the majority of internet users, thus video content is part of being mobile-friendly.

That said, written content is not dead, it’s still just as important. It can be used even more effectively when combined with the video format, so don’t be afraid to change how you manage posts on your site.

If the content is good, it will perform well, nothing has changed in that regard.

How easy did you find the YouTube Gallery plugin to use? What types of showcases do you hope to build with this plugin?

The post How to Display Latest Videos with YouTube Showcase in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/youtube-showcase-wordpress/feed/ 0
How to Add Free Stock Images in WordPress with Pexels https://www.greengeeks.com/tutorials/wordpress-pexels/ https://www.greengeeks.com/tutorials/wordpress-pexels/#respond Wed, 25 Nov 2020 16:27:48 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=38742 Are you looking for free stock images for your WordPress website? If so, then the Pexels: Free Stock Photos plugin is exactly what you are […]

The post How to Add Free Stock Images in WordPress with Pexels appeared first on GreenGeeks.

]]>
Are you looking for free stock images for your WordPress website? If so, then the Pexels: Free Stock Photos plugin is exactly what you are looking for. After all, no WordPress post or blog is complete without an image.

In fact, many content creators believe the thumbnail is the most important part of anything they create. It helps entice users to click on the article or video. And at the end of the day, it really is all about the clicks. Although, try to avoid clickbait images.

Today, I will demonstrate how to get free stock images with the Pexels WordPress plugin.

Why Use Stock Images In WordPress?

Images are a huge part of any website in 2021, but they can take a lot of time to make or capture. This poses a serious problem for websites that churn out content on a regular basis. Stock images can help websites that don’t have a dedicated graphic designer on standby.

And unlike borrowing an image from another source, stock images do not require credit in most cases, which makes them easy to add.

These images can be customized to meet a variety of designs with simple techniques using photo editing software like Photoshop. For example, you can change what is appearing on a computer screen within an image, or what a person is holding.

It really just depends on your skillset. However, that’s not necessary because you could just use the stock image without making any changes.

How to Get Free Stock Photos with Pexels

Step 1: Install Pexels: Free Stock Photos

Pexels: Free Stock Photos is an excellent choice for any website looking for a free option to find free WordPress images. The plugin allows you to download from its vast library of images and upload them to your website. As a result, it can be done directly from your website.

You might be wondering how this is possible and it’s quite simple. All of the images found within Pexels utilize the Creative Commons Zero (CC0) license. All images that have this license are completely free to use for most purposes.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Pexels: Free Stock Photos in the available search box. This will pull up additional plugins that you may find helpful.

Pexels

Scroll down until you find the Pexels: Free Stock Photos plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Find Images to Use

Everything is done inside of WordPress, and there isn’t any setup involved. After activating the plugin, you are ready to go. And as you might have guessed, the first thing you need to do is find an image you want to use.

On the left-hand admin panel, click on Media and select the Pexels Photos option.

Pexal Photos

You will see a search bar at the top of the page. Here, you can search for the images you are looking for. The more specific you get, the fewer results you will find, so stick to general phrases.

Type in a search term and click on the “Search” button.

Search

Note: There is no image preview option, clicking on an image will begin downloading it.

Images will now appear in a grid style on the page. At the bottom, you should notice a “Load More Images” button. Click it to make more images appear.

Load More Images

Note: If you hover over the image, you can see it’s dimensions. WordPress will give you multiple size options, but you can also crop the images in photo editing software if necessary.

Once you find an image you like, click on the image and it will begin downloading. It will automatically add it to your media library.

Click on Image

Repeat this for as many images as you want to add. There are no limits to the number of images you add to your media library using this plugin. But keep in mind that images take up space, so only download what you plan to use.

You can remove images from your media library and re-download them at any time.

Step 3: Add Pexels Images in WordPress

All that’s left is to add the image, which works just like normal. If you already know how to do that, then congratulations on learning how to get free stock images in WordPress. But if not, or you are just looking for a refresher, continue on.

Go to any existing post or page on your website. Additionally, you can create a new one for testing purposes.

Click on the “+” button and add an image block.

+ Button

Click on the Media Library link within the block and select the image you added in the previous step. Then just click on the “Select” button on the bottom right corner.

Select Image

The image will now be visible in the editor and will appear on a live page once the changes are saved.

Pexals Stock Photos

Congratulations on setting up Pexels for all of your stock image needs. If you decide to delete the plugin, it will not impact any of the images you have downloaded through it.

Stock Images Can Only Go So Far

While stock images are a great choice for a new website or large websites that cannot make images for the hundreds of articles they pump out in a month, they have limits.

They are no substitute for amazing images you can capture in the wild or make using photo editing software. These types of images will always perform better and they make your website feel unique.

After all, you’re not the only one using these stock images.

On top of this, there is another shortcoming with Pexels stock images…they don’t have an image for everything. This can be a serious problem for someone writing news articles. Free images are generally very generic and do not include brands or famous people.

Thus, if your blog focuses on current events, stock images will not help you. Instead, you will have to get your images from another source, and that could cost you.

Having the right images is essential to growing in those fields, so it’s well worth the cost.

Another unique field to consider is if you deal with video games. You can use screen capture technology to get images from within the games themselves. And just about every console has this feature built-in.

Consider Adding Watermarks

While the images are completely free to use, you can also add to them. This can be in the form of adding something to the picture, and one of the most common things to add is your website’s logo and name.

This helps users identify that it is from your website. For example, if you shared a link to an article on Facebook, it would display the featured image. Putting your logo and website name can help you stand out.

And it only takes a few minutes to do, and even less once you are used to doing it.

How useful do you find the Pexels stock photos for your posts and blogs? Do you have plans to make or capture your own images?

The post How to Add Free Stock Images in WordPress with Pexels appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/wordpress-pexels/feed/ 0
How to Use Video Gallery by OriginCode in WordPress https://www.greengeeks.com/tutorials/video-gallery-origincode-wordpress/ https://www.greengeeks.com/tutorials/video-gallery-origincode-wordpress/#respond Thu, 08 Oct 2020 14:00:06 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=37786 Do you have a website that is geared toward video posts? Are you a content creator who works mostly with video? If so, then you […]

The post How to Use Video Gallery by OriginCode in WordPress appeared first on GreenGeeks.

]]>
Do you have a website that is geared toward video posts? Are you a content creator who works mostly with video? If so, then you need to have a good way to post a well-thought-out video gallery on your WordPress website.

There are several ways you can create and display a WordPress video gallery. You can write your own code, or use any number of related plugins that can help you get the job done.

Today, I am going to show you how to use a smooth video gallery WordPress plugin that will not only help you display your videos in different gallery settings, but will also give you several different tools and options.

Let’s take a look at the gallery plugin we are going to use today and see all that it has to offer.

Video Gallery – Vimeo and YouTube Gallery

Video Gallery plugin

Video Gallery – Vimeo and YouTube Gallery is the perfect plugin to have if you have a gallery website. Created by OriginCode, this video gallery plugin for WordPress is a responsive multifunctional tool that provides multiple ways and designs for uploading and displaying a video.

The plugin works whether you are trying to create a Vimeo or YouTube gallery, as it is fully compatible with both. You can also create a gallery that mixes both types of videos without any issues.

Video gallery creation is simple, fun, and clean. Once the plugin is activated, you will have several really great options for displaying your galleries. Even the free version of the plugin gives you plenty to create amazing layouts and fill them with descriptions, content, and other options.

The plugin is very lightweight and won’t slow your website down at all. Once activated, you will be able to build as many galleries as you want. You will have the ability to upload videos from YouTube and Vimeo, add titles, add descriptions, and display links.

You also get to choose from one of seven ways to display your gallery. These include:

  • Video/Content Popup
  • Content Slider
  • Lightbox Video Gallery
  • Video Slider
  • Thumbnails Gallery View
  • Justified Gallery View
  • Blog Style View

The plugin is simple and straightforward. It makes it very easy to build and display video galleries all over your WordPress website.

Let’s get the plugin going and add a video gallery together.

Note: This WordPress gallery plugin does have a pro version that gives you a ton of other options. We will touch on it below a little. If you think you need or want the pro version, then feel free to go check it out. However, the tutorial below is based on the free version of the plugin.

Add a Video Gallery to WordPress Website

There are a few things you need to do before you can add a WordPress video gallery. Let’s go over the steps together and also take a look around the plugin real quick.

After that, we will add a gallery together and you will be off and running.

Step 1: Install and Activate the Plugin

In order to start creating video galleries, you first need to install and activate the plugin. You can do this by heading over to the Plugins page in the WordPress admin dashboard.

Once there, simply use the search field to search the plugin by name. When it pops up, install and activate it from there.

Install and activate video gallery plugin

Step 2: View Video Gallery Options

As noted above, this plugin is pretty straightforward. However, there are a couple of things we can explore, even though you can only access the content if you have the pro version of the plugin.

First, click on Video Gallery > Lightbox Options located in the left side menu area of the dashboard. This appears after you have activated the plugin.

Click on video gallery then lightbox options

This will take you to the lightbox options page. You can see you will need to get the full version of the plugin to access any of this.

Lightbox options

Now, once you have viewed that, click on the Advanced Pro Features link and bounce over there real quick.

Click on advanced pro features

Again, you can see all the extra options that are available if you go get the full version of the plugin. There is a button right there that will lead you to the pro version. Feel free to grab it if you need it.

Note: OriginCode charges by site license. So the purchase price will vary based on how many licenses you want.

Step 3: Add a Video Gallery

At this point, you have seen all the available options the plugin has. Now it is time to add your first video gallery. Click on the Video Galleries link in the left menu area.

Click video galleries link

This will take you to the page that houses all the galleries you have or that you will create. Go ahead and click on the “Add New Video Gallery” button.

Click on ad new video gallery

This will open up a video gallery editor where you will add and create a gallery. It is pretty simple and straightforward.

Let’s add a video. Click on the “Add New Video” button on the top right.

Click on ad new video button

This brings up a popup box where you need to add all the relevant options from YouTube or Vimeo that you want to be displayed. You need to add the URL of the video you want to show, a title, a description, and any links you may want.

Popup box video options

Note: All of the options are optional except the actual link to the video.

Once you are done, go ahead and add more videos using the same button and the same process. Add as many as you want to this gallery.

Once you are done adding videos, take a quick look to the right. There, you see a few custom options for your video gallery. You can name your gallery, choose a layout view, and choose how content will display.

View al content display options

Your gallery will look a little like the demo below once you have added all your videos and decided on the options.

Video demo

When you are done, click on the “Save” button. That’s it. You have created your first video gallery. You can repeat this as many times as you want to create more galleries.

Step 4: Add Video Gallery to Post or Page

Now that you have a video gallery built, you can add it to a post or page. The steps are the same for both. Head over to the post or page section of your WordPress website and open up a new or saved document.

Now, take the shortcode that was provided once you saved the gallery and paste that into the post or page.

Click Publish or preview and check it out.

Front end video gallery demo

If you like it, great! If you want to make some adjustments, then simply go back to the video gallery editor and change what you need.

That’s it! You are all done.

Final Thoughts

A video gallery website can get a lot of attention and traffic if it is handled correctly. One of the best ways to create amazing video galleries is to use a plugin like Video Gallery.

This WordPress plugin will give you enough options to create and display amazing video layouts while at the same time keeping it smooth and simple.

I hope this article showed you how easy it is to add a video gallery to WordPress. Now you can create as many as you want and display them all over your website.

Have you ever tried to build a gallery without a plugin? What are some other options you have tried to display them properly?

The post How to Use Video Gallery by OriginCode in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/video-gallery-origincode-wordpress/feed/ 0
How to Add Free Images to WordPress with Featured Image Generator https://www.greengeeks.com/tutorials/wordpress-featured-image-generator/ https://www.greengeeks.com/tutorials/wordpress-featured-image-generator/#respond Wed, 07 Oct 2020 14:00:22 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=37784 Have you ever been in a spot where you have written the perfect article and you need to find some images for it and can’t? […]

The post How to Add Free Images to WordPress with Featured Image Generator appeared first on GreenGeeks.

]]>
Have you ever been in a spot where you have written the perfect article and you need to find some images for it and can’t? Finding images can be a daunting task sometimes, especially if you are looking for images that are free to use. Luckily, there is a plugin called Featured Image Generator that makes the entire process much easier.

How to Use Featured Image Generator

Featured Image Generator is a WordPress plugin that allows you to search for amazing featured images to use for free. It uses an API from unsplash.com that you can get and plug right into your WordPress dashboard.

The plugin allows you to use free license photos and upload and edit them directly from your WordPress media library. It is lightweight but powerful. Featured Image Generator is free to use, and it is easy to install, set up, and start pulling images.

This particular image creator plugin also includes layers, color adjustments, and text tools that you can use to make your featured image stand out even more.

The tool has everything you need. Some of the main features include:

Remember, while you can use these as featured images, you can also use them in any other part of your posts and pages as well. This is a great way to pull multiple photos for an article when needed.

Note: There is a pro version of the plugin available. If the features seem like something you need, then you are more than welcome to go get it. The steps below are based on the free version of this plugin, as it gives you all the tools you need.

Let’s take a look at how to use the Featured Image Generator plugin in order to easily customize and add featured images to your posts and pages.

Step 1: Install and Activate the Plugin

In order to start using this free image generator, you first need to install and activate the plugin. You can do this by jumping directly over to the Plugins page inside your WordPress admin dashboard.

Simply use the search field to search the plugin by name and install it directly from there.

Install the Featured Image Generator

Step 2: Access the Settings Page

Once the plugin has been installed and activated, you want to go access the main settings and configuration page. To do this, click on Settings > Featured Image Generator, located in the left-side menu area of the dashboard.

Featured Image Generator

You notice that this is now an available option after you activate the plugin.

Step 3: Get an Unsplash API

At this point, you are on the main setup page for the plugin. There are only a few quick options to consider before you can use it to grab images.

Aside from having the ability to set a default font family and default thumbnail size, you have to go get an API from Unsplash. Click on the “Get API Here” link and go grab your Unsplash API.

Get API Here

Doing so will take you to the new application page. Fill in the application name, leave the permissions blank, and save. When you do this, you will receive an App ID. Copy and paste this back into the Unsplash API field in the WordPress dashboard.

Click on the “Save Changes” button and you are ready to use the plugin.

Step 4: Add a New Post

From here, head over to the Posts section of your dashboard. You can either add a new post or edit an existing one.

Note: The concept is the same for adding featured images to pages.

Open up the post where you want to add a featured image. You will see the WordPress editor open as it always does when creating or editing posts.

Open up a post to use the featured Image Generator

Step 5: Add a Featured Image to Post

If you scroll down a little to the featured image box, you will see that there is a new featured image widget area called “FIG” now available. Click on the “Featured Image Generator” link to use it.

Featured Image Generator

This will open up an image box that is embedded from Unsplash because of the API you received above.

Search for an image by using the search field. In this case, we are going to grab a featured image of the Pacific Ocean, so that is what our search term is.

Image Search

Note: You see that there is a Pixabay tab as well. That can be accessed if you have the pro version of the plugin.

From here, click on the image you want to use. When you do, the image will be automatically put into the built-in editor within the Free Image Generator plugin.

Customize the Image

You can see all of the editing options available. You can set the height and width of the image, filter the opacity to your liking, add a caption to the photo, and pick your font style, size, placement, and color.

Click on the “Save to Media” button to save the changes and add it to your Media Library. You can now select it and add it to your post as a featured image.

The image is now in your media library from the Featured Image Generator

That’s it! Repeat the steps above as often as you want to download images into your WordPress media library. Remember, you can use these photos anywhere in your articles, not just as featured images.

Pro Features in the Featured Image Generator

The Featured Image Generator is a free plugin but does have a Pro version you can upgrade to.

As mentioned in the tutorial, the Pro version allows you to access the Pixabay library in addition to the Unsplash one. This gives you far more options to choose from, but it isn’t necessarily better, it’s just more options.

The other core feature is the ability to create templates for the images you select. This will ensure they are always the proper size you set for your website and any other settings you configure like borders and whatnot.

Overall, the Pro version can be a useful tool, but just remember you can just access Pixabay for free or use another plugin for the same result.

FAQ for Featured Images in WordPress

Is the Featured Image the Thumbnail in WordPress?

Yes. The featured image acts as the thumbnail image on your website, or if a link to it is shared on social media platforms like Facebook, X (the platform formerly known as Twitter), Instagram, and so on.

Do You Need a Featured Image to Publish a Post?

You do not need a featured image to publish a post in WordPress. With that said, it is highly recommended to add one, otherwise the first image in your article will become the thumbnail of the post.

Do Featured Images Impact SEO?

Yes. Featured images do impact your search engine rankings and the thumbnails that appear in search results make your links more clickable and increase traffic. Failure to set an image will hurt your ability to standout in search results.

How Do I Make a Good Featured Image in WordPress?

A featured image should reflect the post topic and catch the user’s attention. As such, it should match the tome of the post (funny, serious, informative, etc.), contain your website’s logo, and include text that describes the post.

How Big Should My Featured Image Be?

1200 x 628 is the recommended image size as it works well for most modern themes. With that said, some themes may require different featured image sizes and you can find this information in the theme documentation.

Should My Featured Image Be a PNG or JPEG?

PNG and JPEG have their own set of Pros and Cons, but when it comes to SEO, JPEG has the advantage. This is because JPEG files are smaller than PNG files, which can impact page speeds. With that said, the changes are largely negligible.

Do I Need Alt Text on My Featured Image?

Yes. Alt Text can improve your SEO rankings, especially if it includes the keyword you are trying to rank for. Just remember the goal of Alt Text is so users know what the picture was if it fails to load.

Use the Featured Image Generator Today

Finding good images to use for free on your website can mean the difference between garnering more interest, or having people simply pass the article by. Remember, images in WordPress are a huge part of SEO, so they need to be handled properly.

Luckily, the Featured Image Generator plugin gives you a very easy way to access and edit thousands of images that are free to use. Give the plugin a try and see all that it can do for you.

What other places do you go to find free images? Have you ever used this plugin or one similar to it to connect your site to a free image library?

The post How to Add Free Images to WordPress with Featured Image Generator appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/wordpress-featured-image-generator/feed/ 0
How to Convert Images in WordPress Using WebP Converter for Media https://www.greengeeks.com/tutorials/wordpress-webp-converter/ https://www.greengeeks.com/tutorials/wordpress-webp-converter/#comments Tue, 06 Oct 2020 14:00:22 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=37835 About a decade ago, Google introduced a new image format for the web, WebP. If you’ve been looking for an easy way to make a […]

The post How to Convert Images in WordPress Using WebP Converter for Media appeared first on GreenGeeks.

]]>
About a decade ago, Google introduced a new image format for the web, WebP. If you’ve been looking for an easy way to make a move to WebP, we’ve got a plugin for you. It’s called the WebP Converter for Media. It can take care of your switch to WebP with a few clicks.

What Is WebP?

WebP is a web image format similar to GIF, JPG, and PNG. They are all image formats that are optimized for use on the Internet. Images in the WebP format can take up as little as half the storage size of comparable JPG images. Currently, WebP images are typically used in tandem with JPGs, since WebP is not yet supported by all browsers.

How to Convert a WordPress Blog to Use WebP Images

The WebP Converter for Media plugin will do three things:

  • Convert existing JPG, PNG, and GIF images to WebP (while keeping the original images).
  • Convert new JPG, PNG, and GIF image uploads to WebP.
  • Configure your site to serve WebP images to visitors whose browsers support them.

It’s the ideal set-it-and-forget-it WordPress WebP converter.

Let’s go through the installation and configuration step by step.

1. Installing the WebP Converter for Media Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter, “WebP Converter.”

search for the WordPress WebP Converter for Media plugin

When you find the plugin, click the “Install Now” button.

click to install the WordPress WebP Converter for Media plugin

Now the plugin is installed, but it has to be activated before you can use it.

Click the “Activate” button.

click to activate the WordPress WebP Converter for Media plugin

That completes installation and activation. Now let’s move on to getting the plugin up and running on your website.

2. Configuring the WebP Converter for Media Plugin

After activating the plugin, you’ll see a “Speed up my website” button on the plugins page. Click it to get to the configuration page.

click the "Speed up my website" button

If you don’t see the button or have navigated away from it, not to worry. In the left column navigation, mouse over the “Settings” link and click the “WebP Converter” link.

A Note on a Potential Issue for Some Websites

If your web hosting uses server caching for redirects, the plugin won’t work properly. The plugin can detect caching and will display this error if you’re affected:

server configuration error

If you see the error, ask your web host to disable server caching of redirects on your account. If that isn’t possible (or your host is unwilling to make the change), you can’t use the plugin.

Don’t ignore the error and go forward with the plugin configuration. Running the plugin in that server environment will cause image display problems.

Okay, back to our configuration.

On the WebP Converter page, the first thing you’ll see is a List of supported files extensions. Those are the file types the plugin will work with.

WebP Converter for Media plugin configuration supported files

GIF is not selected by default. If you use GIF images on your site, you may want to check that option. Animated GIFs converted to WebP should still be animated since the format supports it.

Next is the List of supported directories section. By default, only your uploads (usually in the Media Library) are selected.

If you want to convert your theme images to WebP, check the “/themes” box.

WebP Converter for Media plugin configuration supported directories

The Conversion method option can be left on the default “GD” setting. If you use or prefer Imagick, you can select that option (if your server supports it).

WebP Converter for Media plugin configuration conversion method

The Images quality section is where you choose the amount of compression the plugin uses to convert JPG to WebP.

The larger the percentage here, the larger the image files will be. The default (and recommended) quality is 85%, so we’ll leave that where it is.

WebP Converter for Media plugin configuration image quality

The Extra features section contains some advanced configuration settings. If you’re unsure about any of the options, just leave the default values.

WebP Converter for Media plugin configuration extra features

If you’ve made any changes, click the “Save Changes” button.

click the "Save Changes" button

3. How to Convert Existing Images

Any new images you upload after installing the plugin will automatically be converted to WebP.

But what about your existing images?

You should still be on the WebP Converter page, so scroll down to the “Regenerate images” section.

Leave the “Force convert all images again” box unchecked and click the “Regenerate All” button.

WebP Converter for Media plugin click the "Regenerate All" button

When the WebP convert is complete, you’ll see a success message.

But you may also see errors.

WebP Converter for Media plugin conversion errors

The error is saying that the plugin converted an image, but the WebP image was larger than the original. So the plugin deleted the WebP file.

So that’s not really an error, strictly speaking. And it’s not a problem, since the original images are still served to the visitor’s browser when it’s appropriate.

The higher you set the “Images quality” percentage, the more you’ll see those errors. The lower the “Images quality” percentage, the fewer such errors will happen. But of course, the lower you set the percentage, the lower your image quality will be.

4. The Results of the WebP Image Conversion

After the conversion, the WebP images that were generated are available on your site.

The original:

WebP Converter for Media plugin original image on site

The WebP version:

WebP Converter for Media plugin WebP image on site

You don’t have to change anything or even know the path to the new WebP image. The plugin takes care of everything for you.

5. What Happens if You Uninstall the WebP Converter Plugin

  • When you deactivate the plugin, your site will stop serving WebP images.
  • If you delete the plugin, your site will stop serving WebP images. In addition, the /uploads-webpc directory containing the WebP images will be deleted. If you want to keep a copy of the WebP images, make sure to download them before deleting the plugin. Once the /uploads-webpc directory is deleted, there’s no way to get the images back.

The plugin does not appear to create any database tables. So no database cleanup is necessary when the plugin is uninstalled or deleted.

The above issues are what we found in the course of our use and testing. There may be other issues that our testing did not uncover.

Do You Need a WordPress WebP Converter Plugin?

Like any WordPress plugin, there’s no direct answer to who needs it or how beneficial it can be. Every plugin adds “overhead” in the form of server resource use and load time. That overhead is usually minimal. But if your site uses very few images, there may not be a significant benefit to using WebP images. (Not to mention the overhead necessary to know when to serve them.)

On the other hand, most image-heavy sites can undoubtedly benefit from the increased speed smaller image files can bring. For most images, the additional compression used to create a WebP image is not noticeable. Depending, of course, on how much you choose to compress them (the “Images quality” percentage we talked about).

For a site where image quality is important, say a photography site, WebP is not usually going to be desirable. The purpose of WebP is to provide smaller image file sizes, and that comes at the expense of image quality. If you’re particular about the quality of your images, you’re bound to find fault with WebP.

But for most of us, especially those of us with large images on our sites, WebP can help. Google likes to see WebP images (no surprise there since it’s their technology), though they are not a ranking factor. The site response speed is a factor, though, so any time you can cut that time, you’re coming out ahead.

Have you been waiting to make a move to WebP images? What’s been preventing you so far? Do you think you’ll give this plugin a try?

Let me know in the comments. I’d love to hear from you.

The post How to Convert Images in WordPress Using WebP Converter for Media appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/wordpress-webp-converter/feed/ 1
How to Set Up MP3 Music Player by Sonaar in WordPress https://www.greengeeks.com/tutorials/mp3-music-player-sonaar-wordpress/ https://www.greengeeks.com/tutorials/mp3-music-player-sonaar-wordpress/#comments Tue, 01 Sep 2020 14:00:56 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=36965 Sometimes you just want to be able to listen to some music straight from your WordPress website. Or, maybe you are trying to share files […]

The post How to Set Up MP3 Music Player by Sonaar in WordPress appeared first on GreenGeeks.

]]>
Sometimes you just want to be able to listen to some music straight from your WordPress website. Or, maybe you are trying to share files for others to enjoy. Either way, having an MP3 music player on your website definitely has some advantages.

Why Add an MP3 Player to Your Website?

Adding an MP3 music player to your site will allow you to listen to all of the music you want without having to go to another source. It also allows you to stream music from others, and let your site users enjoy the music you have posted while they browse your site.

Furthermore, if you have a music-related website, then you probably have the need to embed or add several different MP3 music players for varying reasons.

If you have been wondering how to add a WordPress MP3 player to your website but have not been sure where to start, then you are in the right place.

Today I am going to show you how you can use a great WordPress plugin to add an MP3 music player to your website. The process isn’t that difficult, you just need to know what to use and how to set it up.

Let’s take a look at the plugin and see what it has to offer.

MP3 Music Player by Sonaar

MP3 Music Player by Sonaar

MP3 Music Player by Sonaar is a powerful, yet lightweight audio player for WordPress. It is one of the best MP3 plugins out there, and gives you a lot of functionality and features.

Once the plugin has been installed and configured, you will have the ability to add an unlimited number of playlists to your site. You can add albums and audio tracks to any post or page using a number of different techniques.

Post your WordPress MP3 music player using the built-in Gutenberg block, the Elementor widget (for those of you that use Elementor), or by using standard shortcodes that come with the plugin.

The MP3 Music Player by Sonaar plugin is very flexible and compatible with almost every theme and plugin. It also comes with a ton of built-in features. Some of the best ones include:

  • Ability to create unlimited audio albums & playlists
  • Upload unlimited MP3 and M4A files
  • Support MP3, audio, and radio streaming
  • Embed audio players numerous ways
  • Compatible with all themes and plugins
  • Tons of color and configuration options
  • Add buy now and download now links
  • WooCommerce support
  • Google Font support
  • Real-time Dynamic Soundwave FX (Waveform by wavesurfer.js) or Synthetic Soundwave for faster loading speeds
  • Call to action buttons
  • Social Icons
  • HTML5 player that is fully responsive

Basically, the Sonaar plugin goes you all the tools you need and more to add as many MP3 music players to a site as you want.

Let’s take a look at how to get the plugin installed and configured, and then go over all the steps to get it working together.

Note: There is a pro version of this plugin. it does give you more options and functionality. However, this tutorial is based on the free version. It has all you need and more to add a music player.

1. Install and Activate the Plugin

In order to add an MP3 music player to your website, you first need to install and activate the plugin. You can do this by heading over to the Plugins page of your WordPress admin dashboard.

Once there, just search the plugin by name using the search field and install and activate it directly from there.

Install and activate MP3 music player

Now that the plugin has been installed and activated, you want to go ahead and access the main settings and configuration page. To do this, click on MP3 Player > Settings.

You will see this is now an option in the left menu area of the dashboard after you activate the plugin.

Click MP3 player then settings

This takes you to the area where you can configure the MP3 music player to your specific standards and get it set up.

2. Configure the MP3 Player

At this point, you should be looking at all the settings for the plugin. There is only one page that features a few different sections to go over and set up how you see fit.

The top of the page features the general settings for the audio player. Go ahead and select the Waveform Type you want, and enable the player on the post types of your choice.

Audio player general settings

Now scroll down a little and make all the selections you want for typography and colors. These will be font and color selections for your playlists, album titles, button colors, and other layout styles.

Typography and colors

At the very bottom, you see all the button color options, as well as the option to choose album cover image sizes. Make the selections according to what you prefer.

Button colors and album image

Click on the “Save Changes” button when you are done making selections and you are all set. You have successfully configured the Sonaar plugin.

Let’s add an MP3 music player to a page so you can see how it works.

3. Add New Playlist

In order to get an MP3 player on your site, you need to create a playlist. Again, you can put the playlist on any post or page you want, based on how you configured your setup options.

In this case, we are going to add the playlist, and then put it on a page.

Click on the “Add New Playlist” tab that is located in the left menu area. You will see it under the main MP3 Player tab.

Add new playlist

This opens up the WordPress editor, where you can add a new playlist. Go ahead and put your title and some playlist info in first.

Add playlist title and information

If you have a playlist category, or a cover image, add that in as well. You will see those selections on the right side.

PLaylist category and cover image

Now, scroll down the page some until you see the “Album Info” section. Here you can add a subtitle if needed, and then you can add the track info that is going to be included on the playlist.

Subtitle and source file options

Below that, you can enter the MP3 options, along with information on where to buy and/or download the track.

MP# music player download file options

Note: if you are adding an actual full album, then the bottom of the page has a setting asking where someone can buy the full album.

Buy full album

If you want to keep adding tracks to the playlist, then click on the “Add Another Track” button and simply repeat the process from above.

When you have entered the album info or completed entering all the tracks you want, click on the “Publish” button and that will publish the playlist and make it available to put on a post or page.

4. Add MP3 to Page or Post

Now that you have your first playlist in place, it is time to add it to the page you want. Go to the Pages section of your website.

Remember, you can add the playlist using a selection of methods. There is a built-in block for the Gutenberg editor, and Elementor widget for those of you using that page builder, or a standard shortcode.

For this example, let’s use the classic editor, as this is the simplest way to do it.

Open up the page where you want to add the playlist. On the top of the editor, you will see there is now a music icon. Go ahead and click on that.

Click on music icon

When you do this, a popup box will appear. Click on the playlist you want to insert, and fill out any other relevant info in the box. Then click on the “Insert AudioPlayer” button to attach it to the page.

Popup box info for MP3 music player

A shortcode is automatically generated and all you have to do from here is publish your page.

Once the page is published, take a look and see how your new playlist MP3 music player looks on the front end of your website.

Playlist example live

You can see ours is pretty plain. Yours will give off the look of your configuration and settings. So match it with your site colors and integrate it well.

That’s it! You can repeat this process as many times as you want.

Final Thoughts

Adding an MP3 music player to your website does not have to be a difficult task. Quite opposite actually, as you will have a lot of fun adding all the albums and tracks you want.

Now you have a good starting point and a solid plugin to use to complete this process. I hope this tutorial was able to show you how easy it really is to add an MP3 music player into your WordPress website.

Have you been using an older embed style to add different music players to your site? Did you find this plugin to be much easier to configure and use?

The post How to Set Up MP3 Music Player by Sonaar in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/mp3-music-player-sonaar-wordpress/feed/ 2
How to Add Media Library Categories in WordPress https://www.greengeeks.com/tutorials/media-library-categories-wordpress/ https://www.greengeeks.com/tutorials/media-library-categories-wordpress/#comments Thu, 18 Jun 2020 17:40:52 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=35314 If you use a lot of images on your website, you’ll understand it can be hard to browse your media library. By default, the media […]

The post How to Add Media Library Categories in WordPress appeared first on GreenGeeks.

]]>
If you use a lot of images on your website, you’ll understand it can be hard to browse your media library. By default, the media library is sorted by the newest upload first, which can make reusing images a hassle.

However, you can make it much easier by creating media library categories to help sort your images. Unfortunately, this isn’t a built-in feature of WordPress. But like most things, there is a plugin that can do this for you.

Today, I will demonstrate how to use the Media Library Categories plugin to do just that.

Why Add Media Library Categories in WordPress

When your media library gets too large, it’s like trying to find a needle in a haystack. That is unless you remember what you named the file originally.

However, by adding categories to your media library, you can easily sort your images, assuming you set the categories for every image.

Normally, when you are not sure if you uploaded an image to WordPress, you don’t think twice about re-uploading the image. However, you should reconsider not duplicating files.

Uploading duplicates of images is a big waste of space and adds to the clutter in your media library. More importantly, you have a limited amount of room for your website. If you use too much, you will have to pay for more storage in most cases.

Thus, making the most out of your space is essential.

Reusing Images

There has been somewhat of a misconception in reusing images.

It is perfectly okay with search engines if you reuse images. In fact, Google has even come out and said it is fine.

However, many website owners prefer not to reuse images because it is repetitive and some even feel it cheapens the visitor’s experience.

So, how should you approach reusing images in WordPress?

Well, it’s completely up to you. Personally, I would try to use different images whenever possible. But sometimes, the same image just works, especially if you haven’t used it in a long time. We also live in the age of memes, and reusing them is perfectly acceptable.

Installing Media Library Categories

The Media Library Categories plugin is exactly what it sounds like. It allows you to add categories to the content in the media library. The plugin allows you to use bulk action to do this, which is completely necessary if you have hundreds or thousands of images to sort.

It also allows you to create your own categories or use the ones you have already created in WordPress. Luckily, the plugin is extremely easy to use, so let’s get right into it.

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Media Library Categories in the available search box. This will pull up additional plugins that you may find helpful.

Media Library Categories

Scroll down until you find the Media Library Categories plugin and click on the “Install Now” button and activate the plugin for use.

Install-Now

Setting Up

Upon installing the plugin, you should see a message at the top of your screen. It explains that by default, the plugin uses the categories you have already created in WordPress. If this is what you’re hoping for, great. If not, don’t worry you can change this.

Simply click on the media settings link. Alternatively, you can click on Settings and select the Media option to get to the same location.

Media Settings

You should see a Media Library Categories section. In it, there is a custom taxonomy slug text box. Simply enter the category name that you wish to add.

Custom Taxonomy

There is also an autocomplete search dropdown option you may want to toggle on. When you are done, click on the “Save Changes” button.

Adding WordPress Media Library Categories

On the left-hand admin panel click on Media and select the Categories option.

Categories

Note: If you decided to not change the media setting, you will see a list of your current WordPress categories. You can skip this step if that is the case since your categories are already in place.

Enter the name, slug, and description of the category you wish to create. Click on the “Add New Category” button when you are done.

Add New Category

Repeat this step for as many categories as you need. You can view, delete, or edit all of your categories on the right-hand side. Once your categories are in place, click on the Library option.

Library

You should now be viewing all of your WordPress images. Simply select all of the images you want to add to a specific category. Once selected, click on Bulk Actions and select the Add: (Your Category) option. Click on the “Apply” button to save the changes.

Note: In my case, my category is Test. Thus, I see Add: Test.

Add Category

Repeat this for all of your images. It may take quite a bit of time if you are trying to organize a large media library into more compact categories.

You can use categories as a filter to find specific images. To do so, click on the view all categories option and select the category you want. Click on the “Filter” button to apply.

Filter

You can use the same steps to remove an image from a category by selecting the Remove: Your Category option.

Congratulations on setting up the Media Library Categories plugin. This should make finding images much easier in a larger media library.

The Name Search is Pretty Useful

By default, WordPress allows you to search for images by name. In theory, this should be enough for any web developer. However, the issue comes from strange names and how long it has been.

For example, if I named an image of a cat, dog, it isn’t very helpful. In fact, it is extremely confusing. You should try to name images better so they are more easily recognizable.

The bigger issue is if you do not remember the name, but know the image you want.

If you cannot remember the name of the image, you can actually just go to the post or page that contains the image. Right-click on the image and you will find the name or you can copy the file’s URL, which should have the filename.

However, if you don’t know the name of the image and what post it is on, you are pretty much out of luck. At this point, reuploading the image is your only option.

Also, keep in mind, you should consider cleaning your media library out. Odds are if you have deleted a page or post in the past, those images are still taking up space. This can help reduce the clutter.

Organization is Critical for Success

I can assure you that your ability to organize your content for yourself is just as important as making it easily accessible for your visitors. When you spend extra time trying to find something, you are not spending time actually creating content or getting work done.

At the end of the day, efficiency is really important.

Optimizing your work routine can end up shaving hours worth of work each week if done right. Simple things like creating templates, schedules, and categories can really make a difference.

Did you create custom categories for your images or use the WordPress ones? Do you think media library categories should be a default feature in WordPress?

The post How to Add Media Library Categories in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/media-library-categories-wordpress/feed/ 2
How to Download Free Images from Pixabay into WordPress https://www.greengeeks.com/tutorials/download-free-images-pixabay-wordpress/ https://www.greengeeks.com/tutorials/download-free-images-pixabay-wordpress/#respond Mon, 15 Jun 2020 20:46:35 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=35249 When many people think of blogs and articles online, they think about the information they are sharing or the stories they are telling. But the […]

The post How to Download Free Images from Pixabay into WordPress appeared first on GreenGeeks.

]]>
When many people think of blogs and articles online, they think about the information they are sharing or the stories they are telling. But the truth is the images they display are just as important. And you can get free images for WordPress using Pixabay.

Images are used in a variety of ways on websites. They help convey messages to users, or they help capture a user’s attention, so they click on the article in the form of a thumbnail. There’s no denying the importance of images on a website.

However, images take time to create, which is why websites rely heavily on outsourcing the images they use to royalty-free stock image sites.

Today, I will demonstrate how you can get free images from the Pixabay library to use on your WordPress website.

What is Pixabay?

Founded in 2010 in Germany, Pixabay is an international, free-to-use website for sharing photos, illustrations, vector graphics, film footage, and music. Essentially, it is a site for downloading free images. It was formed under the idea of Copyleft.

Copyleft is basically a way to offer people the right to freely distribute copies and modified versions of a piece of work with the stipulation that the same rights be preserved in derivative works created later.

Fundamentally, you can go to Pixabay and download any of the above types of files totally free. You can then use them how you want on your website. You can’t resell them for your own gain, but everything on the website is, indeed, free to use.

There are some stipulations when using certain files like video, but as long as you give attribution, you are good to go.

Pixabay has made it much easier for website owners and designers to gain access to high-quality images without having to pay an arm and a leg for them.

Why Use Pixabay in WordPress?

As we just covered, Pixabay, and other similar stock image sites, allow you to get high-quality images for free.

Normally, creating your own images can take a lot of time and money depending on how you go about it. As such, this puts smaller websites at a disadvantage because they lack the resources to produce quality images.

Stock images have changed this, and it’s not just smaller websites that use them. Everyone from large corporations to YouTube channels takes advantage of these images because they are a great resource.

Of course, this does have its own disadvantages.

You see, there are millions of stock images to choose from, but eventually, websites will choose the same ones to display, and frankly, I’m willing to bet you have seen the same stock images on websites and noticed it.

It takes away from the experience when you can recognize that the image has been used on another website, but there isn’t any way to avoid it other than creating your own images, which isn’t feasible for most website owners.

Let’s take a look at the plugin that makes this possible and then we will go over installation and use together.

How to Get Free Images from Pixabay to WordPress

The Free Assets Library plugin gives you the ability to easily download royalty-free images/photos from Pixabay, and other free stock image libraries. Normally, you would need to visit the website and download the file there, but not with this plugin.

Instead, everything is done through WordPress, which ultimately saves you time and puts the images directly into your media library for use. The plugin itself is really easy to utilize and accessible at any skill level.

There is no complicated setup or endless selection of settings to configure. So let’s get started by installing the plugin.

Step 1: Install Free Assets Library

Begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New Plugin

Search for Free Assets Library in the available search box. This will pull up additional plugins that you may find helpful.

Free Assets Library can help you get Pixabay images in WordPress

Scroll down until you find the Free Assets Library plugin and click on the “Install Now” button and activate the plugin for use.

Install Free Asset Library to get images from Pixabay into WordPress

Step 2: Search for Free Images in WordPress

Once the plugin is installed, you are ready to start searching for royalty-free images in WordPress from Pixabay. To do so, click on Media and select the Free Assets Library option.

Free Assets Library

At the top of this section, you have two options. You can search for images using the Openverse stock image library, or you can do so using Pixabay. In our case, we will be selecting Pixabay, but the process is identical, and it’s worth checking out both.

Choose the Stock Library

Once you select which library you want to search, all you really need to do is enter the keyword of the image you want.

Let’s say you want an image for jogging. Try typing “jogging” into the search field. It’s also worth considering other phrases that could produce similar results.

In this case, running, marathons, and sprinting would be some other good keywords to search for.

Search Pixabay for images for WordPress

You should avoid sentences or multiword phrases. These libraries are quite robust, but when you get too specific, you may only turn up a few results, or get results that don’t make a lot of sense.

Take a look at the images your search pulled up. On the right-hand side, there are some search filters you can configure. These include a safe search (hides explicit content), image orientation, choosing a category, or searching by primary colors.

You can use these filters to find images closer to what you are looking for.

Search Filters

Step 3: Downloading And Using Pixabay Images in WordPress

Once you find an image you want to use, hover your mouse over it. You will notice that two buttons appear on the right and left corners of the image.

In the right corner, there is the “View” button. This allows you to view the image in its original size.

In the left corner, there is a “Downloaded” button (don’t be confused by this button name, the image has not been downloaded and is just bad grammar). Click it.

Downloaded

This will initiate a quick download, where it will be added to your media library. When it is done, the button will be green with a checkmark like so:

Downloaded Complete

And that’s really all there is to it. If you go to your media library, you will see that the image is there and accessible.

You can verify that the image from Pixabay is in the WordPress media library

At this point, you can use the image however you want. Just be aware that some of the stock images you download are on the larger side. Or they can also be much smaller than anticipated.

As such you may want to consider editing in some photo editing software like Photoshop to crop it to the proper size. You might also use the WordPress image editor to make changes.

And with that, you now know how to use the Free Asset Library to add images from Pixabay into WordPress. Congratulations!

Make Your Own Thumbnails

While stock images are great for filling blog content, they are not great as thumbnails or featured images.

These are the images that are meant to capture the attention of the user. They are displayed on your homepage, and any time your articles are linked on social media sites, these images appear.

As such, showing off stock images isn’t exactly the best look for a website, thus, you should take the time to construct your own. Or at the very least, heavily modify the image to look more original.

Of course, this is a lot of work and does require a particular skill set, which is why many sites outsource this to freelancers or companies that specialize in it. This is not feasible for newer users.

That’s why it is strongly encouraged to learn about photo editing and using software like Photoshop.

This opens so many more doors and can save you a lot of money if you are talented at it.

Improve Your Site’s Image Quality with Stock Images

Having the ability to download free high-quality images is a huge deal. Not only does it make website design somewhat easier, but it also allows you to have access to files to use on posts and pages when you write.

Remember, you may see someone else using the same picture. However, that is a small price to pay in order to have access to millions of photos that are licensed to use for free.

Furthermore, you now have the ability to access all this straight from your WordPress website.

With so many websites now offering free photos and other files, it is a great idea to get on board with one and have it as a resource. The Pixabay library is vast, and being able to add those images directly to the media library is great.

I hope this tutorial showed you how easy it is to download free pictures from Pixabay into WordPress. Make sure and let me know what you think of the plugin we went over today.

How have you been finding free photos to use? Do you use a different website to access free files?

The post How to Download Free Images from Pixabay into WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/download-free-images-pixabay-wordpress/feed/ 0