Create a News Feed with 360-Degree Photo Viewing in Ionic 2

  • You will notice that we have added a tiltReverse input, along with a little bit of code in updatePosition that negates the tilt value .
  • We just need to add a bit of styling to the application.
  • In a tutorial earlier this week, I covered how to create a photo tilt component in Ionic 2 , and we are going to be using that same concept to view panoramas in a news feed by tilting the device back and forth.
  • I will be adding the code directly to this tutorial, so you don’t need to worry about setting anything else up beforehand, just make sure you have those two components set up in your components folder.
  • We are going to be making some performance and visual improvements to the photo tilt component, and we are also going to be making use of another recent tutorial where we built a high-performance parallax header directive to make the app look extra cool.

In this tutorial, we will build a news feed layout in Ionic 2 which includes support for viewing panorama photos by tilting the device.

@xtools_at: Create a News Feed with 360-Degree Photo Viewing in Ionic 2 #angularjs #webdev

If you’ve been on Facebook recently, you will probably have seen interactive photos uploaded by your friends that you can drag around to view more of the photo. This is done in one of two ways, either the user uploaded a panorama photo, or a “true” 360-degree photo using something like Photo Sphere.

Before we go any further, I should clarify that the app we are going to build will only allow you to view panoramas, not photo sphere photos. In a tutorial earlier this week, I covered how to create a photo tilt component in Ionic 2, and we are going to be using that same concept here to view panoramas in a news feed by tilting the device back and forth. Here’s what it will look like:

We are going to be making some performance and visual improvements to the photo tilt component, and we are also going to be making use of another recent tutorial where we built a high-performance parallax header directive to make the app look extra cool.

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. You must also already have Ionic 2 set up on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

1. Generate a New Ionic 2 Application

We will start off by generating a new Ionic 2 application by running the following command:

Once the project has finished generating, make it your working directory by running the following command:

We are going to be using a custom component and a directive in this application, and usually, we would generate those with the Ionic CLI now, but we have already built both of them in previous tutorials, so you will need to make sure you add both of them to the components folder in your project.

If you haven’t already built the component and the directive, you can follow along with the tutorials below:

or you can just grab the source code directly below:

We are also going to be using some more code from yet another tutorial:

This isn’t strictly required, but we will be using it to make the application look a little nicer. I will be adding the code directly to this tutorial, so you don’t need to worry about setting anything else up beforehand, just make sure you have those two components set up in your components folder.

In order to be able to use the PhotoTilt component and the ParallaxHeader directive, we will need to add them to the app.module.ts file.

to the PhotoTilt component that will allow us to reverse the direction of the tilt. So rather than the image shifting left when the user tilts the device to the left, the image will instead shift to the right (and vice versa).

We are also going to add a performance improvement. The initial design of the component was intended to have a single image on the screen at a time, but now we want to display multiple images in a scrolling feed. This means that if we add 20 of these components to the feed, all 20 of them are going to animate as the device is tilted. Although most modern devices are likely capable of doing this, it is an unnecessary performance hit because there is never going to be more than 1 or 2 components on the screen at the same time. So, we are going to add a bit of extra code to check if the component is currently visible on screen before rendering the effect.

Most of this code is the same as before, so if you would like a more detailed explanation I recommend going back and reading the previous tutorial.

function:

position falls within the range that is currently viewable.

3. Set up the News Feed Template

Now that we have our component sorted, we are going to set up the template for the news feed. This is going to be almost exactly the same as the template we used in this tutorial, except that we are going to replace the static image in the feed with our PhotoTilt component.

Gear Clothing Nutrition

Josh Morony

November 5, 1955

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. 11h ago

As you can see, setting up the component in the feed is as easy as adding this line:

(a panorama I took from a recent concert my fiancee and I went to) so you will either need to supply your own, or you can copy it from the source code of this application.

To finish off the news feed layout, we will also need to set up a couple of things in the TypeScript file.

loop in the template, so we are just creating an empty array for it to iterate over.

4. Add some Styling

Finally, we just need to add a bit of styling to the application. Most of this is just to make it look nice, and we have already covered it in the previous tutorial, but there are a couple of important additions.

of 100% of the viewport width to the content area so that the image the PhotoTilt component is using (which is a long panorama) doesn’t break the bounds of the viewport and extend the width of all of the content.

You should now have a pretty fancy looking news feed, which includes a header image with a parallax effect applied, and several panoramas that you can view through tilting your device left and right.

These effects can be quite tricky to pull off smoothly, especially on low-end mobile devices. But since we are making use of Ionic 2 performance features that help write to the DOM in a more efficient manner, and we have also implemented our own performance hack by only adding the effect to on-screen elements, this application should perform very well.

Create a News Feed with 360-Degree Photo Viewing in Ionic 2