Complete Application – Part 2 (Showing Image Thumbnails)

Adding Image Thumbnails

This Part follows from Part 1 where we build the basic application.

In this part, we are going to add image functionality. Showing image thumbnails.  So we’ll be able to do the following:

  1. Display image thumbnail
  2. Display an image popup
  3. Write the JavaScript Code
  4. Load image based on database field
  5. Next Steps

 

This is what we would achieve. But we would start with static image thumbnails.

 

Let’s start with the first one.

 

1. Displaying Image Thumbnail

Step 1: First create a folder in the src directory. Name this folder, ‘photos’. It would be used to store employee photos.

Step 2: Now add any image into the photos folder (for now let’s display static thumbnail). Name this image avatar.jpg.

Step 3: Open the Employee.html page and add one additional column to the table. This column should be placed before the Id column.

This column would have the following markup:

<td>
    <a id="photoButton" th:href="@{'/img/photos/avatar.jpg'}">
           <img th:src="@{'/img/photos/avatar.jpg'}" width="40" height="40">
     </a>
 </td>	

 

2. Setup the Modal Form

Now, we want to display a modal popup, when the photoButton is clicked. So we would execute a javaScript code to display the modal and assign the image url

Step 1: Copy and paste the modal html markup to the Employee.html page

<div class="modal fade" tabindex="-1" role="dialog" id="photoModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Photo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      		<img id="employeePhoto" src="" width="90%" height="90%">
    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div> 

 

3. Write the JavaScript Code

Now, we would write the JavaScript code to display this images.

So what happens, is that when the user clicks on the photoButton, the href attribute of the button is assigned to the src attribute of the image in the modal. Then the modal is displayed.

Step 1: Open the employee.js file and add the following code

$('.table #photoButton').on('click',function(event) {
   event.preventDefault();
   var href = $(this).attr('href');
   $('#photoModal #employeePhoto').attr('src', href);
   $('#photoModal').modal();		
});	

 

4. Display Dynamic Image based on Database field

This works in a very simple way. First, the name of the image has to be unique the the particular employee records. Therefore, the image name could either be:

  • username of employee
  • id of employee

We cannot use username since we are yet to discuss Spring Security in next section.

Step 1: So we would create and  save the images as 1.jpg, 2.jpg and 3.jpg inside the photos folder.

Step 2: Now, adjust the markup for the image column of the table. So it would look like this:

 <a id="photoButton" th:href="@{'/img/photos/' + ${employee.id} +'.jpg'}">
 <img th:src="@{'/img/photos/' + ${employee.id} +'.jpg'}" width="40" height="40">
 </a>

 

Now you can go ahead to test the application.

Then do exactly the same thing for the vehicles module. Let me know if you have any challenges. Also, watch the video lessons for clarifications.

 

5. Next Steps

We would now continue in the next part with 3 interesting topics:

  • Spring Security (adding user login)
  • Jpa Auditiong (adding LastUpdatedBy and LastUpdatedOn automatically)
  • Image upload (allowing a user to upload his profile image)

Remember to subscribe to my channel so you don’t miss any updates.