Repository: svthalia/concrexit

Issue:
Allow for (optional) different partner logos on the home page
### Is your feature request related to a problem? Please describe.
Due to some partner logos being fully/partially opaque, some logos on the front page become unrecognizable when greyed out (such as the Picnic one).

### Describe the solution you'd like
Allow for a separate, optional, picture to be uploaded to a partner, which will be used on the front page. If not set, the original logo should be used. By doing this, the logo on the front page could have more transparent parts, resulting in a more accurate outline.

When hovering the logo, this alternate image can still show so that the only thing that needs to be done internally is add an extra field and modify the loaded picture on the front page.

### Motivation
By doing this, the logos become more visible and may make partners happier (and my OCD). Plus, fully opaque logos make the front page look slightly broken.

### Describe alternatives you've considered
I've also considered simply uploading the transparent version as the main logo of a partner. However, if the part that was made transparent had a defining color for the logo, and the user is using a dark theme, the logo will look different on the partner page itself (such as for Picnic one).

### Additional context
Screenshot of what it currently looks like:
![image](https://user-images.githubusercontent.com/6312298/117536108-89e2ed00-aff9-11eb-8e80-3c2b59ed1c8d.png)



Discussion:
What is the reason for not choosing the alternative exactly? What is wrong with a slightly different looking logo on the partner page based on the theme?
I think this would be a good option actually!
Or we could even specify an (optional) mask path image. And I think svg support would be nice as well
What is a mask path image?
> What is a mask path image?

https://css-tricks.com/clipping-masking-css/ we could give a mask file that can be used for the monotone image. Then for picnic, we could use the original logo on hover, but apply the mask to hide the letters when its not hovered
Really looks like just adding another image is much simpler to me.
> What is the reason for not choosing the alternative exactly? What is wrong with a slightly different looking logo on the partner page based on the theme?

Because it's not the actual logo of the company, which I find rather unprofessional (and a bit ugly as well). This is what the Picnic logo looks like in dark theme that way:
![image](https://user-images.githubusercontent.com/6312298/117646260-d827f580-b18b-11eb-9e34-a883b887141d.png)
Usually the corporate identity should handle this kind of situations, if they don't we have to find a solution. 
The whole reason we apply the greyscale filter is because some company logos are white and/or grey.

<img width="283" alt="Screenshot 2021-05-10 at 12 52 15" src="https://user-images.githubusercontent.com/1799914/117648587-b0865c80-b18e-11eb-865a-257cc3ea01ec.png">

I understand that it may not always look perfect. But I don't believe we can make this perfect unless every company gives us a greyscale image that we can make black/white based on the theme currently running on the website. But they won't do that because they don't have a flexible logo.

Adding a separate image for the homepage banner is a solution, but it will probably not really solve the problem in the end. There will always be logos that will not work with the theme.
Yeah I'm aware that it's not a perfect solution, but I think this should at least improve the situation, and if this would be implemented I would be happy at least.

Resolving patch:
diff --git a/website/partners/admin.py b/website/partners/admin.py
--- a/website/partners/admin.py
+++ b/website/partners/admin.py
@@ -35,6 +35,7 @@ class PartnerAdmin(admin.ModelAdmin):
                     "link",
                     "company_profile",
                     "logo",
+                    "alternate_logo",
                     "site_header",
                     "is_active",
                     "is_main_partner",
diff --git a/website/partners/migrations/0026_partner_alternate_logo.py b/website/partners/migrations/0026_partner_alternate_logo.py
new file mode 100644
--- /dev/null
+++ b/website/partners/migrations/0026_partner_alternate_logo.py
@@ -0,0 +1,19 @@
+# Generated by Django 4.0.7 on 2022-10-05 18:11
+
+from django.db import migrations, models
+import thaliawebsite.storage.backend
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('partners', '0025_migrate_public_folders'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='partner',
+            name='alternate_logo',
+            field=models.ImageField(blank=True, help_text='If set, this logo will be shown on the frontpage banner. Please use files with proper transparency.', null=True, storage=thaliawebsite.storage.backend.get_public_storage, upload_to='partners/logos/'),
+        ),
+    ]
diff --git a/website/partners/models.py b/website/partners/models.py
--- a/website/partners/models.py
+++ b/website/partners/models.py
@@ -19,10 +19,22 @@ class Partner(models.Model):
     slug = models.SlugField(unique=True)
     link = models.CharField(max_length=255, blank=True, validators=[URLValidator()])
     company_profile = HTMLField(blank=True)
+
     logo = models.ImageField(
         upload_to="partners/logos/",
         storage=get_public_storage,
     )
+
+    alternate_logo = models.ImageField(
+        upload_to="partners/logos/",
+        storage=get_public_storage,
+        blank=True,
+        null=True,
+        help_text=_(
+            "If set, this logo will be shown on the frontpage banner. Please use files with proper transparency."
+        ),
+    )
+
     site_header = models.ImageField(
         upload_to="partners/headers/",
         storage=get_public_storage,


Test patch: