Merge pull request #190 from getgauge/screenshot

Added separate block for failed and captured screenshots
getgauge · Aug 13, 2018 · fe19fb7 · fe19fb7
2 parents 840cd25 + 55e8df9
commit fe19fb7
Show file tree

Hide file tree

Showing 15 changed files with 430 additions and 330 deletions.
diff --git a/gauge-proto b/gauge-proto
diff --git a/gauge_messages/spec.pb.go b/gauge_messages/spec.pb.go
diff --git a/generator/_testdata/dummyReportTheme/views/partials.tmpl b/generator/_testdata/dummyReportTheme/views/partials.tmpl
@@ -76,6 +76,7 @@
         </li>
       </ul>
       {{template "suiteMessagesDiv" .}}
+      {{template "suiteScreenshotsDiv" .}}
     </div>
   </div>
 {{end}}
@@ -100,6 +101,23 @@
     </div>
   {{end}}
 {{end}}
+
+/* Show all screenshots that the user may have introduces using the Gauge.captureScreenshot API in before and after suite hooks*/
+{{define "suiteScreenshotsDiv"}}
+  {{if or (gt (len .PreHookScreenshots) 0) (gt (len .PostHookScreenshots) 0)}}
+    <div class="suite_screenshots">
+      {{if gt (len .PreHookScreenshots) 0}}
+        <div>Before Suite Screenshots</div>
+      {{template "screenshotDiv" .PreHookScreenshots}}                       
+      {{end}}
+      {{if gt (len .PostHookScreenshots) 0}}
+        <div>After Suite Screenshots</div>
+      {{template "screenshotDiv" .PostHookScreenshots}}               
+      {{end}}
+    </div>
+  {{end}}
+{{end}}
+
 /* The sidebar resides on the side , and holds the list of specs that were part of the execution.
    Users may click to view individual spec's output, search for a spec by either tags or spec heading.
    Users are also given an autocomplete suggestion. */
@@ -141,16 +159,18 @@
       [Show details]
     </div>
     <div class="exception-container hidden">
-        <div class="exception">
-          <pre class="stacktrace">{{.StackTrace | escapeHTML | encodeNewLine}}</pre>
-        </div>
-        {{if .Screenshot}}
-          <div class="screenshot-container">
-            <a href="data:image/png;base64,{{.Screenshot}}" rel="lightbox">
-              <img src="data:image/png;base64,{{.Screenshot}}" class="screenshot-thumbnail" />
+      <div class="exception">
+        <pre class="stacktrace">{{.StackTrace | escapeHTML | encodeNewLine}}</pre>
+      </div>
+      {{if .FailureScreenshot}}
+        <div class="screenshot-container">
+          <div class="screenshot">
+            <a href="data:image/png;base64,{{.FailureScreenshot}}" rel="lightbox">
+              <img src="data:image/png;base64,{{.FailureScreenshot}}" class="screenshot-thumbnail" />
             </a>
           </div>
-        {{end}}
+        </div>
+      {{end}}
     </div>
   </div>
 {{end}}
@@ -195,6 +215,23 @@
   {{end}}
 {{end}}
 
+/* Show all screenshots that the user may have introduce using the Gauge.captureScreenshot API */
+{{define "screenshotDiv"}}
+  {{ if gt (len .) 0}}
+    <div class="screenshot-container">
+    {{range .}}
+      {{if .}}
+        <div class="screenshot">
+          <a href="data:image/png;base64,{{.}}" rel="lightbox">
+            <img src="data:image/png;base64,{{.}}" class="screenshot-thumbnail" />
+          </a>
+        </div>
+      {{end}}
+    {{end}}
+    </div>
+  {{end}}
+{{end}}
+
 /* Lists reason(s) for a spec being skipped in an execution */
 {{define "skippedReasonDiv"}}
   <div class="message-container">
@@ -354,12 +391,21 @@
 {{define "stepFailureDiv"}}
   <div class="error-container failed">
     <div class="exception-container">
-        <div class="exception">
-          <h4 class="error-message">
-            <pre>{{.ErrorMessage | escapeHTML | encodeNewLine}}</pre>
-          </h4>
-          <pre class="stacktrace">{{.StackTrace | escapeHTML | encodeNewLine}}</pre>
+      <div class="exception">
+        <h4 class="error-message">
+          <pre>{{.ErrorMessage | escapeHTML | encodeNewLine}}</pre>
+        </h4>
+        <pre class="stacktrace">{{.StackTrace | escapeHTML | encodeNewLine}}</pre>
+      </div>
+      {{ if .FailureScreenshot}}
+        <div class="screenshot-container">
+          <div class="screenshot">
+            <a href="data:image/png;base64,{{.FailureScreenshot}}" rel="lightbox">
+              <img src="data:image/png;base64,{{.FailureScreenshot}}" class="screenshot-thumbnail" />
+            </a>
+          </div>
         </div>
+      {{end}}
     </div>
   </div>
 {{end}}
@@ -391,30 +437,24 @@
 /* container for a Step */
 {{define "step"}}
   {{template "stepStartDiv" .}}
-  {{template "stepBodyDiv" .}}
+  {{template "messageDiv" .PreHookMessages}}
+  {{template "screenshotDiv" .PreHookScreenshots}}
   {{if .BeforeStepHookFailure}}
     {{ template "hookFailureDiv" .BeforeStepHookFailure }}
   {{end}}
+  {{template "stepBodyDiv" .}}
   {{with .Result}}
     {{if and (and (eq .Status "fail") (ne .ErrorMessage "")) (ne .StackTrace "") }}
         {{template "stepFailureDiv" .}}
     {{end }}
-    {{ if .Screenshot}}
-      <div class="screenshot-container">
-      {{range .Screenshot}}
-        <div class="screenshot">
-          <a href="data:image/png;base64,{{.}}" rel="lightbox">
-            <img src="data:image/png;base64,{{.}}" class="screenshot-thumbnail" />
-          </a>
-        </div>
-      {{end}}
-      </div>
-    {{end}}
+    {{template "messageDiv" .Messages}}
+    {{template "screenshotDiv" .Screenshots}}
   {{end}}
   {{if .AfterStepHookFailure}}
     {{ template "hookFailureDiv" .AfterStepHookFailure }}
   {{end}}
-	{{template "messageDiv" .Result.Messages}}
+  {{template "messageDiv" .PostHookMessages}}
+  {{template "screenshotDiv" .PostHookScreenshots}}
 	</li></ul></div></div>
   {{with .Result}}
     {{if (and (eq .Status "skip") (ne .SkippedReason "")) }}
@@ -454,6 +494,7 @@
 	{{template "tagsDiv" .}}
 	</div>
   {{template "messageDiv" .PreHookMessages}}
+  {{template "screenshotDiv" .PreHookScreenshots}}
 	{{if .BeforeScenarioHookFailure}}
 		{{template "hookFailureDiv" .BeforeScenarioHookFailure}}
 	{{end}}
@@ -473,6 +514,7 @@
   {{end}}
 
   {{template "messageDiv" .PostHookMessages}}
+  {{template "screenshotDiv" .PostHookScreenshots}}
 	{{if .AfterScenarioHookFailure }}
 		{{template "hookFailureDiv" .AfterScenarioHookFailure}}
 	{{end}}
@@ -491,6 +533,11 @@
 		</div>
 	{{else}}
     {{template "messageDiv" .PreHookMessages}}
+    {{if gt (len .PreHookScreenshots) 0}}
+      <div class="spec-screenshot-container">
+        {{template "screenshotDiv" .PreHookScreenshots}}
+      </div>
+    {{end}}
     {{range $index, $beforeHook := .BeforeSpecHookFailures}}
       {{template "hookFailureDiv" $beforeHook}}
     {{end}}
@@ -505,6 +552,11 @@
     </div>
 
     {{template "messageDiv" .PostHookMessages}}
+    {{if gt (len .PostHookScreenshots) 0}}
+      <div class="spec-screenshot-container">
+      {{template "screenshotDiv" .PostHookScreenshots}}
+      </div>
+    {{end}}
     {{range $index, $afterHook := .AfterSpecHookFailures}}
       {{template "hookFailureDiv" $afterHook}}
     {{end}}

diff --git a/generator/_testdata/expectedE2E/simpleSuiteRes/failing_specification_1.html b/generator/_testdata/expectedE2E/simpleSuiteRes/failing_specification_1.html
@@ -191,13 +191,13 @@ <h4 class="error-message">
 com.thoughtworks.gauge.GaugeRuntime.main(GaugeRuntime.java:37)
                             </pre>
                                                         </div>
-                                                    </div>
-                                                </div>
-                                                <div class="screenshot-container">
-                                                    <div class="screenshot">
-                                                        <a href="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUd3QUFBQnNDQVlBQUFDUFpsZk5BQUFGRzBsRVFWUjRuT3lkLzNIYk5oVEhZVjBIYUNlb2ZGM0FuYUR5QkxVbXNEUkJ6aE1rbnNET0JKWW1pRE9CbVEzcy8rTXp2WUUzVVBDbEFBV2tSSWtFSDBEOGVKODdWS3BpZ29BK0JBaUN4Tk1mb29WLy9wNHU1TXYvTXMxayt0UDRwMUttUXFiMTYzdFp0RzBmSXJKT00vbHlMZE9WcU5jSlBNdTBsbWtsNi9YaHVXaWQyR3cyNHF6NW9hd1VLbk1uMDdSREhvVk1TMW5Ca3JSa3hNZzZYWWh0bldZZC9oeXl2c282ZlhGWkpodjJoTW1LUGNpWFJjOThVRUZJZTZRcUdDWHFBRVM5bWkzcUZLalBNcVRXVmhObUtjc0VsVnNOTFJRbHFndDhHcEFGdXNuTFVLVHRoS21qOEJ0Qm5zRklrM1ZDaTNvVC9WdFdrMkNrUWRoRVZleUJLTThITlZnSkFaeXpoc29DT1A4OXFlOXBkQ2JpOElocENLTkxVMS91RldHV3dVaURzR3NIK1k0dGpmb2dCRUZJZzdDWm83ekhsRFoxbE8vbzBpYU84eDlMMm44Tzh4NVZtbXRoWU96dTBRV2pTZk1oRFBpVzVtTUlQb28wQ1BOMWZlRlQyb3VuL1hpWEJtR0ZyNTBKZjlKOFRwTjVsUVpoYXg4N01uQXU3Zlc5eE94RTZYSWZEYnhKbTZoSjIyZlhPMnJnbzZYZE9zNi9pUmRwZXRDeGRMbVRGcHhLVTNPYWhhdjhXM0F1clJLbXVwRGtwRW5td24vdjRWVGFibGl2anNpa3BLa1o5a3VSa0xUYWRSaExJOFdKdEwwTFo1WkdDcm0wZ3pNZExJMFVVbW10VTFNc2pSUXlhVWZuRWxrYUtTVFNUazcrc2pSU0JrdnJORnZQMGtnWkpLM3o3UldXUm9xMXRGNzN3MWdhS1ZiU2V0L0FaR21rOUpabWRjZVpwWkhTUzVyMUl3SXNqWlRPMGdZOTA4SFNTT2trYmZCRE9DeU5sSlBTU0o2YVltbWtISlZHOXBnYlN5T2xWUnJwYzRrc2paU0Qwc2dmSkdWcHBFRGFuZm5CM2hwbkt0U1hSN1h1ckEvT0ZoV3FveDByT2k5YzVIOEVMQ2dzcWdWOXJ2YkFMWTJVVC9xTnN4YW00WlpHeGw4L3k3Y1A1NHNodUtXUlVSMGNYbGF2c0RRUy9Ba0RMRzB3MWZEZW16REEwZ1pSTFF2ektneXdOR3VxdkoyUEV0dmcwV00vWkpuUERnWUhheFJnSVJ4R2RHTnBuVUdFdVdXck1JdUliamRxQlV4dldGb256aEV4NytCTWg5d1pSQ0h1MUxSalpqT3huYVJjMkpTRXoya251VGZERzFLRTN6T1oyNGJoNDVaMmtFS1c3VkwvVDYyRnFXNXdNYWlFMjZOMmFyTmg0aTF0WmJINXlwU2xNYnZFTzh0eW1lQ0krbXk3Y2FyU01HQVEyM3FWSFRiQjM4elZObnZvZUlrTFFkc2RuUThKSzV0aTk2aFJQUmxDS3pXN1NaenZmaHc3cFpnQkxqSEl1Q0lzRjBhTjkwTXlTRm1hTGVZNWJFYWM5K0RnWENsMmp4Um9ZZFNMcDBueVkybjdlSjlMN0F0THF4TzhNTURTZmhPRk1NRFN0a1FqRExDMHlJU0IzS1ZGSnd6a0xDMUtZU0JYYWRFS0F6bEtpMW9ZeUUxYTlNSkFUdEtTRUFaeWtaYU1NSkNEdEtTRWdkU2xKU2NNcEN3dFNXRWdWV25KQ2dNcFNrdGFHRWhOV3ZMQ1FFclNzaEFHVXBHV2pUQ1FnclNzaElIWXBXVW5ETVFzTFV0aElGWnAyUW9ETVVyTFdoaUlUVnIyd2tCTTBsaVl3cEQyNFhuWHZhU3hNQU1sRFl2b2dwWEd3aHFveGZYQlN0UHJ3emJPaThOMHBYVjltdE40aVl3MVIxc2FDd3VUVm1rc0xGd09TbU5oWVFOcHRjWHJMQ3g4YXVFNFdGajR6TXhXeHNMaTRGcS9ZV0Z4d0Mwc01saFlaT3ppbnJDd09DajFtMG56QXlaSVN2MUdDeXRHS1FiVGxlLzZqUmEySHFrZ1REZDJJZmtxWVNveWRqRlNZWmpqMUdMK21vT09HK0gvcGgxem5GS21XL09EblRCMXAvWEdjNEdZZHRCNDVpcHU4STdhc0g3RVp4cVlPcVhZL2lyZlhoajF2ZXN3ZFQ0N0YzYVJvSmxob0tHZ0MveTM3WWNiVHYyVUI2NndkVkRoS1hYcG1CMlE4eUxUWTdNTE5LbUNOT00vVER6dzFGUmsvQW9BQVAvL0gvY3NBUTg1L2FFQUFBQUFTVVZPUks1Q1lJST0=" rel="lightbox">
-                                                            <img src="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUd3QUFBQnNDQVlBQUFDUFpsZk5BQUFGRzBsRVFWUjRuT3lkLzNIYk5oVEhZVjBIYUNlb2ZGM0FuYUR5QkxVbXNEUkJ6aE1rbnNET0JKWW1pRE9CbVEzcy8rTXp2WUUzVVBDbEFBV2tSSWtFSDBEOGVKODdWS3BpZ29BK0JBaUN4Tk1mb29WLy9wNHU1TXYvTXMxayt0UDRwMUttUXFiMTYzdFp0RzBmSXJKT00vbHlMZE9WcU5jSlBNdTBsbWtsNi9YaHVXaWQyR3cyNHF6NW9hd1VLbk1uMDdSREhvVk1TMW5Ca3JSa3hNZzZYWWh0bldZZC9oeXl2c282ZlhGWkpodjJoTW1LUGNpWFJjOThVRUZJZTZRcUdDWHFBRVM5bWkzcUZLalBNcVRXVmhObUtjc0VsVnNOTFJRbHFndDhHcEFGdXNuTFVLVHRoS21qOEJ0Qm5zRklrM1ZDaTNvVC9WdFdrMkNrUWRoRVZleUJLTThITlZnSkFaeXpoc29DT1A4OXFlOXBkQ2JpOElocENLTkxVMS91RldHV3dVaURzR3NIK1k0dGpmb2dCRUZJZzdDWm83ekhsRFoxbE8vbzBpYU84eDlMMm44Tzh4NVZtbXRoWU96dTBRV2pTZk1oRFBpVzVtTUlQb28wQ1BOMWZlRlQyb3VuL1hpWEJtR0ZyNTBKZjlKOFRwTjVsUVpoYXg4N01uQXU3Zlc5eE94RTZYSWZEYnhKbTZoSjIyZlhPMnJnbzZYZE9zNi9pUmRwZXRDeGRMbVRGcHhLVTNPYWhhdjhXM0F1clJLbXVwRGtwRW5td24vdjRWVGFibGl2anNpa3BLa1o5a3VSa0xUYWRSaExJOFdKdEwwTFo1WkdDcm0wZ3pNZExJMFVVbW10VTFNc2pSUXlhVWZuRWxrYUtTVFNUazcrc2pSU0JrdnJORnZQMGtnWkpLM3o3UldXUm9xMXRGNzN3MWdhS1ZiU2V0L0FaR21rOUpabWRjZVpwWkhTUzVyMUl3SXNqWlRPMGdZOTA4SFNTT2trYmZCRE9DeU5sSlBTU0o2YVltbWtISlZHOXBnYlN5T2xWUnJwYzRrc2paU0Qwc2dmSkdWcHBFRGFuZm5CM2hwbkt0U1hSN1h1ckEvT0ZoV3FveDByT2k5YzVIOEVMQ2dzcWdWOXJ2YkFMWTJVVC9xTnN4YW00WlpHeGw4L3k3Y1A1NHNodUtXUlVSMGNYbGF2c0RRUy9Ba0RMRzB3MWZEZW16REEwZ1pSTFF2ektneXdOR3VxdkoyUEV0dmcwV00vWkpuUERnWUhheFJnSVJ4R2RHTnBuVUdFdVdXck1JdUliamRxQlV4dldGb256aEV4NytCTWg5d1pSQ0h1MUxSalpqT3huYVJjMkpTRXoya251VGZERzFLRTN6T1oyNGJoNDVaMmtFS1c3VkwvVDYyRnFXNXdNYWlFMjZOMmFyTmg0aTF0WmJINXlwU2xNYnZFTzh0eW1lQ0krbXk3Y2FyU01HQVEyM3FWSFRiQjM4elZObnZvZUlrTFFkc2RuUThKSzV0aTk2aFJQUmxDS3pXN1NaenZmaHc3cFpnQkxqSEl1Q0lzRjBhTjkwTXlTRm1hTGVZNWJFYWM5K0RnWENsMmp4Um9ZZFNMcDBueVkybjdlSjlMN0F0THF4TzhNTURTZmhPRk1NRFN0a1FqRExDMHlJU0IzS1ZGSnd6a0xDMUtZU0JYYWRFS0F6bEtpMW9ZeUUxYTlNSkFUdEtTRUFaeWtaYU1NSkNEdEtTRWdkU2xKU2NNcEN3dFNXRWdWV25KQ2dNcFNrdGFHRWhOV3ZMQ1FFclNzaEFHVXBHV2pUQ1FnclNzaElIWXBXVW5ETVFzTFV0aElGWnAyUW9ETVVyTFdoaUlUVnIyd2tCTTBsaVl3cEQyNFhuWHZhU3hNQU1sRFl2b2dwWEd3aHFveGZYQlN0UHJ3emJPaThOMHBYVjltdE40aVl3MVIxc2FDd3VUVm1rc0xGd09TbU5oWVFOcHRjWHJMQ3g4YXVFNFdGajR6TXhXeHNMaTRGcS9ZV0Z4d0Mwc01saFlaT3ppbnJDd09DajFtMG56QXlaSVN2MUdDeXRHS1FiVGxlLzZqUmEySHFrZ1REZDJJZmtxWVNveWRqRlNZWmpqMUdMK21vT09HK0gvcGgxem5GS21XL09EblRCMXAvWEdjNEdZZHRCNDVpcHU4STdhc0g3RVp4cVlPcVhZL2lyZlhoajF2ZXN3ZFQ0N0YzYVJvSmxob0tHZ0MveTM3WWNiVHYyVUI2NndkVkRoS1hYcG1CMlE4eUxUWTdNTE5LbUNOT00vVER6dzFGUmsvQW9BQVAvL0gvY3NBUTg1L2FFQUFBQUFTVVZPUks1Q1lJST0=" class="screenshot-thumbnail" />
-                                                        </a>
+                                                        <div class="screenshot-container">
+                                                            <div class="screenshot">
+                                                                <a href="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUd3QUFBQnNDQVlBQUFDUFpsZk5BQUFGRzBsRVFWUjRuT3lkLzNIYk5oVEhZVjBIYUNlb2ZGM0FuYUR5QkxVbXNEUkJ6aE1rbnNET0JKWW1pRE9CbVEzcy8rTXp2WUUzVVBDbEFBV2tSSWtFSDBEOGVKODdWS3BpZ29BK0JBaUN4Tk1mb29WLy9wNHU1TXYvTXMxayt0UDRwMUttUXFiMTYzdFp0RzBmSXJKT00vbHlMZE9WcU5jSlBNdTBsbWtsNi9YaHVXaWQyR3cyNHF6NW9hd1VLbk1uMDdSREhvVk1TMW5Ca3JSa3hNZzZYWWh0bldZZC9oeXl2c282ZlhGWkpodjJoTW1LUGNpWFJjOThVRUZJZTZRcUdDWHFBRVM5bWkzcUZLalBNcVRXVmhObUtjc0VsVnNOTFJRbHFndDhHcEFGdXNuTFVLVHRoS21qOEJ0Qm5zRklrM1ZDaTNvVC9WdFdrMkNrUWRoRVZleUJLTThITlZnSkFaeXpoc29DT1A4OXFlOXBkQ2JpOElocENLTkxVMS91RldHV3dVaURzR3NIK1k0dGpmb2dCRUZJZzdDWm83ekhsRFoxbE8vbzBpYU84eDlMMm44Tzh4NVZtbXRoWU96dTBRV2pTZk1oRFBpVzVtTUlQb28wQ1BOMWZlRlQyb3VuL1hpWEJtR0ZyNTBKZjlKOFRwTjVsUVpoYXg4N01uQXU3Zlc5eE94RTZYSWZEYnhKbTZoSjIyZlhPMnJnbzZYZE9zNi9pUmRwZXRDeGRMbVRGcHhLVTNPYWhhdjhXM0F1clJLbXVwRGtwRW5td24vdjRWVGFibGl2anNpa3BLa1o5a3VSa0xUYWRSaExJOFdKdEwwTFo1WkdDcm0wZ3pNZExJMFVVbW10VTFNc2pSUXlhVWZuRWxrYUtTVFNUazcrc2pSU0JrdnJORnZQMGtnWkpLM3o3UldXUm9xMXRGNzN3MWdhS1ZiU2V0L0FaR21rOUpabWRjZVpwWkhTUzVyMUl3SXNqWlRPMGdZOTA4SFNTT2trYmZCRE9DeU5sSlBTU0o2YVltbWtISlZHOXBnYlN5T2xWUnJwYzRrc2paU0Qwc2dmSkdWcHBFRGFuZm5CM2hwbkt0U1hSN1h1ckEvT0ZoV3FveDByT2k5YzVIOEVMQ2dzcWdWOXJ2YkFMWTJVVC9xTnN4YW00WlpHeGw4L3k3Y1A1NHNodUtXUlVSMGNYbGF2c0RRUy9Ba0RMRzB3MWZEZW16REEwZ1pSTFF2ektneXdOR3VxdkoyUEV0dmcwV00vWkpuUERnWUhheFJnSVJ4R2RHTnBuVUdFdVdXck1JdUliamRxQlV4dldGb256aEV4NytCTWg5d1pSQ0h1MUxSalpqT3huYVJjMkpTRXoya251VGZERzFLRTN6T1oyNGJoNDVaMmtFS1c3VkwvVDYyRnFXNXdNYWlFMjZOMmFyTmg0aTF0WmJINXlwU2xNYnZFTzh0eW1lQ0krbXk3Y2FyU01HQVEyM3FWSFRiQjM4elZObnZvZUlrTFFkc2RuUThKSzV0aTk2aFJQUmxDS3pXN1NaenZmaHc3cFpnQkxqSEl1Q0lzRjBhTjkwTXlTRm1hTGVZNWJFYWM5K0RnWENsMmp4Um9ZZFNMcDBueVkybjdlSjlMN0F0THF4TzhNTURTZmhPRk1NRFN0a1FqRExDMHlJU0IzS1ZGSnd6a0xDMUtZU0JYYWRFS0F6bEtpMW9ZeUUxYTlNSkFUdEtTRUFaeWtaYU1NSkNEdEtTRWdkU2xKU2NNcEN3dFNXRWdWV25KQ2dNcFNrdGFHRWhOV3ZMQ1FFclNzaEFHVXBHV2pUQ1FnclNzaElIWXBXVW5ETVFzTFV0aElGWnAyUW9ETVVyTFdoaUlUVnIyd2tCTTBsaVl3cEQyNFhuWHZhU3hNQU1sRFl2b2dwWEd3aHFveGZYQlN0UHJ3emJPaThOMHBYVjltdE40aVl3MVIxc2FDd3VUVm1rc0xGd09TbU5oWVFOcHRjWHJMQ3g4YXVFNFdGajR6TXhXeHNMaTRGcS9ZV0Z4d0Mwc01saFlaT3ppbnJDd09DajFtMG56QXlaSVN2MUdDeXRHS1FiVGxlLzZqUmEySHFrZ1REZDJJZmtxWVNveWRqRlNZWmpqMUdMK21vT09HK0gvcGgxem5GS21XL09EblRCMXAvWEdjNEdZZHRCNDVpcHU4STdhc0g3RVp4cVlPcVhZL2lyZlhoajF2ZXN3ZFQ0N0YzYVJvSmxob0tHZ0MveTM3WWNiVHYyVUI2NndkVkRoS1hYcG1CMlE4eUxUWTdNTE5LbUNOT00vVER6dzFGUmsvQW9BQVAvL0gvY3NBUTg1L2FFQUFBQUFTVVZPUks1Q1lJST0=" rel="lightbox">
+                                                                    <img src="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUd3QUFBQnNDQVlBQUFDUFpsZk5BQUFGRzBsRVFWUjRuT3lkLzNIYk5oVEhZVjBIYUNlb2ZGM0FuYUR5QkxVbXNEUkJ6aE1rbnNET0JKWW1pRE9CbVEzcy8rTXp2WUUzVVBDbEFBV2tSSWtFSDBEOGVKODdWS3BpZ29BK0JBaUN4Tk1mb29WLy9wNHU1TXYvTXMxayt0UDRwMUttUXFiMTYzdFp0RzBmSXJKT00vbHlMZE9WcU5jSlBNdTBsbWtsNi9YaHVXaWQyR3cyNHF6NW9hd1VLbk1uMDdSREhvVk1TMW5Ca3JSa3hNZzZYWWh0bldZZC9oeXl2c282ZlhGWkpodjJoTW1LUGNpWFJjOThVRUZJZTZRcUdDWHFBRVM5bWkzcUZLalBNcVRXVmhObUtjc0VsVnNOTFJRbHFndDhHcEFGdXNuTFVLVHRoS21qOEJ0Qm5zRklrM1ZDaTNvVC9WdFdrMkNrUWRoRVZleUJLTThITlZnSkFaeXpoc29DT1A4OXFlOXBkQ2JpOElocENLTkxVMS91RldHV3dVaURzR3NIK1k0dGpmb2dCRUZJZzdDWm83ekhsRFoxbE8vbzBpYU84eDlMMm44Tzh4NVZtbXRoWU96dTBRV2pTZk1oRFBpVzVtTUlQb28wQ1BOMWZlRlQyb3VuL1hpWEJtR0ZyNTBKZjlKOFRwTjVsUVpoYXg4N01uQXU3Zlc5eE94RTZYSWZEYnhKbTZoSjIyZlhPMnJnbzZYZE9zNi9pUmRwZXRDeGRMbVRGcHhLVTNPYWhhdjhXM0F1clJLbXVwRGtwRW5td24vdjRWVGFibGl2anNpa3BLa1o5a3VSa0xUYWRSaExJOFdKdEwwTFo1WkdDcm0wZ3pNZExJMFVVbW10VTFNc2pSUXlhVWZuRWxrYUtTVFNUazcrc2pSU0JrdnJORnZQMGtnWkpLM3o3UldXUm9xMXRGNzN3MWdhS1ZiU2V0L0FaR21rOUpabWRjZVpwWkhTUzVyMUl3SXNqWlRPMGdZOTA4SFNTT2trYmZCRE9DeU5sSlBTU0o2YVltbWtISlZHOXBnYlN5T2xWUnJwYzRrc2paU0Qwc2dmSkdWcHBFRGFuZm5CM2hwbkt0U1hSN1h1ckEvT0ZoV3FveDByT2k5YzVIOEVMQ2dzcWdWOXJ2YkFMWTJVVC9xTnN4YW00WlpHeGw4L3k3Y1A1NHNodUtXUlVSMGNYbGF2c0RRUy9Ba0RMRzB3MWZEZW16REEwZ1pSTFF2ektneXdOR3VxdkoyUEV0dmcwV00vWkpuUERnWUhheFJnSVJ4R2RHTnBuVUdFdVdXck1JdUliamRxQlV4dldGb256aEV4NytCTWg5d1pSQ0h1MUxSalpqT3huYVJjMkpTRXoya251VGZERzFLRTN6T1oyNGJoNDVaMmtFS1c3VkwvVDYyRnFXNXdNYWlFMjZOMmFyTmg0aTF0WmJINXlwU2xNYnZFTzh0eW1lQ0krbXk3Y2FyU01HQVEyM3FWSFRiQjM4elZObnZvZUlrTFFkc2RuUThKSzV0aTk2aFJQUmxDS3pXN1NaenZmaHc3cFpnQkxqSEl1Q0lzRjBhTjkwTXlTRm1hTGVZNWJFYWM5K0RnWENsMmp4Um9ZZFNMcDBueVkybjdlSjlMN0F0THF4TzhNTURTZmhPRk1NRFN0a1FqRExDMHlJU0IzS1ZGSnd6a0xDMUtZU0JYYWRFS0F6bEtpMW9ZeUUxYTlNSkFUdEtTRUFaeWtaYU1NSkNEdEtTRWdkU2xKU2NNcEN3dFNXRWdWV25KQ2dNcFNrdGFHRWhOV3ZMQ1FFclNzaEFHVXBHV2pUQ1FnclNzaElIWXBXVW5ETVFzTFV0aElGWnAyUW9ETVVyTFdoaUlUVnIyd2tCTTBsaVl3cEQyNFhuWHZhU3hNQU1sRFl2b2dwWEd3aHFveGZYQlN0UHJ3emJPaThOMHBYVjltdE40aVl3MVIxc2FDd3VUVm1rc0xGd09TbU5oWVFOcHRjWHJMQ3g4YXVFNFdGajR6TXhXeHNMaTRGcS9ZV0Z4d0Mwc01saFlaT3ppbnJDd09DajFtMG56QXlaSVN2MUdDeXRHS1FiVGxlLzZqUmEySHFrZ1REZDJJZmtxWVNveWRqRlNZWmpqMUdMK21vT09HK0gvcGgxem5GS21XL09EblRCMXAvWEdjNEdZZHRCNDVpcHU4STdhc0g3RVp4cVlPcVhZL2lyZlhoajF2ZXN3ZFQ0N0YzYVJvSmxob0tHZ0MveTM3WWNiVHYyVUI2NndkVkRoS1hYcG1CMlE4eUxUWTdNTE5LbUNOT00vVER6dzFGUmsvQW9BQVAvL0gvY3NBUTg1L2FFQUFBQUFTVVZPUks1Q1lJST0=" class="screenshot-thumbnail" />
+                                                                </a>
+                                                            </div>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </li>