[Feature]: Branding #1634
Replies: 15 comments 11 replies
-
|
Maybe this would help to get businesses interested in Immich as well, which has potential to bring along donations and dev support? |
Beta Was this translation helpful? Give feedback.
-
|
I've implemented custom logos by mounting files under |
Beta Was this translation helpful? Give feedback.
-
|
The real trick to this would be to sed their SVG pre build. I actually just forked this, and will be setting up something locally to do a merge of fork with my logos and SVG, and the updated code. |
Beta Was this translation helpful? Give feedback.
-
|
I've managed to change the logo in the Webapp via Theme Settings > Custom CSS (see below for code) but this does not affect the app sadly. It would be nice, if this would be added, if it would affect the apps logo as well. Custom CSS: img[alt="Immich Logo"] {
content: url("https://exmaple.com/logo.svg");
}
h1[class*="font-immich-title"] {
text-indent: -9999px;
}
h1[class*="font-immich-title"]:before {
text-indent: 0;
float: left;
content: "CUSTOM TITLE HERE";
/* you could also change the font here */
} |
Beta Was this translation helpful? Give feedback.
-
|
I've just tried this css but it doesn't seem to work... |
Beta Was this translation helpful? Give feedback.
-
What are you referring to when you say custom title? What areas? Different areas seem to use different resources and strings. Login screen? The top corner of the page? The dialogue boxes that pop up with the Immich logo? Or the splash when loading the site as a web app on a mobile device? |
Beta Was this translation helpful? Give feedback.
-
|
Just to add more information here: It seems like the logo in the app is loaded here: immich/mobile/lib/shared/ui/immich_app_bar.dart Lines 151 to 158 in 6e78655 It would be nice for custom branding if a custom logo URI (https, local path or both?) would be returned by the |
Beta Was this translation helpful? Give feedback.
-
|
Could this be expanded to include rebranding the mobile app logo? |
Beta Was this translation helpful? Give feedback.
-
|
SOLVED:
The logo at the login screen is encoded in: Copy, backup, and replace the following files: The inline logos are 11in x 3.6972 in. The string for the stock logo is below. Formatted as Minified Data URI. You can use something such as svgviewer.dev to upload your SVG, and get this data. Once you do reaplce the string below in YOU MUST ALSO UPLOAD THE BROTLI AND GZIP VERSIONS OF YOUR FILE. You may need to restart Immich to see the changes and force your browser to not use caches for a moment. Once you do it works. Additionally, these method also works well for dark/light mode, and will work for mobile browsers. The native app is separate of course, but that is my next go. Minified Data URI of immich-logo.svg |
Beta Was this translation helpful? Give feedback.
-
|
As already stated by @pl4nty ...
... the random strings in the file names (e.g. |
Beta Was this translation helpful? Give feedback.
-
|
random strings can be normalised on reverse proxy i suppose |
Beta Was this translation helpful? Give feedback.
-
|
That is true, but for now as far as current branding.
I did see some strings that can be captured as variables. Ideally something
like auk/sed then takes that and also can be used to rename a set of files
provided by user to build on.
It's still annoying though if you want to change the logo that way, but in
the meantime.
…On Wed, Jul 31, 2024, 12:33 Leon Schmidt ***@***.***> wrote:
As already stated by @pl4nty <https://github.com/pl4nty> ...
but they contain a build hash eg immich-logo.18dcdcef.svg.
... the random strings in the file names (e.g. C4PioLn8) indicate that
the files originate from the frontend build process (e.g. have been
compressed or cropped programmatically). These strings and thus the file
names might change in future version of Immich.
—
Reply to this email directly, view it on GitHub
<#1634 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AECFWIGYQ2VEXEXPOANYT6LZPE3YLAVCNFSM6AAAAABDCY6SSSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRQGQ3TOMY>
.
You are receiving this because you commented.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
The images stored within JSON files as an SVG URI. There are a handful of files elsewhere, as posted above, and some others since some other updated, but the files you need to modify with your own SVG URI can be found using grep.
|
Beta Was this translation helpful? Give feedback.
-
|
These are the files I have modified and replaced. Some of the SVGs also call for different resolution. Post build they will have some additional suffix to them as mentioned in one of the earlier posts. You can try to play with that CSS and see what might change what there. I didn't spend too much time to identify what changes each area, but did notice that the different areas had unique resources for things that seemed to use the same resource, but actually would be a slightly different SVG resolution. **mobile-assets**
immich-logo-1024.svg
immich-logo-3072.png
immich-logo-android-adaptive-icon.png
immich-logo-inline-dark.png
immich-logo-inline-dark.svg
immich-logo-inline-light.png
immich-logo-inline-light.svg
immich-logo-w-bg-android.png
immich-logo-w-bg.png
immich-logo.svg**web-src-lib-assets**
immich-logo-inline-dark.svg
immich-logo-inline-light.svg
immich-logo-stacked-dark.svg
immich-logo-stacked-light.svg
immich-logo.svg**web-static**
apple-icon-180.png
favicon-16.png
favicon-32.png
favicon-48.png
favicon-96.png
favicon-144.png
favicon.ico
favicon.png
immich-logo-no-bg.svg
immich-logo.svg
manifest-icon-192.maskable.png
manifest-icon-512.maskable.png |
Beta Was this translation helpful? Give feedback.
This comment has been minimized.
This comment has been minimized.
-
|
I have a business use case and Immich would be a great solution. The lack of custom branding is the only thing holding me back at the moment. If custom logo was added as a feature we'd definitely integrate into what we're working on and would certainly be incentivized to contribute to the project to support it. Everywhere I looked the recommendations were Immich for photo galleries and there's definitely a wider application beyond home personal use! |
Beta Was this translation helpful? Give feedback.
-
|
Agreed, we are using for business to organize and share couple thousand pics daily, and the platform works great. Would gladly pay more for custom branding. |
Beta Was this translation helpful? Give feedback.
-
|
I was really liking @MexHigh custom CSS solution above for its simplicity and upgrade-proof-ness. I don't need app logo change and modifying a bunch of files in the Docker container is a no-go for me (as is anything that takes more than 10 minutes). The move to svg logo in a recent version of Immich broke the solution but the below seems to work well enough. Perhaps someone has a more robust/elegant way of doing this. Edit: for v. 132.3 it would need to be something like this (although it is now blocking the link and I need to rewrite for media queries, again... edits welcome): |
Beta Was this translation helpful? Give feedback.
-
|
Anybody have a better way of doing this? |
Beta Was this translation helpful? Give feedback.
-
|
Thanks prohtex Updated: |
Beta Was this translation helpful? Give feedback.
-
This is wonderful, thank you @AverTry. The only improvement I could see would be if the "Memories" text is also clickable, increasing the click area for the logo so it is easier to navigate to home. |
Beta Was this translation helpful? Give feedback.
-
|
Your welcome, Here's an updated version, that includes the click space on Memories and some other bits. |
Beta Was this translation helpful? Give feedback.
-
|
wonderful work, seems to be good! when i insert the code, the horizontal grey divider-line after the upper header is going right through our logo... where can i change that? |
Beta Was this translation helpful? Give feedback.
-
|
Noticing some other snafus with the hacky thing I came up with and @AverTry solution:
|
Beta Was this translation helpful? Give feedback.
This comment has been minimized.
This comment has been minimized.
-
|
This is still working in the latest version (released a few days ago) but I am still having minor issues (like the logo overlaying on top of "x selected" text when you select more than one item. I ended up disabling the code and I think we just have to wait until @alextran1502 creates a supported method with a setting in the admin panel. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Feature detail
Having the ability to rebrand the app background, logos, and images would be nice to make it unique for home use.
Platform
Web
Beta Was this translation helpful? Give feedback.
All reactions