Show grouped bucket blobs in a gallery

Added blob_group and blob_file classes and various utilities functions

Author: firepol

blobs/blob_file.py

@@ -0,0 +1,126 @@
+import logging
+import os
+import re
+from dataclasses import dataclass, InitVar
+from google.cloud.storage import Blob
+from blobs.file_type import FileType
+
+logging.basicConfig(level=logging.INFO)
+log = logging.getLogger()
+
+IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png']
+resized_pic_re = re.compile(r'(?P<group_name>.*)(-(?P<width>\d+)x(?P<height>\d+))')
+
+
+@dataclass
+class BlobFile:
+    original_blob: InitVar[Blob]
+    public_url: str = None
+    name: str = None
+    group_name: str = None
+    file_type: FileType = None
+    width: int = None
+    height: int = None
+
+    def __post_init__(self, original_blob):
+        self.public_url = original_blob.public_url
+        self.name = original_blob.name
+        self.group_name = get_group_name(self.name)
+        log.debug(f'BLOB: {self.name}; GROUP: {self.group_name}')
+        try:
+            self.file_type, self.width, self.height = get_file_info(self.name)
+        except:
+            log.exception(f'Error trying to initialize blob_file for {self.name}')
+            raise
+
+
+def get_group_name(name):
+    """
+    Of a given wordpress file name (available in different sizes), return a group name to identify all images
+    belonging to the same group
+
+    >>> get_group_name('media/2013/01/foo-150x150.png')
+    'media/2013/01/foo'
+
+    >>> get_group_name('media/2013/01/foo-150x150')
+    'media/2013/01/foo'
+
+    >>> get_group_name('media/2013/01/foo.png')
+    'media/2013/01/foo'
+
+    >>> get_group_name('media/2013/01/foo150x150')
+    'media/2013/01/foo150x150'
+
+    >>> get_group_name('media/2016/08/xk-detect-x380.jpg')
+    'media/2016/08/xk-detect-x380'
+    """
+    prefix, extension = os.path.splitext(name)
+
+    matches = resized_pic_re.search(prefix)
+    if matches is None:
+        return prefix
+    group_name = matches.group('group_name')
+    return group_name
+
+
+def get_file_info(name):
+    """
+    Of a given wordpress file name (available in different sizes), return FileType, Width and Heigth
+
+    >>> get_file_info('foo-1024x768')
+    (<FileType.Large: (1024,)>, 1024, 768)
+
+    >>> get_file_info('foo-768x1024')
+    (<FileType.Large: (1024,)>, 768, 1024)
+
+    >>> get_file_info('foo-150x150.png')
+    (<FileType.LittleSquare: (150,)>, 150, 150)
+
+    >>> get_file_info('foo-140x10000')
+    (<FileType.Small: (1,)>, 140, 10000)
+
+    >>> get_file_info('foo.png')
+    (<FileType.Original: (10000,)>, None, None)
+
+    >>> get_file_info('foo.pdf')
+    (<FileType.Other: (0,)>, None, None)
+
+    >>> get_file_info('foo-bar-x380.jpg')
+    (<FileType.Original: (10000,)>, None, None)
+
+    >>> get_file_info('foo-288x300.png')
+    (<FileType.Thumbnail: (300,)>, 288, 300)
+    """
+
+    prefix, extension = os.path.splitext(name)
+
+    matches = resized_pic_re.search(prefix)
+
+    if matches is None and extension in IMAGE_EXTENSIONS:
+        return FileType.Original, None, None
+    elif matches is None and extension not in IMAGE_EXTENSIONS:
+        return FileType.Other, None, None
+
+    matched_width = matches.group('width')
+    matched_height = matches.group('height')
+    if matched_width == '' or matched_height == '':
+        return FileType.Original, None, None
+
+    width = int(matched_width)
+    height = int(matched_height)
+
+    file_type = None
+
+    if width == 1024 or height == 1024:
+        file_type = FileType.Large
+    elif width == 768 or height == 768:
+        file_type = FileType.MediumLarge
+    elif width == 624 or height == 624:
+        file_type = FileType.Medium
+    elif width == 300 or height == 300:
+        file_type = FileType.Thumbnail
+    elif width == 150 and height == 150:
+        file_type = FileType.LittleSquare
+    elif width < 150 or height < 150:
+        file_type = FileType.Small
+    return file_type, width, height

blobs/blob_group.py

@@ -0,0 +1,57 @@
+from dataclasses import dataclass, InitVar
+from typing import Dict, List
+
+from google.cloud.storage import Blob
+
+from blobs.blob_file import BlobFile
+from blobs.file_type import FileType, get_fallback
+
+
+@dataclass
+class BlobGroup:
+    name: str
+    files: Dict[FileType, BlobFile] = None
+    thumbnail_url: str = None
+
+    def __init__(self, name: str):
+        self.name = name
+        self.files = dict()
+
+    def get_thumbnail(self):
+        return get_blob_version(300, self.files)
+
+
+def get_blob_version(max_size: int, blob_files: Dict[FileType, BlobFile]):
+    """
+    Return blob of maximum size, or the original, or None if the file is not an image
+    """
+
+    wished_file_type = FileType.Original
+    if max_size <= 150:
+        wished_file_type = FileType.LittleSquare
+    elif max_size <= 300:
+        wished_file_type = FileType.Thumbnail
+    elif max_size <= 624:
+        wished_file_type = FileType.Medium
+    elif max_size <= 1024:
+        wished_file_type = FileType.Large
+
+    available_file_types = [b.file_type for b in blob_files.values()]
+    file_type = get_fallback(wished_file_type, available_file_types)
+    return blob_files[file_type]
+
+
+def get_dict_blob_group(blobs: List[Blob]):
+    """
+    From a given list of blobs, get a dictionary with keys = group names, values = BlobGroups
+    """
+    result = dict()
+    for b in blobs:
+        blob_file = BlobFile(b)
+        group_name = blob_file.group_name
+        if group_name not in result:
+            result[group_name] = BlobGroup(group_name)
+        group = result[group_name]
+        group.files[blob_file.file_type] = blob_file
+        group.thumbnail_url = group.get_thumbnail().public_url
+    return result

blobs/file_type.py

@@ -0,0 +1,33 @@
+from enum import Enum
+from typing import List
+
+
+class FileType(Enum):
+    Other = 0,  # This is for other file types, e.g. PDF, ZIP etc.
+    Small = 1,
+    LittleSquare = 150,
+    Thumbnail = 300,
+    Medium = 624,
+    MediumLarge = 768,
+    Large = 1024,
+    Original = 10000,
+
+
+def get_fallback(wished: FileType, available: List[FileType]):
+    """
+    >>> get_fallback(FileType.Thumbnail, [FileType.LittleSquare, FileType.Thumbnail, FileType.Medium])
+    <FileType.Thumbnail: (300,)>
+    >>> get_fallback(FileType.Large, [FileType.Thumbnail, FileType.Medium, FileType.Large])
+    <FileType.Large: (1024,)>
+    >>> get_fallback(FileType.LittleSquare, [FileType.Small, FileType.LittleSquare, FileType.Original])
+    <FileType.LittleSquare: (150,)>
+    >>> get_fallback(FileType.Thumbnail, [FileType.Original])
+    <FileType.Original: (10000,)>
+    """
+
+    if wished in available:
+        return wished
+    for file_type in FileType:
+        if file_type.value >= wished.value and file_type.value in available:
+            return file_type
+    return available[0]

blueprints/admin.py

@@ -3,10 +3,11 @@
 from flask import Blueprint, render_template, abort, request, redirect, url_for, current_app, flash
 from flask_login import login_required
 
+from blobs.blob_group import get_dict_blob_group
 from datastore_queries import get_all_posts
 from datastore_queries_admin import *
 from utils_flask import set_global_config
-from utils_google_cloud_bucket import upload_to_bucket
+from utils_google_cloud_bucket import upload_to_bucket, get_all_bucket_blobs
 
 logging.basicConfig(level=logging.INFO)
 log = logging.getLogger()
@@ -101,7 +102,7 @@ def post_delete(post_id):
         abort(500)
 
 
-# UPLOAD
+# BUCKET
 
 ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
 
@@ -112,6 +113,7 @@ def allowed_file(filename):
 
 
 @admin.route('/upload', methods=['POST'])
+@login_required
 def upload_file():
     if 'file' not in request.files:  # check if the post request has the file part
         flash('No file part')
@@ -127,6 +129,14 @@ def upload_file():
         }
 
 
+@admin.route('/uploads/')
+@login_required
+def uploads():
+    bucket_blobs = get_all_bucket_blobs()
+    result = get_dict_blob_group(bucket_blobs)
+    return render_template('uploads.html', grouped_blobs=result)
+
+
 # ADMIN USERS
 
 @admin.route('/users/')

main.py

@@ -5,6 +5,7 @@
 from flask_login import LoginManager
 from jinja2 import evalcontextfilter
 from markupsafe import escape, Markup
+from slugify import slugify
 
 from configuration import LOCAL_DEVELOPMENT_MODE
 from user import User
@@ -42,6 +43,11 @@ def datetimeformat(value, format='%Y-%m-%d'):
     return value.strftime(format)
 
 
+@app.template_filter()
+def get_slug(value):
+    return slugify(value)
+
+
 @app.template_filter()
 @evalcontextfilter
 def nl2br(eval_ctx, value):

requirements.txt

@@ -7,4 +7,5 @@ Jinja2
 click
 oauthlib==3.0.1
 pyOpenSSL==19.0.0
-Flask-Login==0.4.1
+Flask-Login==0.4.1
+python-slugify

static/style.css

@@ -124,3 +124,7 @@ aside ul li a {
     color: #9f9f9f;
     text-decoration: none;
 }
+
+.wrapped {
+  word-wrap: break-word;
+}

templates/admin/uploads.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <title>Uploads | {{CONFIG['blog_name']}}</title>
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body class="bg-white">
+<div class="container-fluid">
+  <h1><a href="/admin/">Admin</a></h1>
+
+  <div class="row text-center text-lg-left">
+    {% for group_name, group in grouped_blobs.items() %}
+    <div class="col-lg-3 col-md-4 col-6">
+      <a href="javascript:void(0);" class="d-block mb-4 h-100" data-toggle="modal" data-target="#{{group_name|get_slug}}">
+        <img class="img-fluid img-thumbnail" src="{{group.thumbnail_url}}" alt="{{group_name|get_slug}}">
+      </a>
+    </div>
+    <div class="modal fade" id="{{group_name|get_slug}}" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">{{group_name}}</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body wrapped">
+            <p class="d-flex justify-content-center">
+              <img class="img-fluid img-thumbnail" src="{{group.thumbnail_url}}" alt="{{group_name|get_slug}}">
+            </p>
+            {% for file_type, blob in group.files.items() %}
+            <p>{{blob.file_type.name}}:<br/>
+              <a href="{{blob.public_url}}" target="_blank">{{blob.public_url}}</a>
+            </p>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+</body>
+</html>

utils_google_cloud_bucket.py

@@ -29,3 +29,12 @@ def upload_to_bucket(file):
     blob = bucket.blob(blob_name)
     blob.upload_from_file(file)
     return blob.public_url
+
+
+def get_all_bucket_blobs():
+    """Lists all the blobs in the bucket."""
+    settings = get_settings()
+    bucket_name = settings['blog_config']['google_cloud_bucket_name']
+    storage_client = storage.Client()
+    blobs = storage_client.list_blobs(bucket_name)
+    return list(blobs)