Nov 04, 2016 Branding - Changing the Logo on the Cloud Foundry UAA Login Page
Let's say that you just deployed your shiny new Cloud Foundry at work, and are showing it off to your friends. As you and your friends hover over the login page, Bill from Corporate Compliance happens to stop by - he cranes his neck, sees your monitor, and says "Hey, that's great! Where's our logo? Our logo should be on that login page." He whips out his phone and sends you the company standard 200 x 200 png file and says "Yeah, if you could get that logo updated by the end of the week, that'd be greeeat."
Aha! You see it:
#Branding/Customization login.branding.company_name: description: This name is used on the UAA Pages and in account management related communication in UAA login.branding.product_logo: description: This is a base64 encoded PNG image which will be used as the logo on all UAA pages like Login, Sign Up etc. login.branding.square_logo: description: This is a base64 encoded PNG image which will be used as the favicon for the UAA pages login.branding.footer_legal_text: description: This text appears on the footer of all UAA pages login.branding.footer_links: description: These links appear on the footer of all UAA pages. You may choose to add multiple urls for things like Support, Terms of Service etc. example: linkDisplayName: linkDisplayUrl
So you look at the image file. You look at your Cloud Foundry manifest. You look again at the spec. You look again at the image file.
"How do I cram this file into my manifest? Can I just paste in the contents of the file?" you wonder aloud. You type
cat logo.png, hoping this will be a 5 minute copy/paste job. You frantically hit the mute button as your terminal starts beeping like R2D2 on caffeine pills. Nope!
I'll spare you the rest of the narrative. As specified in the spec file, you need to provide a base64 encoded image in your manifest. To generate this, run the following command:
cat logo.png | base64 | tr -d '\n' > logo.png.base64
To break this down: the
base64 command encodes the PNG file, but generates newline characters, which we do not want in our manifest - we want this all in 1 line. Therefore, the
tr command trims these out.
Once you've done this, simply copy the one-liner from the resulting file and paste it into your manifest. If you do it in VIM, for example, it'll look like this (ellipses added for readability):
... login: branding: company_name: Stark & Wayne product_logo: /9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAUDBAQE...
Once you paste your logo, if you arrow up a line, VIM will look like this due to the obscenely long line of text you have just pasted:
... login: asset_base_url: /resources/trustedanalytics branding: company_name: Stark & Wayne @ @ @ @ @ @ @ ...
Save your manifest and deploy. Your site is now compliant! For now.