Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Cover art polymer element

This is an example of a Polymer Web Component that implements a square image placeholder with a list of images sources, so it loads the most suitable one depending on size and pixel density.


You just need to include the polymer platform and this element in the head of your html page.

Then, you can start using the spotify-coverart element as any other HTML element in your page. Set the images property to an array of objects containing width, height and url of the image, sorted by descending size:

  <script type="text/javascript" src="bower_components/platform/platform.js"></script>

  <link rel="import" href="bower_components/spotify-coverart/spotify-coverart.html">
  <spotify-coverart images='[{"height":640,"url":"","width":480},{"height":300,"url":"","width":225},{"height":64,"url":"","width":48}]'></spotify-coverart>

Each coverart will run a timer periodically to monitor changes in the size of the component. In order to avoid this, use the attribute detectSizeChange="false".

Running the example

To launch the example, install the spotify-coverart bower component:

$ bower install spotify-coverart

Then launch a web server:

$ ruby -run -e httpd . -p 5000 # "python -m SimpleHTTPServer 5000" will also do the trick

Then, you only need to navigate to http://localhost:5000/spotify-coverart/demo.html from any modern browser. Note that you need to run the server from the parent folder, not from the spotify-coverart folder.


  • Prevent loading a smaller image if a larger one is already in place.
  • Replace a smaller version with a larger one in a smoother way, waiting for the one to be loaded.
You can’t perform that action at this time.