{"id":196,"date":"2020-01-22T13:55:25","date_gmt":"2020-01-22T13:55:25","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?p=196"},"modified":"2020-07-26T08:15:00","modified_gmt":"2020-07-26T08:15:00","slug":"complete-application-part-2-showing-image-thumbnails","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/","title":{"rendered":"Complete Application &#8211; Part 2 (Showing Image Thumbnails)"},"content":{"rendered":"<p>This Part follows from <a href=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/build-a-complete-spring-boot-application-from-the-scratch-step-by-step\/\">Part 1<\/a> where we build the basic application.<\/p>\n<p>In this part, we are going to add image functionality. Showing image thumbnails.\u00a0 So we&#8217;ll be able to do the following:<\/p>\n<ol>\n<li><a href=\"#t1\">Display image thumbnail<\/a><\/li>\n<li><a href=\"#t2\">Display an image popup<\/a><\/li>\n<li><a href=\"#t3\">Write the JavaScript Code<\/a><\/li>\n<li><a href=\"#t4\">Load image based on database field<\/a><\/li>\n<li><a href=\"#t5\">Next Steps<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>This is what we would achieve. But we would start with static image thumbnails.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-197 size-large aligncenter\" src=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Employees-List-Page-1024x603.jpg\" alt=\"\" width=\"640\" height=\"377\" srcset=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Employees-List-Page-1024x603.jpg 1024w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Employees-List-Page-300x177.jpg 300w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Employees-List-Page-768x452.jpg 768w, https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Employees-List-Page.jpg 1747w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Let&#8217;s start with the first one.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t1\">1. Displaying Image Thumbnail<\/strong><\/h5>\n<p><strong>Step 1:<\/strong> First create a folder in the src directory. Name this folder, &#8216;photos&#8217;. It would be used to store employee photos.<\/p>\n<p><strong>Step 2:<\/strong> Now add any image into the photos folder (for now let&#8217;s display static thumbnail). Name this image avatar.jpg.<\/p>\n<p><strong>Step 3:<\/strong> Open the Employee.html page and add one additional column to the table. This column should be placed before the Id column.<\/p>\n<p>This column would have the following markup:<br \/>\n<!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;td&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;a<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"photoButton\"<\/span> <span style=\"color: #0000cc;\">th:href=<\/span><span style=\"background-color: #fff0f0;\">\"@{'\/img\/photos\/avatar.jpg'}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n           <span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">th:src=<\/span><span style=\"background-color: #fff0f0;\">\"@{'\/img\/photos\/avatar.jpg'}\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"40\"<\/span> <span style=\"color: #0000cc;\">height=<\/span><span style=\"background-color: #fff0f0;\">\"40\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n     <span style=\"color: #007700;\">&lt;\/a&gt;<\/span>\r\n <span style=\"color: #007700;\">&lt;\/td&gt;<\/span>\t\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t2\">2. Setup the Modal Form<\/strong><\/h5>\n<p>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<\/p>\n<p><strong>Step 1:<\/strong> Copy and paste the modal html markup to the Employee.html page<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal fade\"<\/span> <span style=\"color: #0000cc;\">tabindex=<\/span><span style=\"background-color: #fff0f0;\">\"-1\"<\/span> <span style=\"color: #0000cc;\">role=<\/span><span style=\"background-color: #fff0f0;\">\"dialog\"<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"photoModal\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n  <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-dialog\"<\/span> <span style=\"color: #0000cc;\">role=<\/span><span style=\"background-color: #fff0f0;\">\"document\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-content\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-header\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;h5<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-title\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Photo<span style=\"color: #007700;\">&lt;\/h5&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"button\"<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"close\"<\/span> <span style=\"color: #0000cc;\">data-dismiss=<\/span><span style=\"background-color: #fff0f0;\">\"modal\"<\/span> <span style=\"color: #0000cc;\">aria-label=<\/span><span style=\"background-color: #fff0f0;\">\"Close\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n          <span style=\"color: #007700;\">&lt;span<\/span> <span style=\"color: #0000cc;\">aria-hidden=<\/span><span style=\"background-color: #fff0f0;\">\"true\"<\/span><span style=\"color: #007700;\">&gt;<\/span><span style=\"color: #880000; font-weight: bold;\">&amp;times;<\/span><span style=\"color: #007700;\">&lt;\/span&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-body\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n      \t\t<span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"employeePhoto\"<\/span> <span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"90%\"<\/span> <span style=\"color: #0000cc;\">height=<\/span><span style=\"background-color: #fff0f0;\">\"90%\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"modal-footer\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n        <span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"button\"<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"btn btn-secondary\"<\/span> <span style=\"color: #0000cc;\">data-dismiss=<\/span><span style=\"background-color: #fff0f0;\">\"modal\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Close<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\r\n      <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n  <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/div&gt;<\/span> \r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t3\">3. Write the JavaScript Code<\/strong><\/h5>\n<p>Now, we would write the JavaScript code to display this images.<\/p>\n<p>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.<\/p>\n<p><strong>Step 1<\/strong>: Open the employee.js file and add the following code<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">$(<span style=\"background-color: #fff0f0;\">'.table #photoButton'<\/span>).on(<span style=\"background-color: #fff0f0;\">'click'<\/span>,<span style=\"color: #008800; font-weight: bold;\">function<\/span>(event) {\r\n   event.preventDefault();\r\n   <span style=\"color: #008800; font-weight: bold;\">var<\/span> href <span style=\"color: #333333;\">=<\/span> $(<span style=\"color: #008800; font-weight: bold;\">this<\/span>).attr(<span style=\"background-color: #fff0f0;\">'href'<\/span>);\r\n   $(<span style=\"background-color: #fff0f0;\">'#photoModal #employeePhoto'<\/span>).attr(<span style=\"background-color: #fff0f0;\">'src'<\/span>, href);\r\n   $(<span style=\"background-color: #fff0f0;\">'#photoModal'<\/span>).modal();\t\t\r\n});\t\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t4\">4. Display Dynamic Image based on Database field<\/strong><\/h5>\n<p>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:<\/p>\n<ul>\n<li>username of employee<\/li>\n<li>id of employee<\/li>\n<\/ul>\n<p>We cannot use username since we are yet to discuss Spring Security in next section.<\/p>\n<p><strong>Step 1<\/strong>: So we would create and\u00a0 save the images as 1.jpg, 2.jpg and 3.jpg inside the photos folder.<\/p>\n<p><strong>Step 2:<\/strong>\u00a0Now, adjust the markup for the image column of the table. So it would look like this:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"> <span style=\"color: #007700;\">&lt;a<\/span> <span style=\"color: #0000cc;\">id=<\/span><span style=\"background-color: #fff0f0;\">\"photoButton\"<\/span> <span style=\"color: #0000cc;\">th:href=<\/span><span style=\"background-color: #fff0f0;\">\"@{'\/img\/photos\/' + ${employee.id} +'.jpg'}\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n <span style=\"color: #007700;\">&lt;img<\/span> <span style=\"color: #0000cc;\">th:src=<\/span><span style=\"background-color: #fff0f0;\">\"@{'\/img\/photos\/' + ${employee.id} +'.jpg'}\"<\/span> <span style=\"color: #0000cc;\">width=<\/span><span style=\"background-color: #fff0f0;\">\"40\"<\/span> <span style=\"color: #0000cc;\">height=<\/span><span style=\"background-color: #fff0f0;\">\"40\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n <span style=\"color: #007700;\">&lt;\/a&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Now you can go ahead to test the application.<\/p>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<h5><strong id=\"t5\">5. Next Steps<\/strong><\/h5>\n<p>We would now continue in the next part with 3 interesting topics:<\/p>\n<ul>\n<li>Spring Security (adding user login)<\/li>\n<li>Jpa Auditiong (adding LastUpdatedBy and LastUpdatedOn automatically)<\/li>\n<li>Image upload (allowing a user to upload his profile image)<\/li>\n<\/ul>\n<p>Remember to subscribe to my channel so you don&#8217;t miss any updates.<\/p>\n<p>&nbsp;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>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.\u00a0 &hellip; <!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":199,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[14,18],"class_list":["post-196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spring-boot-tutorials","tag-complete-spring-boot-application","tag-image-thumbnails"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot<\/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:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot\" \/>\n<meta property=\"og:description\" content=\"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.\u00a0 &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn Spring Boot\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-22T13:55:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-26T08:15:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1229\" \/>\n\t<meta property=\"og:image:height\" content=\"597\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"headline\":\"Complete Application &#8211; Part 2 (Showing Image Thumbnails)\",\"datePublished\":\"2020-01-22T13:55:25+00:00\",\"dateModified\":\"2020-07-26T08:15:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/\"},\"wordCount\":446,\"commentCount\":2,\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2020\\\/01\\\/Adding-Image-Thumbnails.jpg\",\"keywords\":[\"Complete Spring Boot Application\",\"Image Thumbnails\"],\"articleSection\":[\"Spring Boot Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/\",\"name\":\"Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2020\\\/01\\\/Adding-Image-Thumbnails.jpg\",\"datePublished\":\"2020-01-22T13:55:25+00:00\",\"dateModified\":\"2020-07-26T08:15:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2020\\\/01\\\/Adding-Image-Thumbnails.jpg\",\"contentUrl\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/wp-content\\\/uploads\\\/sites\\\/7\\\/2020\\\/01\\\/Adding-Image-Thumbnails.jpg\",\"width\":1229,\"height\":597,\"caption\":\"Adding Image Thumbnails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/complete-application-part-2-showing-image-thumbnails\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Complete Application &#8211; Part 2 (Showing Image Thumbnails)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\",\"name\":\"Learn Spring Boot\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/author\\\/kindsonthegenius-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot","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:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/","og_locale":"en_US","og_type":"article","og_title":"Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot","og_description":"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.\u00a0 &hellip;","og_url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/","og_site_name":"Learn Spring Boot","article_published_time":"2020-01-22T13:55:25+00:00","article_modified_time":"2020-07-26T08:15:00+00:00","og_image":[{"width":1229,"height":597,"url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg","type":"image\/jpeg"}],"author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"headline":"Complete Application &#8211; Part 2 (Showing Image Thumbnails)","datePublished":"2020-01-22T13:55:25+00:00","dateModified":"2020-07-26T08:15:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/"},"wordCount":446,"commentCount":2,"image":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg","keywords":["Complete Spring Boot Application","Image Thumbnails"],"articleSection":["Spring Boot Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/","name":"Complete Application - Part 2 (Showing Image Thumbnails) - Learn Spring Boot","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#primaryimage"},"image":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg","datePublished":"2020-01-22T13:55:25+00:00","dateModified":"2020-07-26T08:15:00+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#primaryimage","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg","contentUrl":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-content\/uploads\/sites\/7\/2020\/01\/Adding-Image-Thumbnails.jpg","width":1229,"height":597,"caption":"Adding Image Thumbnails"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/complete-application-part-2-showing-image-thumbnails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/spring-boot\/"},{"@type":"ListItem","position":2,"name":"Complete Application &#8211; Part 2 (Showing Image Thumbnails)"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/","name":"Learn Spring Boot","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/author\/kindsonthegenius-3\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":4,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":244,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/196\/revisions\/244"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media\/199"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}