{"id":1505,"date":"2016-11-14T16:48:12","date_gmt":"2016-11-14T16:48:12","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1505"},"modified":"2016-11-14T16:48:12","modified_gmt":"2016-11-14T16:48:12","slug":"creating-slides-in-ionic-2","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2","title":{"rendered":"Creating Slides in Ionic 2"},"content":{"rendered":"

Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog<\/a>, where this post originally appeared.<\/em><\/p>\n

A little over a year ago, I wrote a post (\u201cIonic Example: ion-slide-box<\/a>\u201d) that demonstrated how to use the ion-slide-box component with Ionic 1. A few days ago, a reader asked if I could update that post to work with Ionic 2. I\u2019ve done that and am now going to share some of the code from the updated version.
\n
\nIn case you don\u2019t feel like reading the previous entry, the demo was rather simple. It made use of the Bing Image Search API to fetch pictures based on your input. For context, here\u2019s an example of how it looked for Ionic 1 and iOS:<\/p>\n

\"image-search_cat\"

I\u2019m beginning to think it is physically impossible for me to do a demo that doesn\u2019t involve cats. Anyway, let\u2019s talk about the Ionic 2 version. First, the view:<\/p>\n

<ion-header>\n  <ion-navbar>\n    <ion-title>\n      Image Search\n    <\/ion-title>\n  <\/ion-navbar>\n<\/ion-header>\n\n<ion-content padding>\n\n  <ion-item>\n    <ion-input type="search" placeholder="Search" [(ngModel)]="search"><\/ion-input>\n  <\/ion-item>\n\n  <button ion-button full (click)="doSearch()">Search<\/button>\n\n  <ion-slides [options]="mySlideOptions">\n    <ion-slide *ngFor="let slide of slides">\n      <img [src]="slide.MediaUrl">\n    <\/ion-slide>\n  <\/ion-slides>\n\n<\/ion-content>\n<\/code><\/pre>\n
In form, it\u2019s similar to the V1 version of app, but while V1 still had a mix of HTML and Ionic components, this is nearly 100% Ionic tag-based. The only non-Ionic component there is the button tag, and even it uses an argument to flag it as being Ionic-controlled anyway. If you\u2019re still new to Angular 2 (like me!), you should pay special attention to the new syntax used for event handling: (click)="doSearch()"<\/code> and two way binding: [(ngModel)]="search"<\/code>. Another tweak is to iteration. While V1 had ng-repeat<\/code>, I\u2019m using *ngFor<\/code> in V2. All in all, the view here is simpler than my previous version. (But to be clear, the previous version did everything in one HTML file as it was so simple. I could have separated out the view into its own file.) Now, let\u2019s take a look at the code. First, the code for the view:<\/p>\n
import { Component } from '@angular\/core';\nimport { NavController } from 'ionic-angular';\nimport { ImageSearch } from '..\/..\/providers\/image-search';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html',\n  providers:[ImageSearch]\n})\nexport class HomePage {\n\n  search:string;\n  slides:any[];\n  mySlideOptions = {\n    pager:true\n  };\n\n  constructor(public navCtrl: NavController, public searchProvider:ImageSearch) {\n  }\n\n  doSearch() {\n    console.log('searching for '+this.search);\n    this.searchProvider.search(this.search).subscribe(data => {\n      console.log(data);\n      this.slides = data;\n    });\n  }\n\n}\n<\/code><\/pre>\n
There isn\u2019t anything too scary here. I\u2019ve got one method, doSearch<\/code>, that simply fires off a call to my provider for Bing searches. The only real interesting part is mySlideOptions<\/code>. If you want to tweak how the slide works, you can\u2019t just pass arguments via the component tag. That kinda sucks in my opinion, but I\u2019m guessing there is a good reason for that. I had tried adding pager="true"<\/code> to my ion-slides<\/code> tag, but that didn\u2019t work. I had to create a variable and then bind to it from the view. Again, that bugs me. I can get over it, though.<\/p>\n
The provider is now all wrapped up in fancy Oberservables and crap, which frankly still confuse the hell out of me. But I got it working. The hardest thing was figuring out how to do headers.<\/p>\n
import { Injectable } from '@angular\/core';\nimport { Http, Headers} from '@angular\/http';\nimport 'rxjs\/add\/operator\/map';\nimport { Observable } from 'rxjs\/Observable';\n\n\/*\n  Generated class for the ImageSearch provider.\n\n  See https:\/\/angular.io\/docs\/ts\/latest\/guide\/dependency-injection.html\n  for more info on providers and Angular 2 DI.\n*\/\n@Injectable()\nexport class ImageSearch {\n\n  appid = "fgQ7ve\/sV\/eB3NN\/+fDK9ohhRWj1z1us4eIbidcsTBM";\n  rooturl = "https:\/\/api.datamarket.azure.com\/Bing\/Search\/v1\/Image?$format=json&Query='";\n\n  constructor(public http: Http) {\n    this.http = http;\n  }\n\n  search(term:string) {\n\n      let url = this.rooturl + encodeURIComponent(term) + "'&$top=10";\n\n      let headers = new Headers();\n      headers.append('Authorization', 'Basic '+ btoa(this.appid + ':' + this.appid));\n      return this.http.get(url,{headers:headers})\n        .map(res => res.json())\n        .map(data => data.d.results);\n\n  }\n\n}\n<\/code><\/pre>\n
And yep, that\u2019s my Bing key. I\u2019ll probably regret sharing it. So how does it look? Here\u2019s an iOS example:<\/p>\n
\"islide1\"
Right away, you\u2019ll notice the pager isn\u2019t actually there. I\u2019m not sure why that is failing to show up because it does show up when running ionic serve. I could definitely try to size that image a bit nicer in the view, but for a quick demo, I got over it.<\/p>\n
A few minutes later\u2026<\/h3>\n
So I was wrapping up this blog post when I started chatting about it over on the Ionic Slack channel. Mike<\/a> and others helped me discover a few things.<\/p>\n
First, you know how I complained about having to create a variable in my JS code just to handle a simple option? Turns out you can do it all in the view–thanks, Mike:<\/p>\n
<ion-slides [options]="{pager:true}">\n<\/code><\/pre>\n
I added that and then removed the code from home.ts<\/code>, making it even simpler. But I still had the bug with the pager not showing up. It clearly worked in ionic serve<\/code>, see?<\/p>\n
\"islide2\"
So wtf, right? Then I remembered – Chrome DevTools has a Responsive Mode. What happens when we turn that on?<\/p>\n
\"islide3\"
Boom. Right away I see the same bug\u2026 and I notice the scrollbar. I scroll down and see\u2026<\/p>\n
\"islide4\"
Yep, my slides portion is just too big. On my iOS simulator, I scrolled down and confirmed. Sigh. So (and again, with help from smart folks on the Slack channel!), I ended up styling the ion-slides<\/code> components:<\/p>\n
<ion-slides [options]="{pager:true}" style="max-height:400px">\n<\/code><\/pre>\n
I use a set max of 400px, which isn\u2019t terribly cross platform compatible, but it helped:<\/p>\n
\"islide5\"
Perfect! Except this is what you see on initial load:<\/p>\n
\"islide6\"
Ugh. So I tried going back to having options defined in JavaScript and simply changing it when data was loaded, but that didn\u2019t work. I then tried getting a pointer to the slider object and updating it that way. It also didn\u2019t work.<\/p>\n
Ugh again. So I went back to a simple inline option declaration but also hid the entire slider:<\/p>\n
<ion-slides [options]="{pager:true}" style="max-height:400px"  *ngIf="haveData">\n<\/code><\/pre>\n
I then modified my code to default haveData:<\/p>\n
import { Component, ViewChild } from '@angular\/core';\nimport { NavController, Slides } from 'ionic-angular';\nimport { ImageSearch } from '..\/..\/providers\/image-search';\n\n@Component({\n  selector: 'page-home',\n  templateUrl: 'home.html',\n  providers:[ImageSearch]\n})\nexport class HomePage {\n\n  search:string;\n  slides:any[];\n  haveData:boolean = false;\n\n  constructor(public navCtrl: NavController, public searchProvider:ImageSearch) {\n  }\n\n  doSearch() {\n    console.log('searching for '+this.search);\n    this.searchProvider.search(this.search).subscribe(data => {\n      console.log(data);\n      if(data.length >= 1) {\n        this.haveData=true;\n        this.slides = data;\n      }\n    });\n  }\n\n}\n<\/code><\/pre>\n
And now it works perfectly! To be fair, this still needs a nice \u201cloading\u201d widget UI when searching, but as I mainly wanted to focus on the slides, I figure I should try to keep this simple. The full source code for this demo may be found here<\/a>.<\/p>\n
Let me know if you have any questions or comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. A little over a year ago, I wrote a post (\u201cIonic Example: ion-slide-box\u201d) that demonstrated how to use the ion-slide-box component with Ionic 1. A few days ago, a reader asked if I could […]<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13],"class_list":["post-1505","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2"],"acf":[],"yoast_head":"\nCreating Slides in Ionic 2 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating Slides in Ionic 2\" \/>\n<meta property=\"og:description\" content=\"Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. A little over a year ago, I wrote a post (\u201cIonic Example: ion-slide-box\u201d) that demonstrated how to use the ion-slide-box component with Ionic 1. A few days ago, a reader asked if I could […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-14T16:48:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png\" \/>\n<meta name=\"author\" content=\"Raymond Camden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@raymondcamden\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Raymond Camden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\"},\"author\":{\"name\":\"Raymond Camden\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d\"},\"headline\":\"Creating Slides in Ionic 2\",\"datePublished\":\"2016-11-14T16:48:12+00:00\",\"dateModified\":\"2016-11-14T16:48:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\"},\"wordCount\":847,\"commentCount\":41,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png\",\"keywords\":[\"Ionic\",\"Ionic 2\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\",\"url\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\",\"name\":\"Creating Slides in Ionic 2 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png\",\"datePublished\":\"2016-11-14T16:48:12+00:00\",\"dateModified\":\"2016-11-14T16:48:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png\",\"width\":527,\"height\":792},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating Slides in Ionic 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d\",\"name\":\"Raymond Camden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g\",\"caption\":\"Raymond Camden\"},\"sameAs\":[\"http:\/\/www.raymondcamden.com\",\"https:\/\/x.com\/raymondcamden\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/ray\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating Slides in Ionic 2 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2","og_locale":"en_US","og_type":"article","og_title":"Creating Slides in Ionic 2","og_description":"Raymond Camden is a Developer Advocate at IBM and frequently writes about Ionic on his blog, where this post originally appeared. A little over a year ago, I wrote a post (\u201cIonic Example: ion-slide-box\u201d) that demonstrated how to use the ion-slide-box component with Ionic 1. A few days ago, a reader asked if I could […]","og_url":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2","og_site_name":"Ionic Blog","article_published_time":"2016-11-14T16:48:12+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png"}],"author":"Raymond Camden","twitter_card":"summary_large_image","twitter_creator":"@raymondcamden","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Raymond Camden","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2"},"author":{"name":"Raymond Camden","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d"},"headline":"Creating Slides in Ionic 2","datePublished":"2016-11-14T16:48:12+00:00","dateModified":"2016-11-14T16:48:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2"},"wordCount":847,"commentCount":41,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png","keywords":["Ionic","Ionic 2"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2","url":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2","name":"Creating Slides in Ionic 2 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png","datePublished":"2016-11-14T16:48:12+00:00","dateModified":"2016-11-14T16:48:12+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/11\/Image-Search_cat.png","width":527,"height":792},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/creating-slides-in-ionic-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Creating Slides in Ionic 2"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c5161ffcc855ece520266a174a1b828d","name":"Raymond Camden","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8edd6261c5f044afb27913bddf7760af0e47b56a2a617b7bcc815836beba0ba8?s=96&d=mm&r=g","caption":"Raymond Camden"},"sameAs":["http:\/\/www.raymondcamden.com","https:\/\/x.com\/raymondcamden"],"url":"https:\/\/ionic.io\/blog\/author\/ray"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1505"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1505\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}