# Taking custom Polymer element <x-flickr> to the next level

Source: https://tpiros.dev/blog/taking-custom-polymer-element-x-flickr-to-the-next-level

I wanted to extend the features of my first custom Polymer element, `<x-flickr>`. The Polymer engineers provide great support on both Twitter and StackOverflow, so I felt confident they'd answer my questions. In the previous article I mentioned using Flickr's REST API to search for photos with a given tag. The result set returns enough information to build up the `src` attribute for the `img` tag. But to dig deeper and pull further information about the image (the author, the description of the photo), another API call needs to happen.

Two ways to tackle this: via scripting, and via Polymer elements (the Polymeric way). Let's walk through both.

**The polymeric way**

Instead of making a JSONP call to the Flickr API, we can fire a simple AJAX call, constructed like this:

```html
<polymer-ajax
  auto
  handleAs="json"
  response="{{data}}"
  url="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={{apikey}}&tags={{tag}}&per_page={{amount}}&page=1&format=json&nojsoncallback=1"
></polymer-ajax>
```

After this, we create the template just as before, and inside the repeater (`repeat={{photo in photos}}`) we can make yet another AJAX call to grab the details of a given photo:

```html
<polymer-ajax
  auto
  handleAs="json"
  response="{{photo.info}}"
  url="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key={{apikey}}&photo_id={{photo.id}}&format=json&nojsoncallback=1"
></polymer-ajax>
```

We also need to update the Element specification inside the `<script>` tag:

```js
Polymer('x-flickr', {
  apikey: '',
  amount: 10,
  data: null,
  dataChanged: function () {
    this.photos = this.data.photos.photo;
    this.fire('x-flickr-load', { response: this.photos });
  },
});
```

This approach also shifts the dependencies in `bower.json` significantly. The only package you need is 'polymer-ajax'.

I've made these changes and created a [branch on GitHub](https://github.com/tpiros/x-flickr/tree/polymeric) so you can see how it all comes together.

## The scripted way

You can also achieve the above functionality using scripts. Here, we'll extend the `<script>` part of the template and use the length property of the `photos` array.

First, instead of building up the `src` attribute, we create an `src` key:

```js
photo.src =
  'http://farm' +
  photo.farm +
  '.staticflickr.com/' +
  photo.server +
  '/' +
  photo.id +
  '_' +
  photo.secret +
  '.jpg';
```

Then access it inside the template:

```html
<img src="{{photo.src}}" class="img-thumbnail" />
```

We can also store the ID of the photo in a similar fashion and construct a call to grab the description or any other detail:

```js
fetchAuthor: function(photo) {
  var jsonp = document.createElement('polymer-jsonp');
  jsonp.url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key=' + this.apikey + '&photo_id=' + photo.id + '&format=json&jsoncallback=';
  jsonp.addEventListener('polymer-response', function(e) {
    photo.author = this.response.photo.owner.realname;
  });
  jsonp.go();
}
```

I've created [another branch on GitHub](https://github.com/tpiros/x-flickr/tree/scripting) for the scripted approach. Have a look.

This shows the flexibility of Polymer and the multiple ways of achieving the same functionality. According to the Polymer engineers, the right way is the declarative way (first option).