Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Edit:

It seems that I have not explained myself very well...

I am simply trying to add an image to the page attributes area of the admin area depending on what template is selected, here is a simple mockup of what I wish to achieve: Dropbox Image Link.


Original:

I am looking to add the ability for my clients to see an outline or wireframe (an image) of the currently selected template while editing a page within the Wordpress admin area.

A massive bonus would be for the clients to be able to actually select the template by viewing and subsequently clicking on images of available template/content layouts.

However I could be over-complicating the situation of course. Because I am using Wordpress more as a content management system with some fairly unique and/or complex content layouts (such as grid heavy layouts with multiple columns and content areas) I simply want to give the user as much indication of what field is for what without writing long/complex names for each content block, column or grid position.

If it matters, I am using the add-on's Advanced custom fields (with all purchasable extras such as repeater field) and Multiple content blocks.

The areas defined within the template are not necessarily always for the same content so simply naming each field/block "area for meet the team profile", "put intro paragraph here" soon becomes irrelevant and more confusing.

I hope that I have provided enough information.

share|improve this question
    
Are you talking about selecting a page template within the pages post type? –  Brian Fegter Aug 16 '12 at 22:49
    
@BrianFegter - Thank you for the reply. I mean adding an image, depending on the template selected, in the page attributes area, here is a quick mockup of my intention/desire link (Public DropBox Link). –  FrontEndJohn Aug 17 '12 at 8:19
    
Interesting concept. Just posted an answer. –  Brian Fegter Aug 17 '12 at 10:05
add comment

1 Answer 1

up vote 1 down vote accepted

Preliminary Tasks

  1. Create a directory within your theme to contain your layout thumbs.
  2. Add layout thumbs to reflect the file names of your template. The following script uses the format tpl-homepage.php. The image would be named homepage.jpg.

Please note, the following is a proof-of-concept.

Approach 1: Only JavaScript

Load the following only for post.php and post-new.php

add_action('admin_head-post.php', 'template_thumbs');
add_action('admin_head-post-new.php', 'template_thumbs');

function template_thumbs(){
    global $post;
    if($post->post_type != 'page')
        return;

    $js = "
        <script type='text/javascript'>
            jQuery(document).ready(function($){
                //Define the page template select drop-down
                var _template = $('#page-template');

                #Get the thumb on page load
                if(_template.val())
                    get_template_thumb(_template.val());


                //Sniff template changes
                _template.change(function(){
                    //Get template file name
                    var _file = $(this).val();
                    if(_file)
                        get_template_thumb(_file);
                });
            });

            function get_template_thumb(file){

                //Define the path to your thumbs directory
                var _thumb_path = '/wp-content/themes/your-theme/img/layouts/';

                //Format thumb filename
                file.replace('tpl-', '');
                file.replace('.php', '');
                file = _thumb_path + file + '.jpg';

                //Remove previous thumbnail
                $('.template-thumb').remove();

                //Insert thumbnail before the select box
                $(this).before('<img class=\'template-thumb\' src=\' + file + '\' alt=\'Layout\'>');

            }
        </script>
    ";
    echo $js;
}

Approach 2: AJAX + PHP

If this approach doesn't work for you, I would fire off a XHR and retrieve a thumbnail.

add_action('admin_head-post.php', 'template_thumbs_script');
add_action('admin_head-post-new.php', 'template_thumbs_script');

function template_thumbs_script(){
    global $post;
    if($post->post_type != 'page')
        return;

    $js = "
        <script type='text/javascript'>
            jQuery(document).ready(function($){

                //Sniff template changes
                $('#page-template').change(function(){

                    //Set $_POST data
                    var data = {
                        action: 'get_template_thumb',
                        template: $(this).val()
                    };

                    //Send XHR
                    $.post(ajaxurl, data, function(response) {
                        if(response){

                            //remove previous thumb
                            $('.template-thumb').remove();

                            //Insert thumb before select drop-down
                            $('#page-template').before(response);
                        }
                    });
                });
            });
        </script>
    ";
    echo $js;
}


add_action('wp_ajax_get_template_thumb', 'get_template_thumb');
function get_template_thumb(){
    #Verify Nonce

    #Get template name
    $template = esc_attr($_POST['template']);

    #Format image name
    $img_file = str_replace('tpl-', '', $template);
    $img_file = str_replace('.php', '', $template);

    #Assuming this is in functions.php theme root. If not, make absolute path
    $thumb_path = 'img/layouts/';

    #Check if file exists first
    if(file_exists($thumb_path.$img_file.'.jpg'))

        #Return an image tag
        echo "<img class='template-thumb' src='$img_file.jpg' alt='Template Layout'>";

    exit;
}
share|improve this answer
    
Wow, thank you for taking the time to put that together. I will have some time later to play with this and I will post my findings. I cannot up-vote your answer because I have too little reputation. I will do so when I can. Thank you for your time so far. –  FrontEndJohn Aug 17 '12 at 10:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.