How to use it on a simle logo

This is a good question.

Short Answer
The short answer is that the plugin is not going to work quite how you hope, but I’m going to see if we can figure something out in the long answer.

Long Answer
Picturefill.WP interacts with content via WordPress filters. By default, it is called on the the_content filter, which holds all the main post or page content. To apply Picturefill.WP to custom theme content blocks, you will need to wrap that content in an apply_filter function, and then apply Picturefill.WP to that filter.

In your case it would look something like this:

In the theme template

<?php
$logo_image = '<img src="' . get_stylesheet_directory_uri() . '/images/logo.png" alt="' . bloginfo('title') . '" />';

echo apply_filters('theme_image', $logo_image);
?>

In functions.php

function theme_image_retina_only($content){
  picturefill_wp_retina_only();
  return $content;
}
add_filter('theme_image', 'theme_image_retina_only');
apply_picturefill_wp('theme_image');

Unfortunately, Picturefill.WP only works fully on images that WordPress knows exist, i.e. an image needs to be in the database as post attachment. When it sees an image that is not in the database, it will still return the original image as a fallback, but will not add any responsiveness.

I can think of 3 possible solutions.

1. Use CSS background images.
2. Include the logo in the theme options.
3. Write the picturefill.js syntax manually.

CSS background images
A common technique that you may be aware of is to include logo’s and branding as CSS background images behind hidden text. There are a lot of ways to achieve this, but the added benefit is that we can take advantage of CSS media queries and serve up different images to different screen widths.

Include logo in theme options
This would involve using the Theme Customization API or creating your own settings page, and then using those settings to set the logo image. This way you can use a logo image that is a part of the WordPress media library and in the database as a post attachment.

Write the picturefill.js syntax manually
If you can manually create a retina 2x sized logo image, you can write the picturefill.js syntax manually.

<?php
if(defined('PICTUREFILL_WP_VERSION')){
?>
<span data-picture  data-alt="<?php echo bloginfo('title')?>" data-width="300" data-height="200">

  <span data-src="<?php echo get_stylesheet_directory_uri() ?>/images/logo.png" class="non-retina"></span>

  <span data-src="<?php echo get_stylesheet_directory_uri() ?>/images/[email protected]" data-media="(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="retina"></span>

  <noscript>
    <img src="<?php echo get_stylesheet_directory_uri() ?>/images/logo.png" alt="<?php echo bloginfo('title')?>" />
  </noscript>
</span>
<?php
// make sure to enqueue the picturefill script.
wp_enqueue_script('picturefill');
}else{
?>
<img src="<?php echo get_stylesheet_directory_uri() ?>/images/logo.png" alt="<?php echo bloginfo('title')?>" />
<?php
}
?>

You can see the picturefill.js Github repository for more information on the picturefill syntax.

I know I’ve thrown a lot at you, but hopefully there is something there that will work the way you would like.

Let me know if you have further questions or anything that needs further clarification.

Thanks for your question.

Thanks you for the answer.

The semi static HTML solution is just what I was looking for. Liked the big if arround it.

I believe this answers my question also, but to check in order to make images other the than content ones on a site responsive we can use the standard picturefill syntax on them as long as we enqueue the script up (I’m not talking here of a commercial theme here just a standard wordpress site). Thanks.

Yes. The version of picturefill.js this plugin includes is almost identical to Scott Jehl’s picturefill.js and the same syntax can be used. Additionally, the script with this plugin will also include other attributes in the output image, not just the src and alt attributes as with Scott Jehl’s original script. This is so that the image tag inserted into the admin editor is the same as the image tag that is output on the front-end.

To take advantage of these additional attributes manually, prepend data- to the attribute in the parent span. Syntax for an image with an id, class, and title would look something like this.

<span data-picture data-id="img-id" data-class="image classes" data-title="The title of this image" data-alt="what this image is">
<!-- Additional spans with the image src and media queries -->
</span>

Let me know if I can provide any further clarification.

Thanks very much

That’s brilliant thanks for such a detailed reply.