Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#2008 closed New feature (fixed)

Allow customizing the Piwik logo

Reported by: matt Owned by: SteveG
Priority: critical Milestone: 1.5 - Piwik 1.5
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description (last modified by matt)

We are probably not going to implement theming in the near future (#177), but a cheap and useful alternative would be to just allow 'logo' theming of Piwik. We would still mention 'Piwik' all over the place (too much work to do otherwise), but customizing the logo would be good enough for a start.

See also #1148

Implementation proposal: currently the Piwik logo is a text, but it could be changed to an image. There are a few places where it is displayed:

  • Login screen
  • Product header (reporting UI and Admin UI)
  • Error message (ie. set date=test in the URL)

There could be a new section in the 'General Settings' admin tab, that would allow to upload a .PNG or .JPG logo picture.

The image would then be resized to fit the product header, resized for the login screen and error messages (slightly different sizes).

The admin setting could be:

(x) Use Piwik Logo
( ) Use Custom logo <img src='show current logo'> (when this is clicked, also display "Upload logo" which would overwrite the current logo if any).

The setting could be recorded in the piwik_option table. The logo would be renamed to custom-logo.png so there is no need to record the 'custom logo filename'.

Change History (21)

comment:1 Changed 3 years ago by matt (mattab)

  • Description modified (diff)

comment:2 Changed 3 years ago by matt (mattab)

  • Description modified (diff)

comment:3 Changed 3 years ago by matt (mattab)

  • Milestone changed from Feature requests to 1.x - Piwik 1.x

In the code a few places are calling Piwik::getLogoPath() as a helper returning the icon path.

I think we should implement this as soon as possible, as many users need it and edit Piwik manually after each update, resulting in frustration and risk to delay updates.

Proposal

  • New Admin setting under General Settings
  • Customize logo, upload new logo
  • Customize the message to replace the "Piwik is a collaborative project [...]" and link to their own websites.

We can't remove all occurrences of "Piwik" in the software, since in many help pages or help texts, we link to piwik.org. But in these cases it makes sense and it is actually going to help users in most cases.

The goal here is to really allow web agencies, corporations and anyone to easily customize their daily experience with their main logo.

Are there other easy things we can add in that would help?

comment:4 Changed 3 years ago by matt (mattab)

  • Priority changed from normal to critical

increasing priority since it has so many requests + is easy to implement.

if anyone wants to contrib a patch please shout

comment:5 Changed 3 years ago by vipsoft (robocoder)

Since we can't remove all occurrences of "Piwik", perhaps we could add a caption below any third-party logo that gets used, e.g., "Powered by Piwik".

comment:6 Changed 3 years ago by matt (mattab)

sounds good

comment:7 Changed 3 years ago by matt (mattab)

A very cool side effect would be that the Piwik Mobile App also displays the custom logo in the App. We couldn't change the logo on the Android or Apple marketplace, but the in-app logo could show the custom logo.

The logo would be uploaded in a static URL (eg. http://piwik/themes/logo.png) and the Mobile App and other consumers could load & cache it. Maybe we could have an API function to return the logo URL (API.getLogoUrl() ?)

comment:8 Changed 3 years ago by SteveG (sgiehl)

  • Owner set to SteveG

comment:9 Changed 3 years ago by SteveG (sgiehl)

  • Milestone changed from 1.x - Piwik 1.x to 1.5 - Piwik 1.5

comment:10 Changed 3 years ago by SteveG (sgiehl)

  • Resolution set to fixed
  • Status changed from new to closed

(In [4816]) fixes #2008 added possibility to define custom logo

comment:11 Changed 3 years ago by matt (mattab)

(In [4817]) Refs #2008

  • keep uploaded logo ratio after resizing, just force the height (so it works for high logos, or wide logos)

comment:12 Changed 3 years ago by vipsoft (robocoder)

re: comment:5 I was thinking more along the lines of adding "powered by piwik" as text below the rescaled logo using imagettftext.

Otherwise good work. I would recommend adding a nonce or token auth check to prevent someone from arbitrarily uploading a new logo.

comment:13 Changed 3 years ago by matt (mattab)

  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:14 Changed 3 years ago by matt (mattab)

(In [4820]) Refs #2008

  • When custom logo, don't link the logo on login screen to piwik.org - add credits in footer, very discreet as to maximise the branding experience while still crediting us

comment:15 Changed 3 years ago by matt (mattab)

adding powered by piwik on the logo itself would lower the interestingness of customizing logo. Adding credits on login page + many mentions of Piwik across products credit us properly :) Just in Email & PDF maybe we could add a little "Powered by Piwik" in the footer...

comment:16 Changed 3 years ago by matt (mattab)

(In [4821]) Kuddos Anthon for spotting this Refs #2008

comment:17 Changed 3 years ago by matt (mattab)

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:18 Changed 3 years ago by vipsoft (robocoder)

The reason I suggested it was because there's a disconnect between a custom logo and what the user will see in the documentation and translations.

comment:19 Changed 3 years ago by vipsoft (robocoder)

(In [4823]) refs #2008 - check that file_uploads is enabled, temp file exists, allow image/gif, and use PIWIK_DOCUMENT_ROOT where applicable

comment:20 Changed 3 years ago by JulienM (JulienMoumne)

Some users are reporting in http://forum.piwik.org/read.php?2,78325 the logo has a fixed http:// url which is not appropriate for accessing Piwik in https. Is it related to this ticket ?

Note: See TracTickets for help on using tickets.