Web programming Tutorial

How to Create Custom Taxonomies in WordPress

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px;">Many people think of WordPress as a blogging tool, mainly because it has posts, categories, tags, etc. What most people don’t know is that all posts, categories, tags, can be replaced by </span>custom post types<span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px;"> and custom taxonomies. In this article we will show you how to create custom taxonomies in WordPress as well as how to display custom taxonomies in your WordPress theme.</span><br />
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
What is a Taxonomy?</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Taxonomy in WordPress is one of those things that everyone use, but they do not know that they are using it. Derived from the biological classification method<a href="http://en.wikipedia.org/wiki/Linnaean_taxonomy" rel="nofollow" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="Linnaean Taxonomy">Linnaean taxonomy</a>, WordPress taxonomies are used as a way to group posts and custom post types together. WordPress has two very popular taxonomies that people use on a regular basis: Categories and Tags (Read: <a href="http://www.wpbeginner.com/beginners-guide/categories-vs-tags-seo-best-practices-which-one-is-better/" style="color: #ea6a1b; text-decoration: none;" title="Categories vs. Tags: Best Practices">Categories vs. Tags: Best Practices</a>). You can use custom taxonomies to create custom groups and bring them under one umbrella. For example, you have a custom post type called Books. Even though you can use categories, you may not want to mix the two because they are used differently. You can register a new custom taxonomy called Topics. You can add topic terms like: Adventure, Romance, Non-Fiction, etc. This would allow you and your users to sort your books by each topic. Taxonomies can also be hierarchical meaning that you can have main topics like: Fiction, Non-Fiction, and Children. Then have subtopics under each category for example fiction would have thrillers as a sub-topic.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Now that you know what is a custom taxonomy, let’s learn how to create custom taxonomies in WordPress. We will use two methods to create custom taxonomies. Method 1 would utilize a plugin for those who choose not to deal with code. Method 2 on the other hand would be the code method for those who prefer to do everything without a plugin.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Creating Custom Taxonomies – The Easier Way</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Let’s start creating a custom taxonomy. First, you need to install and activate <a href="http://wordpress.org/extend/plugins/simple-taxonomy/" rel="nofollow" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="Simple Taxonomy Plugin">Simple Taxonomy</a> WordPress plugin. Go to <strong>Settings » Custom Taxonomies </strong>to create a new taxonomy:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74nWU1mRbRYkZq68ZxEu3QeOntZU9oLZ14d8nVqzBnxim-jYY8x0AM0v0ciLmtU-Ky1zgNDcE84T3aHuJgDATgO8Ifk3OM49szP_boNRnOub_buTe9VB7hD1e6UOtaI2i0oLpPFIJbIjY/s1600/create-taxnomy-screen.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg74nWU1mRbRYkZq68ZxEu3QeOntZU9oLZ14d8nVqzBnxim-jYY8x0AM0v0ciLmtU-Ky1zgNDcE84T3aHuJgDATgO8Ifk3OM49szP_boNRnOub_buTe9VB7hD1e6UOtaI2i0oLpPFIJbIjY/s320/create-taxnomy-screen.jpeg" width="320" /></a></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
The first part of creating a custom taxonomy is giving it a name, which needs to be all lowercase and no weird characters. The second option is whether or not this taxonomy will be hierarchical. If you want to create a taxonomy like categories where you can add a parent and child term then choose True, other wise choose false if you want terms to be added like tags.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Third option is to associate this taxonomy with a post type and last option is whether or not you want to add terms automatically, choose none.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
But we are not done yet. Lets assume that you are creating a taxonomy and calling it Topics. Now you need to tell WordPress how it should translate user interface for the topics.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhPn_I7L6mlZvQLnFs1AsLCmaSvXI85-BLJAdoZf-XZ_jJYFwbu1fzcPDAkILPv6X0swRe-bmpBPpAbetaEu693S2Fu3oM3zwF0B7CVZGkmFHZRDS8MQaUeBnDUAYu_-rDaoz_DOPqwfm/s1600/translate-taxonomy.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhPn_I7L6mlZvQLnFs1AsLCmaSvXI85-BLJAdoZf-XZ_jJYFwbu1fzcPDAkILPv6X0swRe-bmpBPpAbetaEu693S2Fu3oM3zwF0B7CVZGkmFHZRDS8MQaUeBnDUAYu_-rDaoz_DOPqwfm/s320/translate-taxonomy.jpeg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px; text-align: start;">After providing translations for the UI, press the Add Taxonomy button. Once a custom taxonomy is created, it will appear under Posts and will have a similar interface like Categories or Tags. Also the custom taxonomy field will also appear in post edit area.</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFEvcH_tgVD73ymDYspQpnsXAhxobRJ5lg3P5LvL-ApK8sW-aJ0wopY84N7SZrQCoeNCnRByHMnqGnssPkKYCS0PDqRYX7K-pcY3t6H5cG6nMKPC1f8Uo3EjV5WUSR06bpGIGQ1aWfw4Q/s1600/custom-taxonomy-post-edit.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFEvcH_tgVD73ymDYspQpnsXAhxobRJ5lg3P5LvL-ApK8sW-aJ0wopY84N7SZrQCoeNCnRByHMnqGnssPkKYCS0PDqRYX7K-pcY3t6H5cG6nMKPC1f8Uo3EjV5WUSR06bpGIGQ1aWfw4Q/s1600/custom-taxonomy-post-edit.jpeg" /></a></div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Manually Creating Custom Taxonomies</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Add the following code in your theme’s <code>functions.php</code> file or in a <strong><a href="http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/" style="color: #ea6a1b; text-decoration: none;" title="Site Specific Plugin">site-specific plugin</a> (recommended)</strong> to create a hierarchical custom taxonomy like categories:</div>
<pre><span style="color: red;">//hook into the init action and call create_book_taxonomies when it fires
add_action( 'init', 'create_topics_hierarchical_taxonomy', 0 );

//create a custom taxonomy name it topics for your posts

function create_topics_hierarchical_taxonomy() {

// Add new taxonomy, make it hierarchical like categories
//first do the translations part for GUI

$labels = array(
    'name' => _x( 'Topics', 'taxonomy general name' ),
    'singular_name' => _x( 'Topic', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Topics' ),
    'all_items' => __( 'All Topics' ),
    'parent_item' => __( 'Parent Topic' ),
    'parent_item_colon' => __( 'Parent Topic:' ),
    'edit_item' => __( 'Edit Topic' ), 
    'update_item' => __( 'Update Topic' ),
    'add_new_item' => __( 'Add New Topic' ),
    'new_item_name' => __( 'New Topic Name' ),
    'menu_name' => __( 'Topics' ),
  );

// Now register the taxonomy

register_taxonomy('topics',array('post'), array(
    'hierarchical' => true,
    'labels' => $labels,
    'show_ui' => true,
    'show_admin_column' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'topic' ),
  ));

}</span></pre>
<div class="separator" style="clear: both; text-align: center;">
<span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px; text-align: start;"><br /></span></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
To create a non-hierarchical custom taxonomy like Tags, add this code in your theme’s <code>functions.php</code> or in a <a href="http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/" style="color: #ea6a1b; text-decoration: none;" title="Site Specific Plugin">site-specific plugin</a>:</div>
<pre><span style="color: red;">//hook into the init action and call create_topics_nonhierarchical_taxonomy when it fires

add_action( 'init', 'create_topics_nonhierarchical_taxonomy', 0 );

function create_topics_nonhierarchical_taxonomy() {

// Labels part for the GUI

$labels = array(
    'name' => _x( 'Topics', 'taxonomy general name' ),
    'singular_name' => _x( 'Topic', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Topics' ),
    'popular_items' => __( 'Popular Topics' ),
    'all_items' => __( 'All Topics' ),
    'parent_item' => null,
    'parent_item_colon' => null,
    'edit_item' => __( 'Edit Topic' ), 
    'update_item' => __( 'Update Topic' ),
    'add_new_item' => __( 'Add New Topic' ),
    'new_item_name' => __( 'New Topic Name' ),
    'separate_items_with_commas' => __( 'Separate topics with commas' ),
    'add_or_remove_items' => __( 'Add or remove topics' ),
    'choose_from_most_used' => __( 'Choose from the most used topics' ),
    'menu_name' => __( 'Topics' ),
  );

// Now register the non-hierarchical taxonomy like tag

register_taxonomy('topics','post',array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'show_admin_column' => true,
    'update_count_callback' => '_update_post_term_count',
    'query_var' => true,
    'rewrite' => array( 'slug' => 'topic' ),
  ));
}
</span></pre>
<div>
<br /></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Notice the difference between two codes. Value for hierarchical argument is true for category-like taxonomy and false for tags-like taxonomies. Also in the labels array for non-hierarchical tags-like taxonomy, we have added null for parent_item and parent_item_colon arguments which means that nothing will be shown in the UI to create parent item.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Displaying Custom Taxonomies</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Here is how you can display the terms you added to a custom taxonomy on your single post page. Add this single line of code in your <code>single.php</code> file within the loop:</div>
<pre><span style="color: red;"><?php the_terms( $post->ID, 'topics', 'Topics: ', ', ', ' ' ); ?></span></pre>
<pre><span style="color: red;">
</span></pre>
<pre><div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
You can add it in other files as well such as archive.php, index.php, and anywhere else you want to display the taxonomy.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
By default your custom taxonomies use the <code>archive.php</code> template to display posts. However, you can create a custom archive display for them by creating <code>taxonomy-{taxonomy-slug}.php</code>.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
Custom taxonomies can be used in many ways. Combine them with <a href="http://www.wpbeginner.com/wp-tutorials/how-to-use-custom-post-types/" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="How to use Custom Post Types in WordPress">custom post types</a> and <a href="http://www.wpbeginner.com/wp-tutorials/how-to-add-custom-meta-boxes-in-wordpress-posts-and-post-types/" style="color: #ea6a1b; text-decoration: none;" title="How to Add Custom Meta Boxes in WordPress Posts and Pages">custom meta boxes</a>, and you can create highly customized content management system (CMS) built to meet your needs. Let us know how you are using custom taxonomies on your websites?</div>
</pre>
</div>

How to Create Custom Taxonomies in WordPress

Many people think of WordPress as a blogging tool, mainly because it has posts, categories, tags, etc. What most people don’t know is that all posts, categories, tags, can be replaced by custom post types and custom taxonomies. In this article we will show you how to create custom taxonomies in Wor…

12Jul2016

How to Create Custom Post Types in WordPress

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px;">Often people mistakenly classify WordPress as just a blogging platform. Over the past years, WordPress has evolved into a robust content management system. By default WordPress comes with post and pages as the main content types. However you can create as many custom content types as you like, and these custom content types are referred to as </span><strong style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px;">Custom Post Types</strong><span style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 28px;">. In this article, we will show you how to create custom post types in WordPress. We will also show you how to use them like a pro.</span><br />
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
What is Custom Post Type in WordPress?</h4>
<div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Custom post types are content types like posts and pages. Since WordPress evolved from a simple blogging platform into a robust CMS, the term post stuck to it. However, a post type can be any kind of content. By default, WordPress comes with these post types:</div>
<ul style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 21px; margin: 0px; padding: 0px 0px 15px;">
<li style="list-style-type: square; margin: 0px 0px 15px 20px;">Post</li>
<li style="list-style-type: square; margin: 0px 0px 15px 20px;">Page</li>
<li style="list-style-type: square; margin: 0px 0px 15px 20px;">Attachment</li>
<li style="list-style-type: square; margin: 0px 0px 15px 20px;">Revision</li>
<li style="list-style-type: square; margin: 0px 0px 15px 20px;">Nav Menu</li>
</ul>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
You can create your own custom post types and call them whatever you want. For example if you run a movie review website, then you would probably want to create a movie reviews post type. This post type can have different custom fields and even its own custom category structure. Other examples of post types are: Portfolio, Testimonials, Products, etc.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
<strong>When doi I need a custom post type?</strong></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Check out our article about <a href="http://www.wpbeginner.com/beginners-guide/when-do-you-need-a-custom-post-type-or-taxonomy-in-wordpress/" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="When Do You Need Custom Post Types and Taxonomies in WordPress">when do you really need custom post types or taxonomies in WordPress</a>.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Also take a look at WPBeginner’s <a href="http://www.wpbeginner.com/deals/" style="color: #ea6a1b; text-decoration: none;" title="WPBeginner Deals">Deals</a> and <a href="http://www.wpbeginner.com/glossary/" style="color: #ea6a1b; text-decoration: none;" title="WPBeginner WordPress Glossary">Glossary</a> sections. These are custom post types that we created to keep them separate from our regular articles.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
You will also notice that we are using custom taxonomies for them instead of categories or tags.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Creating a Custom Post Type – The Easy Way</h4>
</div>
<div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
The easiest way to create a custom post type in WordPress is by using a plugin. This method is recommended for beginner because it is safe and super easy.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
First thing you need to do is install and activate the <a href="https://wordpress.org/plugins/custom-post-type-ui/" rel="nofollow" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="Custom Post Type UI">Custom Post Type UI</a> plugin. Upon activation, the plugin will add a new menu item in your WordPress admin menu called <em>CPT UI</em>.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Now go to <strong>CPT UI » Add New</strong> to create a new custom post type.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjfdRleTu4XZDhrn2wE5dU88HdYBycRXodVtPDbDLGI4VsUacfaN3TyJke5Zdo9FS23L8zoZ9b_3VWSuRiCQWT6YFWi4kV9vUyuAdjSIke9I-VK5KcNDVIzr_KRACvH9pnuJqwF6IyWbdk/s1600/cpt-ui.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjfdRleTu4XZDhrn2wE5dU88HdYBycRXodVtPDbDLGI4VsUacfaN3TyJke5Zdo9FS23L8zoZ9b_3VWSuRiCQWT6YFWi4kV9vUyuAdjSIke9I-VK5KcNDVIzr_KRACvH9pnuJqwF6IyWbdk/s320/cpt-ui.png" width="320" /></a></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
This is why the Add new custom post type page is divided into two columns. On your left, you have the form you need to fill to create your custom post type. On your right, you have a form to create a custom taxonomy if you need one.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
In the custom post type column, first you need to provide a name for your custom post type. This name cannot exceed more than 20 characters, e.g. movies, recipe, deal, glossary, etc.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHr3CcOVvFkgx4BDAFlPjVQMiWmS0pasd6Ab5qX_ci3Jlis-unXTJ2rAA30Fp-bSShH-J477zj7lcUOg7uBWe4JgAzjhW1VGsiWvbLLQQ1fFVRvx0EX66rJZUxDvrmjPY-Rp233EWM6z2/s1600/new-cpt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHr3CcOVvFkgx4BDAFlPjVQMiWmS0pasd6Ab5qX_ci3Jlis-unXTJ2rAA30Fp-bSShH-J477zj7lcUOg7uBWe4JgAzjhW1VGsiWvbLLQQ1fFVRvx0EX66rJZUxDvrmjPY-Rp233EWM6z2/s320/new-cpt.png" width="320" /></a></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
In the next field, you need to provide a label for your custom post type. This label will appear in your WordPress admin bar just like posts and pages. It also needs to be plural to make sense. e.g. Movies, Recipes, Deals, Glossary, etc.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
After that you need to provide a singular form for your label. This singular form will be used by WordPress to show instructions and other user interface elements.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Lastly enter a description for your custom post type. This description is simply used to describe what your post type does.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Now you can click on the ‘Create Custom Post Type’ button to add your new custom post type. That’s all.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
You can also click on the Advanced Label Options and Advanced Options links to customize more options for your custom post type.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Creating a Custom Post Type Manually</h4>
<div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
The problem with using a plugin is that your custom post types will disappear when the plugin is deactivated. Any data you have in those custom post types will still be there, but your custom post type will be unregistered and will not be accessible from the <a href="http://www.wpbeginner.com/glossary/admin-area/" style="color: #ea6a1b; text-decoration: none;" title="What is Admin Area in WordPress?">admin area</a>.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
If you are working on a client site and do not want to install another plugin, then you can manually create your custom post type by adding the required code in your theme’s <a href="http://www.wpbeginner.com/glossary/functions-php/" style="color: #ea6a1b; text-decoration: none;" title="What is functions.php File in WordPress?">functions.php</a> file or in a <a href="http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/" style="color: #ea6a1b; text-decoration: none;" title="How to Create a Site Specific WordPress Plugin">site-specific plugin</a> (See: <a href="http://www.wpbeginner.com/opinion/wordpress-custom-post-types-debate-functions-php-or-plugins/" style="color: #ea6a1b; text-decoration: none;" title="Custom Post Type Debate - Functions.php or Plugins">Custom Post Types Debate functions.php or Plugin</a>).</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
First we will show you a quick and fully working example so that you understand how it works. Take a look at this code:</div>
<pre><span style="color: red; font-family: Courier New, Courier, monospace;">// Our custom post type function
function create_posttype() {

register_post_type( 'movies',
 // CPT Options
  array(
   'labels' => array(
    'name' => __( 'Movies' ),
    'singular_name' => __( 'Movie' )
   ),
   'public' => true,
   'has_archive' => true,
   'rewrite' => array('slug' => 'movies'),
  )
 );
}
// Hooking up our function to theme setup
add_action( 'init', 'create_posttype' );</span></pre>
<pre><span style="font-family: Courier New, Courier, monospace;">
</span></pre>
<pre><div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
What this code does is that it registers a post type <code>'movies'</code> with an array of arguments. These arguments are the options of our custom post type. This array has two parts, the first part is labels, which itself is an array. The second part contains other arguments like public visibility, has archive, and slug that will be used in URLs for this post type.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
Now lets take a look at a detailed piece of code that adds more options to your custom post type.</div>
<pre><span style="color: red;">/*
* Creating a function to create our CPT
*/

function custom_post_type() {

// Set UI labels for Custom Post Type
 $labels = array(
  'name'                => _x( 'Movies', 'Post Type General Name', 'twentythirteen' ),
  'singular_name'       => _x( 'Movie', 'Post Type Singular Name', 'twentythirteen' ),
  'menu_name'           => __( 'Movies', 'twentythirteen' ),
  'parent_item_colon'   => __( 'Parent Movie', 'twentythirteen' ),
  'all_items'           => __( 'All Movies', 'twentythirteen' ),
  'view_item'           => __( 'View Movie', 'twentythirteen' ),
  'add_new_item'        => __( 'Add New Movie', 'twentythirteen' ),
  'add_new'             => __( 'Add New', 'twentythirteen' ),
  'edit_item'           => __( 'Edit Movie', 'twentythirteen' ),
  'update_item'         => __( 'Update Movie', 'twentythirteen' ),
  'search_items'        => __( 'Search Movie', 'twentythirteen' ),
  'not_found'           => __( 'Not Found', 'twentythirteen' ),
  'not_found_in_trash'  => __( 'Not found in Trash', 'twentythirteen' ),
 );
 
// Set other options for Custom Post Type
 
 $args = array(
  'label'               => __( 'movies', 'twentythirteen' ),
  'description'         => __( 'Movie news and reviews', 'twentythirteen' ),
  'labels'              => $labels,
  // Features this CPT supports in Post Editor
  'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
  // You can associate this CPT with a taxonomy or custom taxonomy. 
  'taxonomies'          => array( 'genres' ),
  /* A hierarchical CPT is like Pages and can have
  * Parent and child items. A non-hierarchical CPT
  * is like Posts.
  */ 
  'hierarchical'        => false,
  'public'              => true,
  'show_ui'             => true,
  'show_in_menu'        => true,
  'show_in_nav_menus'   => true,
  'show_in_admin_bar'   => true,
  'menu_position'       => 5,
  'can_export'          => true,
  'has_archive'         => true,
  'exclude_from_search' => false,
  'publicly_queryable'  => true,
  'capability_type'     => 'page',
 );
 
 // Registering your Custom Post Type
 register_post_type( 'movies', $args );

}

/* Hook into the 'init' action so that the function
* Containing our post type registration is not 
* unnecessarily executed. 
*/

add_action( 'init', 'custom_post_type', 0 );</span></pre>
</pre>
</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
As you can see, we have added many more options to the custom post type with his code. It will add more features like support for revisions, featured image, custom fields, etc.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
We have also associated this custom post type with a custom taxonomy called genres. Also notice the part where we have set the hierarchical value to be false. If you would like your custom post type to behave like Pages, then you can set this value to true.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Also notice repeated usage of twentythirteen, this is called text domain. If your theme is <a href="http://www.wpbeginner.com/wp-themes/find-translate-translation-ready-wordpress-theme/" style="color: #ea6a1b; text-decoration: none;" title="How to Find and Translate a Translation Ready WordPress Theme">translation ready</a> and you want your custom post types to be translated, then you will need to mention text domain used by your theme. You can find your theme’s text domain inside <code>style.css</code> file in your theme directory. Text domain will be mentioned in the header of the file.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Displaying Custom Post Types on Your Site</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
WordPress comes with built in support for displaying your custom post types. Once you have added a few items into your new custom post type, it is time to display them on your website.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
There are a couple of methods that you can use, each one has its own benefits.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Displaying Custom Post Type Using Default Archive Template</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
First you can simply go to <strong>Appearance » Menus</strong> and add a custom link to your menu. This custom link is the link to your custom post type. If you are using <a href="http://www.wpbeginner.com/wp-tutorials/seo-friendly-url-structure-for-wordpress/" style="color: #ea6a1b; text-decoration: none;" title="SEO Friendly URL Structure for WordPress">SEO friendly permalinks</a> then your CPT’s URL will most likely be something like this:</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
<code>http://example.com/movies</code></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
If you are not using SEO friendly <a href="http://www.wpbeginner.com/glossary/permalinks/" style="color: #ea6a1b; text-decoration: none;" title="What is a Permalink?">permalinks</a>, then your custom post type URL will be something like this:</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
<code>http://example.com/?post_type=movies</code></div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Replace example.com with your own domain name and movies with your custom post type name. Save your menu and then visit the front-end of your website. You will see the new menu you added, and when you click on it, it will display your custom post type archive page using the archive.php template file in your theme.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Using Custom Templates for CPT Archives and Single Entries</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
If you don’t like the appearance of the archive page for your custom post type, then you can use dedicated <a href="http://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-post-types-archive-page-in-wordpress/" style="color: #ea6a1b; text-decoration: none;" title="How to Create a Custom Post Type Archive Page in WordPress">template for custom post type archive</a>. To do that all you need to do is create a new file in your theme directory and name it <code>archive-movies.php</code>. Replace movies with the name of your custom post type.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
For geting started, you can copy the contents of your theme’s <code>archive.php</code> file into<code>archive-movies.php</code> template and then start modifying it to meet your needs. Now whenever the archive page for your custom post type is accessed, this template will be used to display it.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Similarly, you can also create a custom template for your post type’s single entry display. To do that you need to create <code>single-movies.php</code> in your theme directory. Don’t forget to replace movies with the name of your custom post type.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
You can get started by copying the contents of your theme’s <code>single.php</code> template into <code>single-movies.php</code> template and then start modifying it to meet your needs.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Displaying Custom Post Types on The Front Page</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
One advantage of using custom post types is that it keeps your custom content types away from your regular posts. However, if you would like them to display among your regular post, then you can do so by adding this code into your theme’s functions.php file or a site-specific plugin:</div>
<pre><span style="color: red;">add_action( 'pre_get_posts', 'add_my_post_types_to_query' );

function add_my_post_types_to_query( $query ) {
 if ( is_home() && $query->is_main_query() )
  $query->set( 'post_type', array( 'post', 'movies' ) );
 return $query;
}</span></pre>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
Don’t forget to replace <code>movies</code> with your custom post type.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px;">
Querying Custom Post Types</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
If you are familiar with the coding and would like to run loop queries in your templates, then here is how to do that (Related: <a href="http://www.wpbeginner.com/glossary/loop/" style="color: #ea6a1b; text-decoration: none;" title="What is a Loop in WordPress?">What is a Loop?</a>).</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px;">
By querying the database, you can retrieve items from a custom post type.</div>
<pre><span style="color: red;"><?php 
$args = array( 'post_type' => 'movies', 'posts_per_page' => 10 );
$the_query = new WP_Query( $args ); 
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="entry-content">
<?php the_content(); ?> 
</div>
<?php wp_reset_postdata(); ?>
<?php else:  ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?></span></pre>
<pre><span style="color: red;">
</span></pre>
<pre><div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
In this code, first we have defined the post type and posts per page in the arguments for our new WP_Query class. After that we ran our query, retrieved the posts and displayed them inside the loop.</div>
<h4 style="background-color: white; color: #ff6200; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; margin: 0px 0px 15px; padding: 0px; white-space: normal;">
Displaying Custom Post Types in Widgets</h4>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
You will notice that there is a default <a href="http://www.wpbeginner.com/glossary/widgets/" style="color: #ea6a1b; text-decoration: none;" title="What is a WordPress widget?">widget</a> in WordPress to display recent posts. But this widget does not allow you to choose a custom post type. What if you wanted to display latest entries from your newly created post type in a widget? There is an easy way to do this.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
First thing you need to do is install and activate the <a href="http://wordpress.org/plugins/ultimate-posts-widget/" rel="nofollow" style="color: #ea6a1b; text-decoration: none;" target="_blank" title="Ultimate Posts Widget">Ultimate Posts Widget</a> plugin. Upon activation, simply go to <strong>Appearance » Widgets</strong> and drag and drop the Ultimate Posts widget to a sidebar.</div>
<div style="background-color: white; color: #464646; font-family: Lora, serif; font-size: 14px; line-height: 2em; padding: 0px 0px 15px; white-space: normal;">
This powerful widget will allow you to show recent posts from any post types. You can also display post excerpt with a read more link or even show a featured image next to post title. Configure the widget by selecting the options you want and by selecting your custom post type. After that save your changes and see the widget in action on your website.</div>
</pre>
</div>
</div>

How to Create Custom Post Types in WordPress

Often people mistakenly classify WordPress as just a blogging platform. Over the past years, WordPress has evolved into a robust content management system. By default WordPress comes with post and pages as the main content types. However you can create as many custom content types as you like, and …

12Jul2016

Get the client IP address using PHP

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; border: 0px; clear: both; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
The simplest way to get the visitor’s/client’s <a href="http://en.wikipedia.org/wiki/IP_address" style="border: 0px; color: #0c65a5; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none;">IP address</a> is using the <code style="background-color: #eeeeee; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; margin: 0px; padding: 1px 5px; white-space: pre-wrap;">$_SERVER['REMOTE_ADDR']</code> or <code style="background-color: #eeeeee; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; margin: 0px; padding: 1px 5px; white-space: pre-wrap;">$_SERVER['REMOTE_HOST']</code> variables.</div>
<div style="background-color: white; border: 0px; clear: both; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
However, sometimes this does not return the correct IP address of the visitor, so we can use some other server variables to get the IP address.</div>
<div style="background-color: white; border: 0px; clear: both; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
The below both functions are equivalent with the difference only in how and from where the values are retrieved.</div>
<div style="background-color: white; border: 0px; clear: both; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
getenv() is used to get the value of an environment variable in PHP.</div>
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; margin: 0px; padding: 0px; white-space: inherit;"><span class="com" style="border: 0px; color: grey; margin: 0px; padding: 0px;">// Function to get the client IP address</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
</span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">function</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> get_client_ip</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">()</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">{</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">''</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_CLIENT_IP'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_CLIENT_IP'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
       $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'REMOTE_ADDR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">))</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> getenv</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'REMOTE_ADDR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">);</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'UNKNOWN'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">return</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $ipaddress</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">}</span></code></pre>
<div style="background-color: white; border: 0px; clear: both; color: #222222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
$_SERVER is an array that contains server variables created by the web server.</div>
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; color: #393318; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; font-size: 13px; margin-bottom: 1em; max-height: 600px; overflow: auto; padding: 5px; width: auto; word-wrap: normal;"><code style="border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif; margin: 0px; padding: 0px; white-space: inherit;"><span class="com" style="border: 0px; color: grey; margin: 0px; padding: 0px;">// Function to get the client IP address</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
</span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">function</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> get_client_ip</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">()</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">{</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">''</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_CLIENT_IP'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_CLIENT_IP'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_X_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED_FOR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'HTTP_FORWARDED'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">if</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">(</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">$_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'REMOTE_ADDR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">])</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $_SERVER</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">[</span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'REMOTE_ADDR'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">];</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">else</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
        $ipaddress </span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">=</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> </span><span class="str" style="border: 0px; color: maroon; margin: 0px; padding: 0px;">'UNKNOWN'</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
    </span><span class="kwd" style="border: 0px; color: darkblue; margin: 0px; padding: 0px;">return</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;"> $ipaddress</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">;</span><span class="pln" style="border: 0px; color: black; margin: 0px; padding: 0px;">
</span><span class="pun" style="border: 0px; color: black; margin: 0px; padding: 0px;">}</span></code></pre>
</div>

Get the client IP address using PHP

The simplest way to get the visitor’s/client’s IP address is using the $_SERVER['REMOTE_ADDR'] or $_SERVER['REMOTE_HOST'] variables. However, sometimes this does not return the correct IP address of the visitor, so we can use some other server variables to get the IP address. The below both functio…

17Jan2015

Adding and Removing Images with the WordPress Media Uploader

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-body__series-navigation" style="background: rgb(245, 247, 248); box-sizing: border-box; color: #2a3744; font-family: Arial, sans-serif; font-size: 14px; line-height: 26px; margin: 0px 0px 26px; padding: 20px;">
<div class="post-body__series-navigation-description" style="box-sizing: border-box;">
This post is part of a series called <a href="http://code.tutsplus.com/series/getting-started-with-the-wordpress-media-uploader--cms-666" sl-processed="1" style="border: none; box-sizing: border-box; color: #136fd2; outline: none; text-decoration: none;">Getting Started with the WordPress Media Uploader</a>.</div>
<div class="post-body__series-navigation-item" style="box-sizing: border-box; margin-top: 10px;">
<a class="post-body__series-navigation-previous-link" href="http://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011" sl-processed="1" style="border: none; box-sizing: border-box; color: #136fd2; outline: none; text-decoration: none;">Getting Started with the WordPress Media Uploader</a></div>
<div class="post-body__series-navigation-item" style="box-sizing: border-box; margin-top: 10px;">
<a class="post-body__series-navigation-next-link" href="http://code.tutsplus.com/tutorials/saving-images-with-the-wordpress-media-uploader--cms-22152" sl-processed="1" style="border: none; box-sizing: border-box; color: #136fd2; outline: none; text-decoration: none;">Saving Images with the WordPress Media Uploader</a></div>
</div>
<div class="post-body__body" style="background-color: #fefefe; box-sizing: border-box; color: #2a3744; font-family: Arial, sans-serif; font-size: 16px; line-height: 26px;">
<div class="post-body__content" style="box-sizing: border-box; color: #4b4b4b; line-height: 1.6em; margin: 0px 0px 40px;">
<div style="box-sizing: border-box; margin-bottom: 26px; padding-top: 0px;">
<a href="http://code.tutsplus.com/tutorials/getting-started-with-the-wordpress-media-uploader--cms-22011" rel="external" sl-processed="1" style="border: none; box-sizing: border-box; color: #136fd2; outline: none; text-decoration: none;" target="_blank">In the previous post in this series</a>, we started working with the latest iteration of the WordPress Media Uploader in order to get a clearer understanding of how to begin to incorporate it into our projects.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
The tough part of working with this new (well, new since 3.5) feature is that it's not as well documented as other features. This obviously leaves a lot of developers - especially beginners - scratching their heads with how to get started with it. Couple that with a complete overhaul of the underlying system, and you have a lot to cover.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Based on the feedback from the first article, we're going to look at expanding the scope of this series a little bit more. In this article, we're going to look at practically applying the functionality that we introduced in the last article. Then, in a follow-up article (or perhaps more than one follow-up article) we'll look at some more of the finer points of how the Media Uploader works.</div>
<h2 class="nolinks" style="box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 26px; line-height: 1.2em; margin: 26px 0px;">
Picking Up Where We Left Off</h2>
<div style="box-sizing: border-box; margin-bottom: 26px;">
In the last post, we started working on a plugin that introduced a "Featured Footer Image" to the bottom of each post, if an image is selected. This meta box is available on both post and page post types.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Up to this point, we've successfully added the meta box, launched the WordPress Media Uploader and selected an image to use as our featured image, but we haven't actually done anything with the information that is returned to us from the Media Uploader.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
In this post, we're going to continue with implementing the functionality so that we feature images at the bottom of our posts. After that, we'll turn our attention to some more of the technical details of the APIs that are available to us.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
To pick up right where we left off, we need to be able to replicate the functionality that the standard "Featured Image" meta box offers. In order to do this:</div>
<ol style="box-sizing: border-box;">
<li style="box-sizing: border-box;">We need to capture information from the Media Uploader</li>
<li style="box-sizing: border-box;">Display the image that's selected</li>
<li style="box-sizing: border-box;">Properly size the image that's selected</li>
<li style="box-sizing: border-box;">Setup an option to remove the image</li>
</ol>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Clearly, we have our work cut out for us.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Before we do <i style="box-sizing: border-box;">anything</i>, make sure that you update the renderMediaUploader function to accept $ as a parameter so that we can use jQuery throughout our examples.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
The function declaration should look like this:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_85986" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">renderMediaUploader( $ ) { ... }</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
And the call to the function should now look like this:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_220351" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">renderMediaUploader( $ );</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Now, let's get started.</div>
<h3 class="nolinks" style="box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 21px; line-height: 1.2em; margin: 26px 0px 4px;">
1. Capture the Image</h3>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Once you've selected an image from the Media Uploader, data will be returned to you in JavaScript. Specifically, the data will be returned to us in JSON. This will allow us to parse out various properties of the image so that we can render and save it along with our post.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
But first, let's update our code. Find the line of code in <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">admin.js</code> that looks like this:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_240410" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
7</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">file_frame.on( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'insert'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">() {</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/**</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">     </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* We'll cover this in the next version.</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">     </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*/</code></div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code> </div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
And replace it with this:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_931230" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">file_frame.on( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'insert'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">() {</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Read the JSON data returned from the Media Uploader</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">json = file_frame.state().get( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'selection'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).first().toJSON();</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Obviously, this is nothing terribly complicated; however, remember to add <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">json</code> as a variable defined at the top of the file along with <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">file_frame</code> and <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">image_data</code>.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
If you're curious about what's returned, feel free to dump the contents of <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">json</code> out into your favorite console debugger. We won't be doing that in this particular article, but we will may be doing more of that in future, in-depth articles.</div>
<h3 class="nolinks" style="box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 21px; line-height: 1.2em; margin: 26px 0px 4px;">
2. Display Selected Image</h3>
<div style="box-sizing: border-box; margin-bottom: 26px;">
In order for us to display the image that's selected, we need to make sure that we have an image element in our meta box that's accessible via JavaScript so that we can update its attributes whenever an image is selected.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
In <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">views/admin.php</code>, let's add the following code to our template. This is contains the empty image element that we'll use to render the image.</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords html" id="highlighter_407927" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 828px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
7</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 798px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">p</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">class</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"hide-if-no-js"</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">a</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">title</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"Set Footer Image"</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">href</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"javascript:;"</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">id</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"set-footer-thumbnail"</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">>Set featured image</</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">a</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">p</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">div</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">id</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"featured-footer-image-container"</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">class</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"hidden"</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">img</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">src</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">""</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">alt</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">""</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">title</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">""</code> <code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/></code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">div</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code><code class="html comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Note that we're taking advantage of the WordPress CSS class <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">hidden</code> to hide the container.  Using JavaScript, we'll remove this class in order to display the image (and will basically do the opposite to hide the image and display the anchor for selecting an image again).</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Now, we can revisit the JavaScript and render the image whenever it has been selected. We need to do two things:</div>
<ol style="box-sizing: border-box;">
<li style="box-sizing: border-box;">Hide the anchor for allowing the user to select the image</li>
<li style="box-sizing: border-box;">Display the featured image in the container</li>
</ol>
<div style="box-sizing: border-box; margin-bottom: 26px;">
To do this, let's revisit the JavaScript code that we looked at earlier in the article. After we've retrieved the JSON data, let's make sure that we have a URL of an image and then we'll proceed.</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_57695" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 690px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
01</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
02</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
03</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
04</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
05</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
06</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
07</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
08</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
09</div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
10</div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
11</div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
12</div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
13</div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
14</div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
15</div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
16</div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
17</div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
18</div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
19</div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
20</div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
21</div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
22</div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
23</div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
24</div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
25</div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
26</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 652px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">file_frame.on( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'insert'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">() {</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Read the JSON data returned from the Media Uploader</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">json = file_frame.state().get( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'selection'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).first().toJSON();</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// First, make sure that we have the URL of an image to display</code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">if</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">( 0 > $.trim( json.url.length ) ) {</code></div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">return</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// After that, set the properties of the image and display it</code></div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'#featured-footer-image-container'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">)</code></div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.children( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'img'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">)</code></div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">            </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.attr( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'src'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, json.url )</code></div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">            </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.attr( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'alt'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, json.caption )</code></div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">            </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.attr( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'title'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, json.title )</code></div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">                        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.show()</code></div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.parent()</code></div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.removeClass( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'hidden'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Next, hide the anchor responsible for allowing the user to select an image</code></div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'#featured-footer-image-container'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">)</code></div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.prev()</code></div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.hide();</code></div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Clearly, the code is commented to explain what's going on, but we're relying on jQuery quite a bit in order to make sure that we're properly showing and hiding elements.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
First, we're checking the URL property of <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">json</code> to make sure its length is greater than zero. I like to use <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">$.trim</code> in order to do this as a defensive coding practice. If it is equal to zero, then we'll return because we have no image to display.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
After that, we take advantage of the new <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">div</code> element that we created in the previous step. We grab the image element via the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">children()</code> function and then we set its <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">src</code>, <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">alt</code>, and <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">title</code> attributes all based on properties that are accessible via the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">json</code> object.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
From there, we select the parent container of the image and then we remove the hidden class.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
After all, we use the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">featured-footer-image-container</code> element as a point from which we can access the anchor - in this case, it's the previous element - and then we hide it.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
At this point, the image should appear in the post meta box.</div>
<figure class="post_image" style="box-sizing: border-box; margin: 30px 0px; max-width: 100%; padding: 0px;"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/34/posts/22087/image/featured-thumb-image.png" style="box-sizing: border-box; height: auto; margin: 1px; max-width: 100%; outline: rgb(211, 211, 211) solid 1px;" /></figure><div style="box-sizing: border-box; margin-bottom: 26px;">
But we have one obvious problem: The image is far too big for the container. This means that we need to introduce a bit of CSS.</div>
<h3 class="nolinks" style="box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 21px; line-height: 1.2em; margin: 26px 0px 4px;">
3. Styling Our Featured Image</h3>
<div style="box-sizing: border-box; margin-bottom: 26px;">
To do this, we're going to need to add a CSS file and update the core plugin file so that it enqueues the stylesheet.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
First, create a <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">css</code> directory in your plugin's folder, then add <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">admin.css</code> to the directory. In that file, add the following code:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords css" id="highlighter_346740" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css value" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 153, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">#fea</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">tured-footer-image-container img {</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="css keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">width</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">:  </code><code class="css value" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 153, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">100%</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="css keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">height</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">: </code><code class="css value" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 153, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">auto</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Then add the following hook in the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">run()</code> function of your plugin:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords php" id="highlighter_730486" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 613px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 583px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">add_action( </code><code class="php string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'admin_enqueue_scripts'</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="php keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">array</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">( </code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="php string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'enqueue_styles'</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">) );</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Finally, add the following function:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords css" id="highlighter_230961" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
01</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
02</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
03</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
04</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
05</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
06</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
07</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
08</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
09</div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
10</div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
11</div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
12</div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
13</div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
14</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 562px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/**</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="css comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* Registers the stylesheets for handling the meta box</code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="css comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="css comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* @since 0.2.0</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="css comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*/</code></div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">public function enqueue_styles() {</code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">wp_enqueue_style(</code></div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this->name,</code></div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">plugin_dir_url( __FILE__ ) . </code><code class="css string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'css/admin.css'</code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">,</code></div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">array()</code></div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="css plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Permitting you've properly setup your selectors and you've properly registered and enqueued your style sheet, you should see something like this:</div>
<figure class="post_image" style="box-sizing: border-box; margin: 30px 0px; max-width: 100%; padding: 0px;"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/34/posts/22087/image/featured-thumb-sized.png" style="box-sizing: border-box; height: auto; margin: 1px; max-width: 100%; outline: rgb(211, 211, 211) solid 1px;" /></figure><div style="box-sizing: border-box; margin-bottom: 26px;">
Much better, isn't it? </div>
<h3 class="nolinks" style="box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 21px; line-height: 1.2em; margin: 26px 0px 4px;">
4. How Do We Remove the Image?</h3>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Just as we added an element to display the image, we need add an element that will allow us to remove the image as well.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
To do that, revisit <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">views/admin.php</code> and add the following code:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords html" id="highlighter_481515" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 898px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 868px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">p</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">class</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"hide-if-no-js hidden"</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">a</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">title</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"Remove Footer Image"</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">href</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"javascript:;"</code> <code class="html color1" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">id</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">=</code><code class="html string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"remove-footer-thumbnail"</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">>Remove featured image</</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">a</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></</code><code class="html keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">p</code><code class="html plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">></code><code class="html comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Next, we need to write some additional JavaScript so that when the image is displayed, the above anchor is displayed. To accomplish that, revisit the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">admin.js</code>and let's add this below the code we've added earlier in the article:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_629893" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Display the anchor for the removing the featured image</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'#featured-footer-image-container'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">)</code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.next()</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.show();</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
And just as we did with the initial anchor, we need to setup an event handler so that when the "remove" anchor is clicked, the image will be removed and the "Set Featured Image" anchor will be restored.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
To do that, first revisit the function that's fired as soon as the DOM is loaded and add the following code:</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_982887" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 600px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
1</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
2</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
3</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
4</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
5</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
6</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
7</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
8</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
9</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 570px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'#remove-footer-thumbnail'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">).on( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'click'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">, </code><code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">( evt ) {</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code> </div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Stop the anchor's default behavior</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">evt.preventDefault();</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Remove the image, toggle the anchors</code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">resetUploadForm( $ );</code></div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code> </div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">});</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
Now we need to define the <code class="inline" style="background: rgb(245, 247, 248); border-radius: 3px; border: 1px solid rgb(228, 228, 228); box-sizing: border-box; font-family: 'Source Code Pro', Monaco, monospace; font-size: 14px; padding: 4px 4px 1px;">resetUploadForm</code> function, so let's do that now. Remember that this needs to remove the image, hide the "remove link" container, and restore the "set image" link anchor.</div>
<div style="box-sizing: border-box;">
<div class="syntaxhighlighter noskimlinks noskimwords javascript" id="highlighter_335255" style="background-color: rgb(245, 247, 248) !important; box-sizing: border-box; font-size: 1em !important; margin: 1em 0px !important; overflow: auto !important; position: relative !important; width: 600px;">
<table border="0" cellpadding="0" cellspacing="0" style="background: none !important; border-collapse: collapse; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-size: 14px !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 613px;"><tbody style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<tr style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><td class="gutter" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(175, 175, 175) !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
01</div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
02</div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
03</div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
04</div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
05</div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
06</div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
07</div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
08</div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
09</div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
10</div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
11</div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
12</div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
13</div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
14</div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
15</div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
16</div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
17</div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
18</div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
19</div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
20</div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
21</div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
22</div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
23</div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
24</div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
25</div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
26</div>
<div class="line number27 index26 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
27</div>
<div class="line number28 index27 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
28</div>
<div class="line number29 index28 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
29</div>
<div class="line number30 index29 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border-right-color: rgb(228, 228, 228) !important; border-right-style: solid !important; border-width: 0px 1px 0px 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 0.5em 0px 1em !important; position: static !important; right: auto !important; text-align: right !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
30</div>
</td><td class="code" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: 575px;"><div class="container" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: relative !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">
<div class="line number1 index0 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">/**</code></div>
<div class="line number2 index1 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* Callback function for the 'click' event of the 'Remove Footer Image'</code></div>
<div class="line number3 index2 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* anchor in its meta box.</code></div>
<div class="line number4 index3 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*</code></div>
<div class="line number5 index4 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* Resets the meta box by hiding the image and by hiding the 'Remove</code></div>
<div class="line number6 index5 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* Footer Image' container.</code></div>
<div class="line number7 index6 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*</code></div>
<div class="line number8 index7 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* @param    object    $    A reference to the jQuery object</code></div>
<div class="line number9 index8 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">* @since    0.2.0</code></div>
<div class="line number10 index9 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">*/</code></div>
<div class="line number11 index10 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; font-weight: bold !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">function</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">resetUploadForm( $ ) {</code></div>
<div class="line number12 index11 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'use strict'</code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">;</code></div>
<div class="line number13 index12 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number14 index13 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// First, we'll hide the image</code></div>
<div class="line number15 index14 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( '</code><code class="javascript preprocessor" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">#featured-footer-image-container' )</code></div>
<div class="line number16 index15 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.children( 'img</code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">' )</code></div>
<div class="line number17 index16 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.hide();</code></div>
<div class="line number18 index17 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number19 index18 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Then display the previous container</code></div>
<div class="line number20 index19 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( '</code><code class="javascript preprocessor" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: gray !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">#featured-footer-image-container' )</code></div>
<div class="line number21 index20 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.prev()</code></div>
<div class="line number22 index21 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.show();</code></div>
<div class="line number23 index22 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number24 index23 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript comments" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: rgb(0, 130, 0) !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">// Finally, we add the 'hidden' class back to this anchor's parent</code></div>
<div class="line number25 index24 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">    </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'#featured-footer-image-container'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">)</code></div>
<div class="line number26 index25 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.next()</code></div>
<div class="line number27 index26 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.hide()</code></div>
<div class="line number28 index27 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">        </code><code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">.addClass( </code><code class="javascript string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; color: blue !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">'hidden'</code> <code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div>
<div class="line number29 index28 alt2" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
 </div>
<div class="line number30 index29 alt1" style="background-attachment: initial !important; background-clip: initial !important; background-image: none !important; background-origin: initial !important; background-position: initial !important; background-repeat: initial !important; background-size: initial !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre !important; width: auto !important;">
<code class="javascript plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-sizing: content-box !important; float: none !important; font-family: 'Source Code Pro', Monaco, monospace !important; font-stretch: normal !important; height: auto !important; left: auto !important; margin: 0px !important; min-height: inherit !important; outline: 0px !important; overflow: visible !important; padding: 5px 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
At this point, we've got everything we need in order to select an image, remove an image, and continue to do so.</div>
<div style="box-sizing: border-box; margin-bottom: 26px;">
There's still work left to be done, but we'll be covering that in the next article. In the meantime, don't forget to checkout the associated repository on GitHub for the current version of the source code of this project.</div>
</div>
</div>
</div>

Adding and Removing Images with the WordPress Media Uploader

This post is part of a series called Getting Started with the WordPress Media Uploader. Getting Started with the WordPress Media Uploader Saving Images with the WordPress Media Uploader In the previous post in this series, we started working with the latest iteration of the WordPress Media Uploader…

12Jan2015

Web programming Tutorial

Feature Post

How to Create Custom Taxonomies in WordPress

How to Create Custom Post Types in WordPress

Get the client IP address using PHP

Adding and Removing Images with the WordPress Media Uploader

wordpress

Css