Angular JS: Display Images from Flickr using CSS

In this tutorial, we will cover how to use CSS to display images from Flickr in an Angular JS project. We will be using the Flickr API to fetch the images and then use CSS to style and display them on the webpage.

First, let’s set up our Angular JS project. You can create a new Angular JS project using Angular CLI or any other method of your choice. Once you have your project set up, let’s move on to fetching images from Flickr.

To fetch images from Flickr, we will need to make an HTTP request to the Flickr API. You will need to sign up for a free API key from Flickr in order to access their API. Once you have your API key, you can use it to make requests to the Flickr API.

Here is an example of how you can make an HTTP request to the Flickr API using Angular JS:

$http.get('https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=YOUR_API_KEY&format=json&nojsoncallback=1&tags=mountains')
  .then(function(response) {
    // Handle the response data here
    $scope.images = response.data.photos.photo;
  });

In this example, we are making a request to the Flickr API to search for photos with the tag ‘mountains’. We are storing the response data in the $scope.images variable for later use.

Next, let’s move on to styling and displaying the images on the webpage using CSS. Here is an example of how you can display the images in a grid layout:

<div class="image-grid">
  <div ng-repeat="image in images">
    <img ng-src="https://farm{{image.farm}}.staticflickr.com/{{image.server}}/{{image.id}}_{{image.secret}}.jpg" alt="{{image.title}}">
  </div>
</div>

In this example, we are using Angular JS’s ng-repeat directive to loop through the array of images and display each image in a div element. We are using the ng-src directive to dynamically set the image source based on the image data fetched from the Flickr API.

Now, let’s add some CSS to style the images in the grid layout. Here is an example of how you can style the images:

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.image-grid img {
  width: 100%;
  height: auto;
}

In this CSS code, we are using the display: grid property to create a grid layout for the images. We are using grid-template-columns to specify the size of each grid column and gap to add some spacing between the images. We are also setting the width of the images to 100% to make them responsive and maintaining their aspect ratio by setting the height to auto.

That’s it! You have successfully displayed images from Flickr in an Angular JS project using CSS. Feel free to customize the styling and layout of the images to suit your needs.