image search pages

main.py

@@ -35,14 +35,13 @@ def search():
 
         items = search_data.get('items', [])
         for item in items:
-            # Extract thumbnail if available, often found in `item['pagemap']['cse_thumbnail'][0]['src']`
             thumbnail = item.get('pagemap', {}).get('cse_thumbnail', [{}])[0].get('src', '/path-to-default-thumbnail.jpg')
 
             search_results.append({
                 'title': item.get('title'),
                 'link': item.get('link'),
                 'snippet': item.get('snippet'),
-                'thumbnail': thumbnail  # Add this line to include the thumbnail URL
+                'thumbnail': thumbnail
             })
 
         total_results = int(search_data.get('searchInformation', {}).get('totalResults', 0))
@@ -94,6 +93,5 @@ def search_images():
 
     return render_template('image_results.html', query=query, image_results=image_results, page=page, total_pages=total_pages)
 
-
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=80)

static/styles_results.css

@@ -132,4 +132,10 @@ h1 {
   font-size: 0.9rem;
 }
 
+.navigation-button {
+  margin-top: 1rem;
+  margin-right: 0.5rem;
+  width: auto; /* Allow the width to auto-adjust based on content */
+  border-radius: 6px;
+}
 

templates/image_results.html

@@ -24,6 +24,16 @@
         </div>
       {% endfor %}
     </div>
+    <div class="navigation-buttons">
+      {% if page > 1 %}
+        <button onclick="location.href='{{ url_for('search_images', query=query, page=1) }}'" class="search-button navigation-button">First</button>
+        <button onclick="location.href='{{ url_for('search_images', query=query, page=page-1) }}'" class="search-button navigation-button">&#60; Prev</button>
+      {% endif %}
+
+      {% if page < total_pages %}
+        <button onclick="location.href='{{ url_for('search_images', query=query, page=page+1) }}'" class="search-button navigation-button">Next &#62;</button>
+      {% endif %}
+    </div>
   </div>
 </body>
 </html>