Add ability to upload images to tools via markdownx drag interface.

Author: destos

poetry.lock

@@ -27,6 +27,8 @@ gunicorn = "^19.9"
 whitenoise = "^4.1"
 django-allauth = { git = "https://github.com/pennersr/django-allauth.git", commit = "f70cb3d" }
 #django-allauth = "^0.39.1"
+django-imagekit = "^4.0"
+pillow = "^5.4"
 
 [tool.poetry.dev-dependencies]
 ipdb = "^0.12"

pyproject.toml

@@ -31,6 +31,7 @@
     "qr_code",
     "memoize",
     "tagulous",
+    "imagekit",
     # Toolhub
     "borrowing.apps.BorrowingConfig",
     "toolhub",
@@ -169,3 +170,5 @@
     "markdown.extensions.toc",
     "markdown.extensions.wikilinks",
 ]
+
+MARKDOWNX_UPLOAD_CONTENT_TYPES = ("image/jpeg", "image/png")

toolhub/settings/base.py

@@ -12,3 +12,17 @@ body, #main-wrapper {
 .socialaccount_provider {
     font-size: 1.5rem;
 }
+
+.card-tool-img {
+    max-height: 120px;
+    overflow: hidden;
+}
+
+.card-tool-img img {
+    width: 100%;
+    height: auto;
+}
+
+.content img {
+    max-width: 100%;
+}

toolhub/static/main.css

@@ -8,7 +8,7 @@
         <title>Toolhub - {% block head_title %}{% endblock %}</title>
         <!-- BS4 CDN for now. -->
         {% block head_css %}
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
         {% block main_css %}<link rel="stylesheet" href="{{ static('main.css') }}">{% endblock %}
         <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-LRlmVvLKVApDVGuspQFnRQJjkv0P7/YFrw84YYQtmYG4nK8c+M+NlmYDCv0rKWpG" crossorigin="anonymous">
         {% endblock %}
@@ -41,9 +41,9 @@
     </section>
     {% block body_javascript %}
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    {% endblock %}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+        {% endblock %}
 {% endblock %}
     </body>
 </html>

toolhub/templates/layouts/base.jinja

@@ -7,7 +7,7 @@
     <div class="container">
         {% block page_header %}
         {#- you can use page_header to place header based navigation -#}
-        <h3 class="mb-0 text-light">{% block sub_header %}Change Me{% endblock %}</h3>
+        <h3 class="mb-0 text-light mr-auto">{% block sub_header %}Change Me{% endblock %}</h3>
         {% endblock %}
         {% block sub_actions %}{% endblock %}
     </div>

toolhub/templates/layouts/sub_header_base.jinja

@@ -12,7 +12,9 @@
 <div {{ classes }}>
     {% set photo = tool.cover_photo %}
     {% if photo %}
-        <img class="card-img-top" src="{{ photo.file.file }}" alt="{{ photo.title|default('tool photo') }}">
+        <div class="card-img-top card-tool-img">
+            <img src="{{ photo.card_thumbnail.url }}" alt="{{ photo.title|default('tool photo') }}">
+        </div>
     {% endif %}
     <div class="card-body">
         <h5 class="card-title"><a href="{{ tool_link }}">{{ tool.title }}</a> </h5>

toolhub/templates/macros/tool_card.jinja

@@ -1,9 +1,11 @@
+from braces.forms import UserKwargModelFormMixin
 from crispy_forms.layout import Button, Div, Field, Fieldset, Reset, Submit
 from django import forms
+from django.urls import reverse
 from django.utils.translation import ugettext_lazy as _
 
 from toolhub_auth.models import User
-from tools.models import ClearancePermission, UserTool
+from tools.models import ClearancePermission, ToolPhoto, UserTool
 from utils.forms import CrispyFormMixin
 
 
@@ -19,7 +21,9 @@ def layout_args(self, helper):
             Fieldset(
                 None,
                 Field("title"),
-                Field("description", css_class="h-100", label_class="", field_class=""),
+                # attempts
+                # css_class="h-100", label_class="", field_class="", help_text="test"
+                Field("description"),
                 Field("taxonomies"),
                 Field("visibility"),
                 Field("clearance"),
@@ -34,6 +38,24 @@ class Meta:
         fields = ("title", "description", "taxonomies", "visibility", "clearance")
         model = UserTool
 
+    def post_super_init(self):
+        super().post_super_init()
+        self.update_markdown_upload_path()
+
+    def update_markdown_upload_path(self):
+        if hasattr(self, "instance") and self.pk_field:
+            reverse_kwargs = {self.pk_field: self.instance.pk}
+        else:
+            reverse_kwargs = {}
+        attrs = self.fields["description"].widget.attrs
+        attrs.update(
+            {
+                "data-markdownx-upload-urls-path": reverse(
+                    "tools:upload_tool_photo", kwargs=reverse_kwargs
+                )
+            }
+        )
+
 
 class UserToolUpdateForm(UserToolCreateForm):
     action_button_label = _("Update tool")
@@ -116,3 +138,27 @@ def save(self):
         )
         removed_users = init_users - edited_users
         self.instance.permissions.filter(cleared_user_id__in=removed_users).delete()
+
+
+class UploadToolPhotoForm(UserKwargModelFormMixin, forms.ModelForm):
+    """
+    Optionally takes a tool to make association
+    Also set the `uploading_user`?
+    """
+
+    class Meta:
+        model = ToolPhoto
+        fields = ("file",)
+
+    def __init__(self, *args, **kwargs):
+        # move file uploaded to what the form expects
+        kwargs["files"]["file"] = kwargs["files"]["image"]
+        self.tool = kwargs.pop("tool", None)
+        return super().__init__(*args, **kwargs)
+
+    def save(self, commit=True):
+        # This will set the photo tool to null if none was passed
+        self.instance.tool = self.tool
+        self.instance.uploading_user = self.user
+        # NOTE: get title from file name temporarily
+        return super().save(commit=commit)

tools/forms.py

@@ -0,0 +1,24 @@
+# Generated by Django 2.1.7 on 2019-03-12 06:26
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('tools', '0007_auto_20181106_1734'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='toolphoto',
+            name='file',
+            field=models.ImageField(upload_to='%Y/%m/'),
+        ),
+        migrations.AlterField(
+            model_name='toolphoto',
+            name='tool',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='photos', to='tools.UserTool'),
+        ),
+    ]

tools/migrations/0008_auto_20190312_0126.py

@@ -15,13 +15,15 @@
 from django.urls import reverse
 from django.utils.translation import ugettext_lazy as _
 from django_extensions.db.models import TimeStampedModel, TitleDescriptionModel
+from imagekit import ImageSpec
+from imagekit.models import ImageSpecField
+from imagekit.processors import ResizeToFill, ResizeToFit
 from markdownx.models import MarkdownxField
 from tagulous.models import TagField, TagTreeModel
 
-from utils.models import StateMachineMixin
-
 from tools.exceptions import ToolAvailabilityException, ToolClearanceException
 from tools.querysets import ToolHistoryQuerySet, UserToolQuerySet
+from utils.models import StateMachineMixin
 
 
 class ToolTaxonomy(TagTreeModel):
@@ -228,14 +230,38 @@ def __str__(self):
         return f"{self.cleared_by_user} cleared {self.cleared_user} ({self.tool})"
 
 
+class ToolCardThumbnailSpec(ImageSpec):
+    processors = [ResizeToFill(320, 160)]
+    format = "JPEG"
+    options = {"quality": 80}
+
+
+class ToolGalleryThumbnailSpec(ToolCardThumbnailSpec):
+    processors = [ResizeToFill(120, 120)]
+
+
+class ToolContentThumbnailSpec(ToolCardThumbnailSpec):
+    processors = [ResizeToFit(825, 620)]
+
+
 class ToolPhoto(TimeStampedModel):
-    tool = models.ForeignKey(UserTool, on_delete=models.CASCADE, related_name="photos")
+    tool = models.ForeignKey(
+        UserTool, on_delete=models.CASCADE, related_name="photos", blank=True, null=True
+    )
     uploading_user = models.ForeignKey(
         settings.AUTH_USER_MODEL, on_delete=models.PROTECT, related_name="uploaded_photos"
     )
-    file = models.FileField()
+    file = models.ImageField(upload_to="%Y/%m/")
     title = models.CharField(max_length=255, blank=True)
 
+    # Thumbnails
+    card_thumbnail = ImageSpecField(source="file", spec=ToolCardThumbnailSpec)
+    gallery_thumbnail = ImageSpecField(source="file", spec=ToolGalleryThumbnailSpec)
+    content_thumbnail = ImageSpecField(source="file", spec=ToolContentThumbnailSpec)
+
     class Meta:
         ordering = ("-created",)
         get_latest_by = "created"
+
+    def __str__(self):
+        return f"{self.tool} - {self.title}"