public
Last active

Post Options layout example request

  • Download Gist
gistfile1.aw
PHP
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
This is the default 'twentyeleven' header for a Gallery post format.
 
Right now the featured image (class="gallery-thumb") sits above or to the side of the header, depending on the CSS used.
 
<?php
if ( post_password_required() ) :
echo '<h2 class="mb15"><?php the_title() ?></h2>' . '<p>A password is required to view this gallery.</p>';
else :
$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image',
'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
endif; ?>
<figure class="gallery-thumb">
<a href="<?php the_permalink(); ?>"><span class="fancy"><?php echo $image_img_tag; ?></span></a>
</figure><!-- .gallery-thumb -->
 
<header class="postformat-taxonomyphp"><hgroup><?php
printf( __( '<a href="%1$s" rel="bookmark"><h2>%2$s</h2></a><h4> <time class="entry-date" datetime="%3$s" pubdate>%4$s</time><span class="sep"> </span></h4>',
'twentyeleven' ), get_permalink(), get_the_title(), get_the_date( 'c' ), get_the_date() ); ?>
</hgroup></header>
<?php the_content( __('Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) );
endif; ?>
<div class="clear"></div>
I would like to set a post option to allow the user to define exaclty where the featured image is displayed.
 
Screenshot of the png's already created:
http://i53.tinypic.com/zlz141.png
 
 
For example a featured image that appears above the content might look like this:
 
<figure class="gallery-thumb" style="display:block; width:100%; margin-bottom:15px">
<a href="<?php the_permalink(); ?>"><span class="fancy"><?php echo $image_img_tag; ?></span></a>
</figure><!-- .gallery-thumb -->
 
<header class="postformat-taxonomyphp"><hgroup><?php
printf( __( '<a href="%1$s" rel="bookmark"><h2>%2$s</h2></a><h4> <time class="entry-date" datetime="%3$s" pubdate>%4$s</time><span class="sep"> </span></h4>',
'twentyeleven' ), get_permalink(), get_the_title(), get_the_date( 'c' ), get_the_date() ); ?>
</hgroup></header>
<?php the_content( __('Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
 
Or if below the header:
 
<header class="postformat-taxonomyphp"><hgroup><?php
printf( __( '<a href="%1$s" rel="bookmark"><h2>%2$s</h2></a><h4> <time class="entry-date" datetime="%3$s" pubdate>%4$s</time><span class="sep"> </span></h4>',
'twentyeleven' ), get_permalink(), get_the_title(), get_the_date( 'c' ), get_the_date() ); ?>
</hgroup></header>
<figure class="gallery-thumb" style="display:block; width:100%; margin-bottom:15px">
<a href="<?php the_permalink(); ?>"><span class="fancy"><?php echo $image_img_tag; ?></span></a>
</figure><!-- .gallery-thumb -->
<?php the_content( __('Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
The CSS would be cleaned up for a production version, but this should hopefully demonstrate what I am trying to achieve.
 
 
The code I'm using:
 
<?php
// Featured Image Layout
$post_options->register_post_option( array(
'id' => 'featuredimg-position',
'title' => 'Featured image position',
'section' => 'opensky-options',
'callback' => 'post_options_api_featuredimg_layout_callback'
) );
}
 
// Custom callback, featured image layout
function post_options_api_featuredimg_layout_callback( $args ) {
$layouts = array(
'featuredimg-1' => 'Image under header',
'featuredimg-2' => 'Image over header',
'featuredimg-3' => 'Image left of header',
'featuredimg-4' => 'Image right of header',
'featuredimg-5' => 'No featured image'
);
?>
<?php foreach( $layouts as $layout => $caption ): ?>
<div class="mg-color-scheme-item" style="float: left; margin-right: 14px; margin-bottom: 18px;">
<label style="float: left; clear: both;">
<input <?php echo checked( $layout == $args['value'] ); ?> type="radio" name="<?php echo $args['name_attr']; ?>" value="<?php echo $layout; ?>" style="margin-bottom: 4px;" /><br />
<img src="<?php echo get_template_directory_uri() . '/post-options/images/' . $layout . '.png'; ?>" style="border: solid 1px #ccc;" /><br />
<span class="description" style="margin-top: 8px; float: left;"><?php echo $caption; ?></span>
</label>
</div>
<?php endforeach; ?>
<br class="clear" />
<?php
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.