CMS Controlled Hero Slider, with Advanced Custom Fields Plugin

There has been many a time that I have needed the the ability to have animated and non-animated hero slider on multiple pages, so I have come up with a solution to this using only one block of code and a dynamic approach to the Hero:

Article Overview:

Use jQuery to animate hero slider.
Enable the use of static and animated hero slider.
Enable CMS control of hero slider via the Advanced Custom Fields Plugin and add on.

Plugins Used:

AFC – Advanced custom Fields ( advanced-custom-fields )
AFC – Gallery ( acf-gallery )
CarouFredSel jQuery Plugin (It’s free) ( jquery.carouFredSel-6.2.1-packed )

Adding the fields to the CMS

Using AFC (advanced Custom Fields) to provide dynamic functionality on the page, create a new AFC Field Group called “Hero Options”, then add the following custom fields:

show_hero
with a field type of “Select” and the choices of: None : None
Static : Static
Sliding : Sliding
static_hero_image
with a field type of “image” with a return value of “Image ID”. Also Set the conditional value according to the “show_hero” field to static.
hero_gallery
with a field type of “gallery”. Also Set the conditional value according to the “show_hero” field to sliding.

Static Hero HTML

<section id="non-js-hero" class="white-section" role="banner">
 <article>
  <figure>
   <?php echo wp_get_attachment_image( get_field('static_hero_image') , $image_template ); ?>
  </figure>
 </article>
</section>

Animated Hero HTML

As the gallery field of the ACF plugin returns an array of image objects, we can use a simple foreach loop to iterate through the slides. To display the image / slide we will use the native WordPress function “wp_get_attachment_image( $attachment_id, $size, $icon, $attr )” (see: http://codex.wordpress.org/Function_Reference/wp_get_attachment_image ) supplying the function with the id of the attachment / image / slide, as seen below:

<section class="js-hero" role="banner">
 <article>
  <div id="hero-slides">
   <a id="navprev" class="heronav" href="#"></a>
   <div id="hero-paginate"></div>
   <div class="stdslides">
    <?php foreach( get_field('hero_gallery') AS $hero): ?>
     <div>
      <figure>
        <?php echo wp_get_attachment_image( $hero['id'] , $image_template, FALSE , array('alt'=>$hero['alt']) ); ?>
      </figure>
     </div>
    <?php endforeach;?>
   </div>
   <a id="navnext" class="heronav" href="#"></a>
  </div>
 </article>
</section>

Determine What Hero to display

With out teaching you to suck eggs, place the two HTML blocks in a conditional if statement like so…

<?php 
if( get_field('show_hero') != 'none' ): 
 if( get_field('show_hero') == 'static' ): 
 ?>
 <section id="non-js-hero" class="white-section" role="banner">
  <article>
   <figure>
    <?php echo wp_get_attachment_image( get_field('static_hero_image') , $image_template ); ?>
   </figure>
  </article>
 </section>

<?php else: ?>
 <section class="js-hero" role="banner">
  <article>
   <div id="hero-slides">
    <a id="navprev" class="heronav" href="#"></a>
    <div id="hero-paginate"></div>
    <div class="stdslides">
    <?php foreach( get_field('hero_gallery') AS $hero): ?>
     <div>
      <figure>
         <?php echo wp_get_attachment_image( $hero['id'] , $image_template, FALSE , array('alt'=>$hero['alt']) ); ?>
       </figure>
      </div>
     <?php endforeach;?>
    </div>
    <a id="navnext" class="heronav" href="#"></a>
   </div>
  </article>
 </section>

 <?php 
 endif;
endif; 
?>

jQuery Code:

Remember to call the plugin into your page as well as the latest version of jQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel.js" type="text/javascript"></script>

Add the following to your JavaScript file:

$(document).ready(function() {

	$(".js-hero").carouFredSel({
		auto: false,
                circular: false,
                infinite: false,
                prev: '.prev',
                next: '.next',
                scroll: 1,
                items: {
                        width: 262,
                        height: 145,
                        visible: {
                                min: 1,
                                max: 8
                        }
                }					
	});

});

ACF XML Inport Code

I have attached the XML import code, paste into a blank XML file save then use to import the data into AFC.

<?xml version="1.0" encoding="UTF-8" ?>
<!-- This is a WordPress eXtended RSS file generated by WordPress as an export of your site. -->
<!-- It contains information about your site's posts, pages, comments, categories, and other content. -->
<!-- You may use this file to transfer that content from one site to another. -->
<!-- This file is not intended to serve as a complete backup of your site. -->

<!-- To import this information into a WordPress site follow these steps: -->
<!-- 1. Log in to that site as an administrator. -->
<!-- 2. Go to Tools: Import in the WordPress admin panel. -->
<!-- 3. Install the "WordPress" importer from the list. -->
<!-- 4. Activate & Run Importer. -->
<!-- 5. Upload this file using the form provided on that page. -->
<!-- 6. You will first be asked to map the authors in this export file to users -->
<!--    on the site. For each author, you may choose to map to an -->
<!--    existing user on the site or to create a new user. -->
<!-- 7. WordPress will then import each of the posts, pages, comments, categories, etc. -->
<!--    contained in this file into your site. -->

<!-- generator="WordPress/3.5.2" created="2013-07-22 10:15" -->
<rss version="2.0"
	xmlns:excerpt="http://wordpress.org/export/1.1/excerpt/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:wp="http://wordpress.org/export/1.1/"
>

<channel>
	<title>Skymark</title>
	<link>http://yourwebsiteurl.com</link>
	<description>Wordpress Description</description>
	<pubDate>Mon, 22 Jul 2013 10:15:29 +0000</pubDate>
	<language></language>
	<wp:wxr_version>1.1</wp:wxr_version>
	<wp:base_site_url>http://yourwebsiteurl.com</wp:base_site_url>
	<wp:base_blog_url>http://yourwebsiteurl.com</wp:base_blog_url>
	<wp:author><wp:author_id>1</wp:author_id><wp:author_login>admin</wp:author_login><wp:author_email>[email protected]</wp:author_email><wp:author_display_name><![CDATA[admin]]></wp:author_display_name><wp:author_first_name><![CDATA[]]></wp:author_first_name><wp:author_last_name><![CDATA[]]></wp:author_last_name></wp:author>
	<item>
		<title>Hero Options</title>
		<link>http://yourwebsiteurl.com/?acf=acf_hero-options</link>
		<pubDate>Wed, 01 May 2013 15:16:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		<guid isPermaLink="false">http://yourwebsiteurl.com/?post_type=acf&p=258</guid>
		<wp:post_id>258</wp:post_id>
		<wp:post_date>2013-05-01 15:16:43</wp:post_date>
		<wp:post_date_gmt>2013-05-01 15:16:43</wp:post_date_gmt>
		<wp:comment_status>closed</wp:comment_status>
		<wp:ping_status>closed</wp:ping_status>
		<wp:post_name>acf_hero-options</wp:post_name>
		<wp:status>publish</wp:status>
		<wp:post_parent>0</wp:post_parent>
		<wp:menu_order>0</wp:menu_order>
		<wp:post_type>acf</wp:post_type>
		<wp:post_password></wp:post_password>
		<wp:postmeta>
			<wp:meta_key>_edit_last</wp:meta_key>
			<wp:meta_value><![CDATA[1]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>field_518130aecca61</wp:meta_key>
			<wp:meta_value><![CDATA[a:12:{s:3:"key";s:19:"field_518130aecca61";s:5:"label";s:12:"Display Hero";s:4:"name";s:9:"show_hero";s:4:"type";s:6:"select";s:12:"instructions";s:70:"Displays a static Image or animated slide show at the top of the page:";s:8:"required";s:1:"0";s:7:"choices";a:3:{s:4:"None";s:4:"None";s:6:"Static";s:6:"Static";s:7:"Sliding";s:7:"Sliding";}s:13:"default_value";s:4:"None";s:10:"allow_null";s:1:"0";s:8:"multiple";s:1:"0";s:17:"conditional_logic";a:3:{s:6:"status";s:1:"0";s:5:"rules";a:1:{i:0;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:4:"None";}}s:8:"allorany";s:3:"all";}s:8:"order_no";i:0;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>field_5181312dcca62</wp:meta_key>
			<wp:meta_value><![CDATA[a:11:{s:3:"key";s:19:"field_5181312dcca62";s:5:"label";s:10:"Hero Image";s:4:"name";s:17:"static_hero_image";s:4:"type";s:5:"image";s:12:"instructions";s:81:"Upload or select an Image from the media library to place at the top of the page:";s:8:"required";s:1:"0";s:11:"save_format";s:2:"id";s:12:"preview_size";s:9:"thumbnail";s:7:"library";s:3:"all";s:17:"conditional_logic";a:3:{s:6:"status";s:1:"1";s:5:"rules";a:1:{i:0;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:6:"Static";}}s:8:"allorany";s:3:"all";}s:8:"order_no";i:1;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>field_5181317dcca63</wp:meta_key>
			<wp:meta_value><![CDATA[a:9:{s:3:"key";s:19:"field_5181317dcca63";s:5:"label";s:12:"Hero Gallery";s:4:"name";s:12:"hero_gallery";s:4:"type";s:7:"gallery";s:12:"instructions";s:90:"Select a number of images to place in a animated slide show (Hero) at the top of the page:";s:8:"required";s:1:"0";s:12:"preview_size";s:9:"thumbnail";s:17:"conditional_logic";a:3:{s:6:"status";s:1:"1";s:5:"rules";a:1:{i:0;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:7:"Sliding";}}s:8:"allorany";s:3:"all";}s:8:"order_no";i:2;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>position</wp:meta_key>
			<wp:meta_value><![CDATA[side]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>layout</wp:meta_key>
			<wp:meta_value><![CDATA[default]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>hide_on_screen</wp:meta_key>
			<wp:meta_value><![CDATA[a:1:{i:0;s:11:"the_content";}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>field_5190e126ae823</wp:meta_key>
			<wp:meta_value><![CDATA[a:12:{s:3:"key";s:19:"field_5190e126ae823";s:5:"label";s:13:"Crop Position";s:4:"name";s:13:"crop_position";s:4:"type";s:6:"select";s:12:"instructions";s:58:"This enables you to select where the hero cropping starts:";s:8:"required";s:1:"0";s:7:"choices";a:3:{s:3:"top";s:3:"top";s:6:"center";s:6:"center";s:6:"bottom";s:6:"bottom";}s:13:"default_value";s:6:"center";s:10:"allow_null";s:1:"0";s:8:"multiple";s:1:"0";s:17:"conditional_logic";a:3:{s:6:"status";s:1:"1";s:5:"rules";a:2:{i:0;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:6:"Static";}i:1;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:7:"Sliding";}}s:8:"allorany";s:3:"any";}s:8:"order_no";i:4;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>field_5190f2884a43a</wp:meta_key>
			<wp:meta_value><![CDATA[a:9:{s:3:"key";s:19:"field_5190f2884a43a";s:5:"label";s:21:"Crop Position Message";s:4:"name";s:0:"";s:4:"type";s:7:"message";s:12:"instructions";s:0:"";s:8:"required";s:1:"0";s:7:"message";s:173:"<b>What is "Crop Position"</b>: If the image crop cuts off an important part of the image you can select a different position to make sure that the image displays correctly.";s:17:"conditional_logic";a:3:{s:6:"status";s:1:"0";s:5:"rules";a:1:{i:0;a:3:{s:5:"field";s:19:"field_518130aecca61";s:8:"operator";s:2:"==";s:5:"value";s:4:"None";}}s:8:"allorany";s:3:"all";}s:8:"order_no";i:3;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:13:"page_template";s:8:"operator";s:2:"==";s:5:"value";s:17:"template-page.php";s:8:"order_no";i:0;s:8:"group_no";i:0;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:9:"post_type";s:8:"operator";s:2:"==";s:5:"value";s:10:"anm_market";s:8:"order_no";i:0;s:8:"group_no";i:1;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:9:"post_type";s:8:"operator";s:2:"==";s:5:"value";s:11:"anm_product";s:8:"order_no";i:0;s:8:"group_no";i:2;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:9:"post_type";s:8:"operator";s:2:"==";s:5:"value";s:14:"anm_technology";s:8:"order_no";i:0;s:8:"group_no";i:3;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:11:"ef_taxonomy";s:8:"operator";s:2:"==";s:5:"value";s:3:"all";s:8:"order_no";i:0;s:8:"group_no";i:4;}]]></wp:meta_value>
		</wp:postmeta>
		<wp:postmeta>
			<wp:meta_key>rule</wp:meta_key>
			<wp:meta_value><![CDATA[a:5:{s:5:"param";s:13:"page_template";s:8:"operator";s:2:"==";s:5:"value";s:28:"template-dynamic-landing.php";s:8:"order_no";i:0;s:8:"group_no";i:5;}]]></wp:meta_value>
		</wp:postmeta>
	</item>
</channel>
</rss>

CMS Controlled Hero Slider, with Advanced Custom Fields Plugin

Article Overview:

Plugins Used:

Adding the fields to the CMS

Static Hero HTML

Animated Hero HTML

Determine What Hero to display

jQuery Code:

ACF XML Inport Code

Leave a comment Cancel reply