Responsive images in AngularJS with Picturefill

Hi, my name is Tina! I am a Full Stack Software Developer and Tech Lead from Canada. 🙋🏻♀️
Search for a command to run...

Hi, my name is Tina! I am a Full Stack Software Developer and Tech Lead from Canada. 🙋🏻♀️
No comments yet. Be the first to comment.
Have you ever installed a package by using go install <some-package> and wondered how to uninstall it? Go is really great in that respect. Go packages are a single binary and they’re installed based on how your Go tooling is set up. Provided we have ...

Overview This is the 3rd article in a series of posts about working with Open API to create generated API clients and documentation websites. In the 1st post we went over what we can do with Open API spec files, e.g. generate API clients and documen...

Overview This article is the 2nd in a series of blog posts that discuss using Open API to help with API documentation and API client code generation. In the previous article, we went over how we can generate documentation and API clients using existi...

Overview This article starts a series of Open API-related blog posts. OpenAPI, previously known as Swagger (a name still in use today for many of its tools), is a suite of tools that generate documentation and networking clients for various programmi...

You've probably already seen the scary alert (that's possibly why you're here), but in case you haven't, it looks something like this: NewAppIJustDownloaded pasted from your clipboard Sometimes it h

Picturefill is a great responsive images plugin. It is used for implementing responsive images, and serves up different image sizes based on screen size and pixel density. This means mobile users don’t download huge images and retina screens don’t see fuzzy, pixelated images. I wanted to have responsive images in AngularJS but Picturefill didn't work out of the box with dynaimc images because the images loaded dynamically, but only after the plugin was fired. To solve this problem, I developed an AngularJS directive to fire the Picturefill plugin at the right moment. The images are populated dynamically by Angular’s scope object and the plugin is fired after the images have loaded. It’s also important to note that data-src used to call the plugin conflicts with Angular’s ng-src so I developed a workaround: pf-src is how you declare the image source using this Angular directive. The directive can be downloaded and installed into your project using Bower and Grunt. To implement this directive with static images in your Angular project, you can do so like this:
<span picture-fill data-alt="Juicy hanger steak on a croissant.">
<span pf-src="images/sizes/steak-croissant.png"></span>
<span pf-src="images/sizes/steak-croissant-100.png" data-media="(min-width: 1px)"></span>
<span pf-src="images/sizes/steak-croissant-300.png" data-media="(min-width: 400px)"></span>
<span pf-src="images/sizes/steak-croissant-600.png" data-media="(min-width: 645px)"></span>
<span pf-src="images/sizes/steak-croissant-1024.png" data-media="(min-width: 960px)"></span>
<span pf-src="images/sizes/steak-croissant.png" data-media="(min-width: 1200px)"></span>
</span>
For updated usage documentation, as well as documentation for using Picturefill with dynamic data, please see the project page on Github. To see it in action, view the Responsive images in AngularJS demo.