WordPress Featured Images With an Auto Width or Height

by Posted in Code
 

To display the featured image of a WordPress post you would use the following:

<? if ( has_post_thumbnail() ) the_post_thumbnail(); ?>

Within the the_post_thumbnail() method you can include arguments that allow for further customization of the featured image in WordPress – also referred to as post thumbnail.

One such argument documented in the WordPress Codex is defining the size. The thumbnail size can be defined in the following ways:

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Full resolution (original size uploaded)

the_post_thumbnail( array(100,100) );  // Other resolutions

When using the string (i.e. ‘medium’) to define the size, WordPress will use the settings from your setup to define the image size. Your image size settings are configured in Settings > Media. One item to note is the image sizes are created at the time the image is uploaded. So if you change you media settings after you have uploaded images, they will not apply retroactively to the images that were previously uploaded.

The last example from above, “the_post_thumbnail( array(100,100) );”, allows you to define a specific width and height to that implementation of the_post_thumbnail(). The numeric values are defined width, height like -> array(width,height)

How do I use automatic width or height for the featured image?

If you are working with a responsive design or fluid layout, you may need to use ‘auto’ to define the width or height. To do so, you can pass the ‘auto’ string in place of the width of height of the size array.

<? if ( has_post_thumbnail() )  the_post_thumbnail( array(400,'auto') ); ?>

Remember that the ‘auto’ is a string, so the single tick (‘) needs to surround the ‘auto’ string.

More details on the featured image customization options can be found at the WordPress Codex for the_post_thumbnail.

Use jQuery to Scroll to Anchor in an iFrame

by Posted in Code
 

I had a unique customer request to provide navigation for content within an iframe on the parent page of the iframe. This is problematic because cross domain scripting would not allow me to handle and manipulate the content in the iframe.

jQuery to the Rescue.

I am confident that this can be done in native javascript, but since my site was already using the jQuery framework, I wanted to go that route. (Work smarter, not harder).

After a bit of trial and error on how to grab the anchor tag, I changed my approach. The solution resided in simply swapping the source of the iframe to include the #achorname at the end of the URL. This would effectively “scroll” the iframe to the proper location. A bit of Googling and I located this snippet of code on jsFiddle to facilitate the URL onclick switching.

The HTML

<ul>
    <li>
        <a href="http://www.123.com/test#anchor1" onclick="return loadIframe('ifrm', this.href);">Nav 1</a>
    </li>
    <li>
        <a href="http://www.123.com/test#anchor2" onclick="return loadIframe('ifrm', this.href);">Nav 2</a>
    </li>
</ul>
<div class="iframe">
    <iframe name="ifrm" id="ifrm" src="http://www.123.com/test" frameborder="0">
        Your browser doesn't support iframes.
    </iframe>
</div>

The JavaScript

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

What we are doing is taking the href attribute of the navigation link and replacing the src attribute of the iframe. This will essentially move the iframe content to have the position the anchor at the top of the iframe window. So we don’t truly “scroll” the iframe, but we can navigate the iframe with links on the parent page.

Note: This does require knowledge of the anchor tags. It is easy to view the source to grab that info, but the originating site can change that page at any time.

How To Order Custom Post Types by Custom Taxonomy in WordPress

by Posted in Code
 

Need: To customize the display order of custom post type entries listed on a page by their custom taxonomy.

Solution: Deployed the following code on a page template in order to loop the custom taxonomies fora custom post type and display the post content.

$categories = get_terms('taxonomy_name_here', 'orderby=count&order=DESC&hide_empty=1');
 foreach( $categories as $category ): 
 ?>
 <h3><?php echo $category->name; // Prints the cat/taxonomy group title ?></h3>
 <?php
 $posts = get_posts(array(
 'post_type' => 'custom_post_type_name_here',
 'taxonomy' => $category->taxonomy,
 'term' => $category->slug,
 'nopaging' => true,
 ));
 foreach($posts as $post): 
 setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
 ?>

 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <div class="entry-content"> 
 <?php the_content(); ?>
 </div><!-- .entry-content -->

 </div><!-- #post-## --> 
 <?php endforeach; ?>

<?php endforeach; ?>

The string “orderby=count&order=DESC&hide_empty=1” in the first line is used to order the taxonomy labels by count with the taxonomy containing the most entries on top and taxonomies with not posts are hidden from display on the page.

To reuse this code just replace the “taxonomy_name_here” and “custom_post_type_name_here” strings with the applicable values to your WordPress setup.

This code was deployed in WordPress 3.4.1.