Personal Website with Django how to deal with images scaling/cropping

Using Django Getting Started
1

Hi guys, I’m new to django and I’m creating a personal website about myself as web dev.
I would like to use a CMS because the website is bilingual and I would like to manage images and crop them accordingly.

The thing is I worked with Umbraco as CMS and that had a very nice image cropping tool, or even typo3 had a good one. I would like to ‘upload’ images to my server and then crop them like I want for different resolutions…

At the moment I’m not sure, if I should switch to Umbraco, Typo3 or another CMS. They simply have more features but I guess you can’t really compare django with.

I would need some guidance form a good dev, how you would handle this situation.

  1. I need the website bilingual or trilingual and get that somehow working
  2. I would like to upload images and set a crop …

I used django because its quite easy to use and I’m only an advanced dev and I’m not sure if I would be able to complete the project with Typo3 or Umbraco CMS.

I know there exists django CMS but it doesn’t look too polished to me and I’m not sure if I would like to use it. I tried the demo version and it doesn’t feel very intentional.

How would you guys handle this thing? I try to improve myself as dev and have therefore tried to use django and came quite far with it at the time. I now you can create a image uploader but there is also a plugin for cropping images but I don’t know it thats the best solution.

Has anyone some guidance for me?

Kind regards,
elPablo

2

First, decide what your ultimate objective is for this project. The “Why am I spending time doing this?” question.

If you’re doing this to learn Django - great. Just be aware that there’s a lot of work going this route before you get anywhere close to the result achievable using any of Ubraco, Typo3, Wordpress, Drupal, Mambo, Liferay, etc, etc, etc. Django itself is not in anything near the same category as those applications.

(Side note: In addition to Django CMS, there’s also Wagtail that is a Django-based CMS - but again, neither of those products are in the same class as the previous list.)

On the other hand, if you’re looking for a full website - if your objective is the final result and not the learning process to get there - then go with one of the full-featured CMSs. You’re going to be a lot happier, sooner, that way.

3

I was looking for a thumbnail package myself a couple of months ago with similar requirements for resolutions and cropping, sorl-thumbnail is updated for Django 4.0 and has many features, might be worth looking at if you decide to go down that path. Examples — sorl-thumbnail 12.8.1.dev2+gf62c617 documentation

4

I can’t say much about CMS, but here are my thoughts on supporting multiple languages:

Django supports this natively with the internationalization and localization system. It’s fairly easy to use, but it does impose certain requirements on the programmers (as opposed to the program), because you will need to remember to use it for every string that is shown to the user. Otherwise you will have a mixed display of various languages.

One way to use this is to write the website in one language (usually English) and then provide translations to every other language being supported. However, this can become a bit of a headache when you have messages that might change after translations have been provided. In my opinion it is smarter to use message keys and then provide translations of that key to every language, including English. For example, let’s say you have a form submit button

<input type="submit" value="{% trans 'Submit' %}">

and for every other language you have provided a translation of “Submit”. Now you want to change this to “Submit form” to be a bit clearer what is going to happen. Now you will have to go through the translations of every language and change the translation key to “Submit form”. Except maybe you used the translation for “Submit” in another context, for example for submitting a ticket. Oh bother…

So instead, it is probably best to use a message key

<input type="submit" value="{% trans 'form.submit' %}">

and then translate this for every language into whatever makes sense. If you use this method consistently across the entire website, you can easily support any number of languages and the cost of adding a language is pretty much just the cost of writing the translations for all message keys. Things get more complicated when you have images with text in them, in which case you will need to tell your CMS which language version of the image to load. Can’t help you there, sorry.

5

I think Wagtail has matured to a point where it is a valid and compelling competitor to Wordpress and Drupal. (I have no experience with the other CMSes listed above.) It certainly has internationalization and image handling features that match everything elPablo is asking for.

(I built CMS-based sites with Drupal for more than a decade, but have been building with Wagtail for about four years now. I have never regretted making the switch – it’s a really great developer experience!)

6

Seriously? What does Wagtail have that compares at all to the Drupal “Views” module, in terms of usability and capabilities of producing custom pages in a “through-the-web” environment? I would love to find something like that in the Django / Python ecosystem.

7

I’ll cede the point that there is nothing in the Wagtail ecosystem like Drupal’s Views – and I’ll also admit that I missed Views a lot when I first made the switch. But every time I build a site with Wagtail and get to a point where I think “this would have been a Drupal View,” I end up writing a short method on a Wagtail page model to achieve the same result, and if I need AJAX-y stuff on the front end like Views gives you, I add HTMX to the mix. (It sounds like more work than it is.) I’ve come to like this approach more than Drupal Views, because everything is expressed in code, rather than living in the database.

As for “producing custom pages in a ‘through-the-web’ environment”, I’ve got no answer there. If you have CMS users that need that level of “point-and-click to slice-and-dice content and generate new pages” power, Drupal might very well still be the best option.

8

Don’t get me wrong, I fundamentally agree with you here. (As demonstrated by the fact that I spend significantly more time here than in any Drupal / Wordpress / etc related forum.)

But this is what I was really getting to in my original post. The OP should personally evaluate what their goals and objectives are before deciding on a direction.

9

There was a nice chat here with the team from UC Berkeley, about their experience moving to Wagtail from Drupal, and why.

Django at UC Berkeley - Mohammed Shamma and Matthew Newton | Django Chat

1 Like
10

Right now as it looks like I would like to keep it rather single snd therefore stick simply with django …

Hmm, I found out how to upload now a image, but a problem which I has us that, I cano’t change the imager name of the image, Hs anyone an idea how I change the image name? At the moment I upload_to=apetezier and I would like a second name like apezitzer 1 or 2 … Is that somethow possible? ASlready googled this but not was able to found a good solution …

Kind regards,
ElPablo

11

Can you be more specific or detailed about what the issue is?

Generally speaking, the file name of a file as it is stored, after it has been uploaded, shouldn’t matter. You will be accessing that file object through the FileField reference. It tracks the physical name of the file as it exists in your storage backend. You can maintain a separate field for a name for that file that you may want to use to make available to the user.

12

Yeah that was my idea ti create a new name field and link to the original link field … Have you any idea how to do that? already have a charfield but I don’y how to connect the charfeld to the image name , Kind regards elPablo

13

They are implicitly connected by being in the same model instance.

If you have:

class SomeModel...:
   data_field = ...
   name_field = ...
   image_field = ...

Then that name_field is “connected” to that image_field by virtue of being in the same instance of SomeModel.

14

hey elpablo,
I’m new to Django myself - so rate my answer with caution :smiley:

But I recently built something myself to crop images, maybe my code can help you :slight_smile:

def form_valid(self, form):
        request_form = form.save(commit=False)
        request_user_id = self.request.user.id
        request_form.user_id = request_user_id
        request_form.save()
        form.save()
        SIZE = 450


        if request_form.image:
            img = Image.open(request_form.image.path)

            width = img.size[0]
            height = img.size[1]
            if width < SIZE or height < SIZE:
                self.request.session["error"] = "Dein Bild ist zu klein!"
                return HttpResponseRedirect("/img/new-img/")

            if width <= height:
                faktor = width / SIZE
                size_height = height / faktor
                size_width = SIZE
                size_thumbnail = size_width, size_height
                img.thumbnail(size_thumbnail,Image.LANCZOS)

                crop_top = (size_height - SIZE) / 2
                crop_top_end = crop_top + SIZE
                cropbox = (0, crop_top, SIZE, crop_top_end)
                new_img = img.crop(cropbox)
                new_img.save(request_form.image.path)
            else:
                faktor = height / SIZE
                size_width = width / faktor
                size_height = SIZE
                size_thumbnail = size_width, size_height
                img.thumbnail(size_thumbnail,Image.LANCZOS)
                crop_left = (size_width - SIZE) / 2
                crop_left_end = crop_left + SIZE
                cropbox = (crop_left, 0, crop_left_end, SIZE)
                new_img = img.crop(cropbox)
                new_img.save(request_form.image.path)
        
        return HttpResponseRedirect(self.success_url)
15

@KenWhitesell
Could you me help a bit furhter, the code from the user @ReneS29 doesn’t really sense to me, or I’m simply to dumb to understand it …

This is my actual code `

class Images(models.Model):
name = models.CharField(max_length=50)
hotel_Main_Img = models.ImageField(upload_to=‘appetizer/’)
title = models.CharField(max_length=100)`

But I get allways the error the image title is empty even if I define it … I guess I’m really close to the solution but I can’t the answer.

In your code I wonder why you have 3 field variables, I mean I got a Image and I want a Image name, nothing more, but maybe this is necessary?

Kind regards,
ElPablo

16

Let’s take a step back for a moment. Why do you think you need to keep a separate name for this file? I’m wondering if this is an X-Y situation.
(Or, I may be confusing this topic with a different thread…)

Either way, we will need to see the view you’re trying to use.

17

I will some ugly image field names have, and I don’t want to insert into python template “Ugly_image-from_2022_createbycanon” … I could rename every image buy I thought it would be smarter simply to add a field to it where the image simply can access to it. Like ugly image name to → party_yesterday for exmaple … That would sense in my eyes doesn’t it?

simply still understand 3 models that I have to use tho 1 image and 1 image name.
I try now all solutions threw but nothings seems like to work. Even if a slush the database my old Cookiebanner Model still shows up in django, that is also something …

Maybe a I ask ruse question and ask you if you have Discord ? Simply for faster writing …

Kind regards Daniel

18

That’s not what goes into the template - at least not directly. For example, if you’re using the image in an img tag, you reference the source for the image using the url attribute of the file field.

So, you ask:

To which I answer, no - you’re worried about something that really shouldn’t concern you at all.

How much other work have you done with Django at this point? It might help to understand what your background is at this point to be able to provide you with the most useful information to you.

Sorry, no. I’m on here intermittently, between taking care of other things.

19

Hey I understand what ur saying.
I have now a new Problem. No mattter is I delete the postgres database or I flush the python manage.py I cannot delete my image folder. I can’t event open it it says:

ProgrammingError at /admin/website/bilder/
relation "website_bilder" does not exist
LINE 1: SELECT COUNT(*) AS "__count" FROM "website_bilder"
                                          ^
Request Method:	GET
Request URL:	http://localhost:4000/admin/website/bilder/
Django Version:	4.0.3
Exception Type:	ProgrammingError
Exception Value:	
relation "website_bilder" does not exist
LINE 1: SELECT COUNT(*) AS "__count" FROM "website_bilder"

I have no idea what I has done wrong, could you help me here a bit furhter, I bruteoforce every solution found on google but with no effort so far …

I tried to clean a clean model without image but I’m not able to do that at the moment.

The thing is I could start from scratch but I created everything with docker and docker compose and that would be a big thing to do again … i event got back to a recent commit and deleted some processed python fiiles but nothing worked so far :frowning:
Kind Regrdas,
Daniel

20

Please help me to help you.

How much other work have you done with Django at this point? It might help to understand what your background is at this point to be able to provide you with the most useful information to you.