Add Flickr Image Slider or Album Gallery in WordPress with Responsive Slider

Add Flickr Image Slider or Album Gallery in WordPress with Responsive Slider

Flickr, a popular image hosting platform is used by many people to archive their photography work on cloud. If you are having Flickr account with lot many images and also have a blog or site on WordPress, you can easily showcase your Flickr images on blog using a nice, modern, stylish and responsive Flickr Image WordPress Slider.

In this example, I will show you how to add Flickr Image gallery in WordPress using Foto Slider WordPress plugin from SliderVilla. There are 19+ WordPress Sliders available on SliderVilla and you can add Flickr Image Gallery using any of these slider designs. All the sliders are having integration with Flickr API and can be used very easily.

How to Create Flickr Image Slider with Auto Fetched Images

  • Install and Activate Foto Slider WordPress plugin.
  • Get Flickr API Key and Enter the key in “Global Settings” page under Foto Slider Menu. API Key is required to auto fetch the data from your Flickr Account.
  • Click on the “Create New Slider” and select “Flickr Slider” from the list of slider options

foto_flickr_slider

  • In Foto Slider, you have option to auto fetch the recent Flickr images by following options
    1. Recent from an Album
    2. Recently uploaded by User

foto_flickr_slider_2

  • For example, to create a Flickr Album Slider, enter the Album ID of the Album from where you want to fetch the image. e.g. To create a slider of “50 Most Popular” by Nicholas Hendrickx, here is the step to follow
    1. Out of the Album URL “https://www.flickr.com/photos/ukaaa/sets/72157600233851176/”, copy the last numeric part i.e. “72157600233851176“. This is the Album ID that you need to use to create an Album Slider. You can get Album ID of any Flickr Album using this method.
    2. Paste the Album ID on the Next Screen of the “Create Flickr Slider” panel
  • Now select the skin from “Light” and “Dark” as per your choice

foto_flickr_slider_3

  • Select the layout of the Foto Slider
  • Now you will see the preview of Foto Slider with Images from Flickr Album “50 Most Popular“. On this Easy Builder page, you can copy the shortcode or template tag to paste and ad the Flickr Slider anywhere on your WordPress site.

foto_flickr_slider_4

  • On Easy Builder page of Foto Slider, you can change the typography, animation, transition speed, title text etc. without writing any piece of code.

Similarly, if you want Foto Slider with Flickr Images uploaded by a particular “User”, select “User” option on the 2’nd screen of the “Create New Slider” panel. Enter the User ID and the slider will auto fetch the images uploaded by a particular user.

Is Foto Slider only option for Flickr Image Slider?

These options are available in All 19+ WordPress Sliders on SliderVilla. Same Easy Builder modified with the options related to each slider will allow you to make changes in the slider using easy to use panel.

Create and embed Flickr Image Album Slider or User Gallery in WordPress using any of our Responsive WordPress Sliders.

How to Embed WooCommerce Product Slider on Single Product and Cart Pages

Sliders are very effective on eCommerce websites in terms of improving visitor’s engagement and for providing more information. One can easily create product slider with SliderVilla WordPress Slider plugins using WooCommerce data. The slider plugins are having deep integration with WooCommerce and that’s why in just few clicks and less than 3 minutes, following type of product sliders can be created.

  • Featured Products Slider
  • Recent Products Slider
  • Up-sell Products Slider
  • Cross-sell Products Slider
  • External Products Slider
  • Group Products Slider

Up-sell and Cross-sell products slider placement is helpful either on single product page or cart page. It is obvious that if you embed these sliders properly, you will see more conversion, sale and revenue.

Embed Product Slider on WooCommerce Cart Page

To embed a slider on existing WordPress theme, there are few ways e.g. Widget, Shortcode and Template Tag. Widget allows you to place the slider in widget ready areas. Some themes have sidebar or special widget for cart pages. If you are using a page builder like Visual Composer or Divi Builder or Beaver Builder, you can embed widgets inside pages too. With widget, you can not place the slider at non-widget ready areas without coding skills. Shortcodes are for the placement of sliders inside post or page content. Even if you are having any custom post types, you can place the slider inside the content area of those posts.

With Template Tag, you can embed the product slider anywhere on your site. Once you create a product slider with any SliderVilla WordPress Slider plugin, you get all embed options i.e. Template Tag, Widget and Shortcode. Copy the template tag and paste it in theme file where you want the slider.

To place the slider on cart page, you can use shortcode method. When you activate WooCommerce plugin, it auto creates a page for Cart or you can create a page and put the WooCommerce Cart Shortcode [woocommerce_cart] in the content. Now you need to locate that page on WooCommerce ==> Settings ==> Checkout Options panel. Now below the Cart shortcode, you can place the product slider shortcode to make it appear below the cart. Here is a demo showing product slider below the cart page.

In this example, I embedded a product slider created with Roster Slider WordPress Plugin of SliderVilla and pasted the shortcode [rosterslider id=’6′] to embed the same. You can choose from all responsive slider designs of SliderVilla and get a product slider on Cart page using same method.

Embed SliderVilla Product Slider on Single Product Page

WooCommerce comes with its own layout for the single product pages. You need to call action hooks and filters to place the product slider at specific location. You can use Template Tag method to embed the slider. For example, to place the slider below description, use the following piece of code in your active theme’s functions.php:

//@hooked mycode_add_roster_slider - 10 
add_action('woocommerce_after_single_product', 'mycode_add_roster_slider', 10);
//Function to display Roster Slider below the single WooCommerce product 
function mycode_add_roster_slider(){
         if ( function_exists( "get_roster_slider" ) ) 
{ get_roster_slider($slider_id="3"); }
}

Put the slider ID generated by SliderVilla Slider installed on your dashboard.

You can hook the ‘mycode_add_roster_slider’ function to other hooks depending upon where to show the slider as follows:

1. To show slider before product details on single product page:

add_action('woocommerce_before_single_product', 'mycode_add_roster_slider', 10);

 

2. To show the slider after the content on Single Product page as well as on the shop page/products archive page

add_action('woocommerce_after_main_content', 'mycode_add_roster_slider', 10);

 

3. To show the slider only after shop/product archives page, once all the products are displayed:

add_action('woocommerce_after_shop_loop', 'mycode_add_roster_slider', 10);

All SliderVilla WordPress Slider Plugins are compatible with WooCommerce and capable of creating all kind of product sliders. Browse the sliders and pick as per your choice or get the complete package.

You can place any of our SliderVilla Sliders with any kind of data i.e. either product slider or featured slider or category slider or video slider anywhere on your store. It is as easy as a piece of cake! Write us in case you have any queries on what options are available or if you need a particular kind of slider embedded at a particular location.

Create Events Carousel with The Events Calendar WordPress Plugin Data

The Events Calendar is a popular WordPress Plugin to create, manage and showcase events on WordPress sites. With more than 400,000 activate installs, it is being used by many WordPress site owners. Showing upcoming events on homepage or above the fold helps in getting noticed. Carousels are one of the most prefered way to increase user engagement on the homepage and if it can be done with these events, that will be very effective. Many people are still having a thought that carousels slow down a website or may have negative SEO impact, if you think so, please read this well written article on Why you should use a carousel.

Most of the e-commerce websites or Events Websites use carousels on their homepage or even in sidebars to make the page more engaging. Also the motive is to provide more information about the events happening in near future. Now if you want to show The Events Calendar data in the form of a carousel, it is very easy to do with SliderVilla WordPress Sliders.

Showcase Events in Carousels using SliderVilla Sliders

All SliderVilla Sliders are 100% compatible with The Events Calendar and Events Manager WordPress Plugin.

Browse Slider

What Type of Events Sliders are Possible?

SliderVilla Sliders use The Events Calendar API to auto fetch following types of data,

  • Future Events
  • Past Events
  • Recent Events

So based on these auto fetched data, you can embed these 3 types of slider by just pasting a shortcode. And apart from these, if you want to create an event slider with few selected events, that is also possible by manually adding those events to the slider.

How to Create Events Slider? Any Example.

One can add events slider using any SliderVilla Slider, but here I am taking an example of Roster Slider to showcase what options you get and how to create events slider using the data from The Events Calendar plugin. Here is the demo of Events Slider created with Roster.

Step 1 – Create New Slider

Once you install and activate Roster Slider, you get a dedicated panel on dashboard with Roster Slider options. Click on Create New to get started. First screen will show all the possible sliders using Roster Slider plugin. Here you have to select “Event Calendar” from the Events option. Note that, Event Calendar option only appear if The Events Calendar plugin is active on your dashboard.

Step 2 – Choose Events Calendar Type

Roster Slider auto fetches data from The Events Calendar as well as Events Manager WordPress Plugins. Here you get an option to choose whether you want Future Events Slider, Past Events SLider or Recent Events Slider. Once selected and slider name entered, Roster will ask to choose from the preset designs or skins. Once you select these, the slider will start appearing under “Preview” panel on the Easy Builder page of Roster.

Step 3 – Embed Events Slider

Like other SliderVilla Sliders, Roster Slider comes with following embed options,

  • Shortcode – To embed inside posts, pages using editor
  • Template Tag – Embed anywhere on website by putting the PHP template tag inside the theme files
  • Widget – Drag and Drop Roster Slider Simple widget and select the slider name to embed inside the widget ready areas such as sidebar, footer etc.

Conclusion

Popular events websites are utilising the positive sides of carousels such as boost user engagement, save space, showcase more content, grab attention etc. Go ahead and embed Events Slider on your existing website and start showcasing the events inside a slider in no time. SliderVilla Slider plugins works great on almost all WordPress themes – free and premium.

Think Sliders. Think SliderVilla.

19+ Premium and Free sliders to create WooCommerce Product Slider, Events Slider, WordPress Category/Tag/Post Slider, Social Media Slider and many more.

Get Started
Easy to Add Full width Auto Adjusted WordPress Slider

Easy to Add Full width Auto Adjusted WordPress Slider

Gone are the days you will rely on such Plugins that do not offer you full width auto adjusted images. Good content and images will help the visitors to understand your product in the better way. Representation of the content on your website is the best way to boast the features that you offer. You cannot provide only the desktop view for your website. Allow the customers to explore your website any where any time with all the devices. The only way to achieve this is to provide with the best Full Width Auto Adjusted Slider.

Reasons Why People avoided Full width slider earlier:

There were various misconceptions and Carousels myths that people followed. Some of the main reasons that refrain them from having a full width slider is as stated below:

Not Responsive: The main reason that pulled people back to have such full width WordPress Plugin is that they were in a believe that such plugins are not responsive with all the devices.

Images without effects: They were unsure if it will provide with good effects for the images and text, that will look good for their website.

High Bandwidth: One of the important reason people avoided such full width WordPress Plugins for their website is due to bandwidth. Bandwidth is nothing but the data speed supported by network connection.

Difficulty in Implementation: They were not sure of the ways in which it could be easily implemented on the front end with the control over all the settings.

Time has changed now and there are so many Sliders available that will guarantee you with great features. Bandwidth will hardly be an issue with any of the Sliders now. Among so many Sliders available one of the best Full Screen Elegant Slider WordPress Plugin is Cosmo Slider.

Is Cosmo Slider for me?

Whenever you need an image or video at the background with a full screen slider and a call to action button, the best choice you can make for your website is to go with the Cosmo Slider.

Key Features offered by Cosmo Slider:

  • Integration with WordPress CMS:

Cosmo Slider offers a deep integration with WordPress CMS to fetch and to add custom post type, category specific slides, latest posts, images from media library and videos.

  • Easy to display on the Front end:

It is very easy to implement it on the front end through shortcodes, template tags and widgets. Even a person with non technical knowledge will find it very easy to implement.

  • Parallax Scroll Effect:

It provides with the Parallax Scroll effect for the images so that the text and the large size images look good on the website. Due to this, the content of the website will be displayed in the better way to attract more visitors.

  • Highly Responsive:

It is easily accessible from all the devices thus providing with a highly responsive design. It has the capability to adjusts with the width of the devices and thus making it mobile friendly.

  • Call to Action Button:

All the words and imagery can be combined into a centralized location using the call to action button. One can also add internal and external link for call button and convert the traffic into action.

  • Command over all the Settings:

There are about 50 settings options that are available in order to customize the look of the sliders on the front end. One can easily make changes for the desired settings.

  • SEO optimized:

All the slides are easily indexed by Google and the other search engines and thus making the slider as SEO optimized.

  • Easy CSS customization:

If there are certain changes or the customization that are to be done for the CSS then there is no need to edit the theme’s CSS files, it provides with a special CSS box in order to add extra lines for the CSS. So a person without the knowledge of CSS can also make the changes easily.

Considering with the best Full Screen Auto adjusted Cosmo slider with these additional feature is like a bonus! Getting all these features under a single roof with a reasonable price that will fit your pockets is really commendable.

Download Cosmo Slider Now

How to Add Premium WordPress Sliders using Page Builder

How to Add Premium WordPress Sliders using Page Builder

Slider is the most engaging element of any Website. When these sliders are combined with page builder the level of its usage takes one more step towards flexibility. If you are using Page builders such as Visual Composer, Divi Builder, SiteOrigin page builder or any other builders, this tutorial will help you add SliderVilla carousels using those builders. For a slider to be used in page builder is expected to have the ability to generate shortcodes & provide widgets. These shortcodes then can be used to place in to page using page builder text editor widget. We can also directly use widgets of slider into page builder.

Here we will see how to add premium WordPress Sliders using a page builder. In this, we have used Premium Akkord Slider with SiteOrigin page builder.

NOTE: This will be in reference to the Akkord Slider, steps are same for other sliders in SliderVilla.

Step 1) Download the zip file of Akkord Slider and add it to the plugins folder of your theme. Go to dashboard,

Installed Plugins >> Akkord Slider >> Activate

Step 2) Download the zip file of SiteOrigin page builder and add it to the plugins folder of your theme. Go to dashboard and activate the plugin.

Step 3) Now go to,

Admin Panel >> Akkord Slider >> Create New

Select one from the multiple slider types and keep following the steps and instructions given in the slider to create an amazing Akkord Slider.

Step 4) Then create a page on which you want to show the slider. Go to,

Admin Panel >> Pages >> Add New

As you have activated the Page builder plugin you will see a page builder tab appearing on editor. Click on it.

page builder tab

1. Add a Slider using Shortcode:

First we will add shortcode to display slider on front end. As all the SliderVilla Sliders generate shortcode for each slider you create, you can easily embed them in editor. We assume you have already created a slider so now click on “Add Row” and then click on “Add Widget”. Select default Text widget of WordPress. Edit this widget and add title and required content. In this content area add your shortcode generated by slider. Update the page and check front view of this page. Final look of slider-

Final slider with shortcode

2. Add a Slider using widget:

We assume you have already created a slider so now click on “add row” and then click on “add widget”. You will see 3 widgets of Akkord slider appearing over there as shown in image below:

Slider widgets in page builder

Now depending upon your choice select whether you want to display a category slider, a recent posts slider or a simple image slider.

After selecting any widget fill title field and slider & settings.

widget

Click on done, update the page and check your slider on the front end. Final look of slider-

Final slider with widget

Following these few simple steps will let you build an awesome page with appropriate slider appearing in it.

P.S. All WordPress sliders of SliderVilla comes with shortcode and widget options. It means if you are using Page builders such as SiteOrigin Page Builder, Divi Page Builder, Visual Composer or any other builders, you can easily add SliderVilla sliders inside the pages.

How to Create Tag Archive Slider in WordPress

How to Create Tag Archive Slider in WordPress

wordpress-tags

There are times when you want to add the Sliders in WordPress site based on certain taxonomies. Taxonomies is the way to group the things together. The best grouping mechanism for categories and tags is through taxonomies. All WordPress sliders of SliderVilla supports to add Tag Archive Sliders very easily.

Simple Steps to add Tag Archive Slider in WordPress:

NOTE: This will be in reference to the Pointelle Slider, steps are same for other sliders in SliderVilla

 Step 1] In order to use the Pointelle Slider to add the tag archive slider, one needs to download the zip file and add it to the plugin folders.

Admin Panel >> Installed Plugins >> Pointelle Slider >> Activate

Ones the plugin is activated you will find the Pointelle Slider option in the admin panel and also the related settings can be done from here.

Step 2] Now go to,

Admin Panel >> Pointelle Slider >> Create New >> WordPress Core Section >> Taxonomy Slider

(The Slider type can be selected accordingly)

taxonomy

After the Taxonomy Slider is selected fill in the details for it:

taxonomy-fields

Fields of the Taxonomy Slider 

One can select different taxonomy from the drop down such as category, post_tag or the post_format. The terms will be displayed depending upon the taxonomy that is selected.

Step 3] Select the Skin and Layout for the Slider. An Easy Builder will appear where one can change all the settings related to the particular slider.

Following the three simple steps  one is able to add tag archive slider with the WordPress website. All the sliders of SliderVilla is compatible with adding tag archive slider in WordPress which makes it easy to select different categories, tags and post formats.