1. Documentation
  2. WooFramework Codex

woo_image

Introduction ↑ Back to top

The WooFramework comes with a built-in function that re-sizes images dynamically. This comes in hand when you move your WordPress site over to a Woo theme and want thumbnails to be populated automatically and/or resized dynamically.

What is woo_image? ↑ Back to top

It’s a function that makes use of a script called thumb.php, located in the root of all our themes. The function has a set of parameters that gives you the ability to change the output of the woo_image. These typically include the size, the quality, the class, ect.

Classically this function is used inside (or outside) the “Loop” to display thumbnails alongside their respective posts, generated from the upload field in the post/page write pages, by default name (keyed) as “image”. These images can also be pulled out automatically from the uploads already made to the post via the built-in WordPress functionality.

Furthermore, images can also be sent to the function via the given parameters and return with the resized image, irrespective of the Loop or the ID.

Parameters ↑ Back to top

  • key – The custom field key that the image will primarily pull it’s image source url from.
  • width – Set width manually to what size the image will resize too.
  • height – Set height manually to what size the image will resize too.
  • class – CSS class to use on the img tag eg. “alignleft”. Default is “thumbnail”
  • quality – Set image quality between 1-100. Default is 90
  • id – Assign a custom ID, if required.
  • link – Echo with anchor (‘src’), without anchor (‘img’) or original image URL (‘url’).
  • repeat – Auto image only. Adjust amount of images to return for the post attachments. Used for gallery type purposes. Default is 1.
  • offset – Auto image only. Offset the repeat function with assigned amount of objects. Default is 0.
  • before – Auto image only. Added syntax before each image output.
  • after – Auto image only. Added syntax after each image output.
  • single – Auto image only. Forces “img” return on images, like on single.php template
  • force – Forces smaller images to not be effected with image width and height dimensions (proportions fix). Default is false.
  • return – Returns output instead of echo-ing it out.
  • src – A parameter that accepts a image url for resizing. No anchor is generated.
  • auto_meta – Disables meta generated by the Post ID. When “src” is used, this setting is automatically set to false.
  • meta – Add a custom meta text to the image (alt) and anchor (title) of the generated image.
  • alignment – Crop alignment for thumb.php (l, r, t, b)
  • size – Custom pre-defined size for WP Thumbnail (string)
  • noheight – Don’t output the height on img tag (for responsive designs)

Examples ↑ Back to top

Basic usage ↑ Back to top

Used in most Woo themes, this is the “Loop” based method. It will primarily pull images in from the “image” custom field, then from the post attachments if the “Auto image” options is enabled.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
	<div class="post">
		<?php woo_image('key=image&width=120&height=100&class=thumbnail alignleft'); ?>
		<h1 class="title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
		<div class="entry"><?php the_excerpt(); ?></div>
	</div>
<?php endwhile; else: ?>
	<div class="post">
	<p>Sorry, no posts matched your criteria.</p>
	</div>
<?php endif; ?>

A common variation includes using the settings from the settings panel to define the size:

<?php woo_image('width='.$woo_options['woo_thumb_w'].'&height='.$woo_options['woo_thumb_h'].'&class=thumbnail '.$woo_options['woo_thumb_align']); ?>

If you know the ID of the post, and it’s outside the loop then the following can be used:

<?php woo_image('key=image&id=XX&height=40&width=120'); ?>

Custom Image Source ↑ Back to top

When creating your own image options in the backend or looking to resize an image on your server, you can resize it using the “src” parameter in the woo_image function.

<?php woo_image('src=http://yoursite.com/image.jpg&meta=The is my image alt text&width=220&height=200'); ?>

or

<?php woo_image('src='. get_option("woo_my_custom_upload") .'&meta=The is my image alt text&width=220&height=200'); ?>

It is possible to output a gallery, or a series of images attached to the post with the woo_image function. The following example will pull 12 images from the

<?php woo_image('repeat=12&class=gallery-image&width=50&height=50'); ?>

WordPress Post Thumbnails ↑ Back to top

WordPress 2.9 and above has added Post Thumbnail functionality, only available to themes or frameworks having them implemented.

The WooFramework, granted the theme options has the option available, will enhance the woo_image function to use the WordPress Post Thumbnail instead.

Activating the_post_thumbnail ↑ Back to top

Older themes running the latest framework might not have been upgraded with the option to turn on the WordPress Post Thumbnails, but does have the infrastructure do handle it.

Check if your theme has the following option in the Theme Settings page under “Dynamic Images”.

Screenshot on 2014-07-07 at 16-25-39

Don’t have these options? No problem!

As we have covered before; adding your own theme options is easy.

Below is what you will need to add to your theme-options.php to get started. It’s best if you add it to the Dynamic Images panel so it’s easy to find.

$options[] = array( "name" =&gt; "Enable WordPress Post Thumbnail Support",
					"desc" =&gt; "Use WordPress post thumbnail support to assign a post thumbnail.",
					"id" =&gt; $shortname."_post_image_support",
					"std" =&gt; "true",
					"class" =&gt; "collapsed",
					"type" =&gt; "checkbox"); 

$options[] = array( "name" =&gt; "Dynamically Resize Post Thumbnail",
					"desc" =&gt; "The post thumbnail will be dynamically resized using native WP resize functionality. <em>(Requires PHP 5.2+)</em>",
					"id" =&gt; $shortname."_pis_resize",
					"std" =&gt; "true",
					"class" =&gt; "hidden",
					"type" =&gt; "checkbox"); 									   

$options[] = array( "name" =&gt; "Hard Crop Post Thumbnail",
					"desc" =&gt; "The image will be cropped to match the target aspect ratio.",
					"id" =&gt; $shortname."_pis_hard_crop",
					"std" =&gt; "true",
					"class" =&gt; "hidden last",
					"type" =&gt; "checkbox");

Once you have added (or you have these options already in your theme), you can activate the WordPress Post Thumbnail Support option and start using the uploader made available in post edit screens.

Understanding the_post_thumbnail ↑ Back to top

So how does it work? Once the options has been activated, you will see the following in your Post/Page edit screen:

Screen Shot 2014-07-07 at 16.28.12

After uploading an image as your thumbnail, you will have to click on “Set Featured Image” like this:

Screen Shot 2014-07-07 at 16.30.54

Once your Post Thumbnail has been set, it should appear in the sidebar like this:

Screenshot on 2014-07-07 at 16-32-39

… and the resulting thumbnail will appear blog loop looks like this:

The

Hard Crop? ↑ Back to top

Hard Cropping is a technique whereby image you upload is cropped to match the target aspect ratio, and is then shrunk to fit in the specified dimensions exactly. This method will give you exactly the dimension you wish to show your post images. Helping you get uniformity across your post images and blog posts.

Fallback ↑ Back to top

The classic woo_image and its thumb.php dynamic image re-sizer will take over where the_post_thumbnails have not been added to a post. Giving you the options to migrate to the new system without losing any post thumbnails.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment