Enhanced Personas

In explaining exactly what a Persona was in my last post, I mentioned that a Persona contains two images – a header and a footer. I also indicated that these images are very large – 3000 pixels wide. You may wonder why that is. Personas is designed to do one thing; take an image and put it in the upper right corner of the browser. It doesn’t resize or scale the image. If you resize your browser very wide, you just see more of the image on the left hand side. That 3000 pixels number is a completely arbitrary number that is designed to be the maximum you will resize your browser.

This architecture creates problems.

  • The file sizes of the images can be very large.
  • If you have a repetitive image, you have to cut and paste it to make it 3000 pixels wide.
  • If you want to use an existing image, you’ll have to do something to convert it to 3000 pixels wide.
  • You can’t guarantee that anything appears in the upper left corner.
  • You can’t have more than one background image.

All of these problems have already been solved by CSS, but none of the CSS to do anything to background images is available in Personas. That’s where the Enhanced Personas feature of Personas Interactive comes in.

Enhanced Personas adds additional attributes to the Personas JSON that gives you all the things that CSS backgrounds have to offer. This includes multiple background images! Here are the attributes we’ve added:

backgroundImage
Specifies the URL of an image or multiple images that will be used for the background. Multiple images are separated by a comma. The images are drawn from right to left, so the left most image appears on top. We aren’t using the actual CSS syntax here, so don’t put url(‘…’) around the images.
backgroundPosition
Specifies the position of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundRepeat
Specifies the repeat of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundSize
Dpecifies the size of the images in backgroundImage using standard CSS rules. These rules are separated by a comma.

backgroundColor
Whereas accentcolor in the original Personas specification is used for both the titlebar and the background of the browser, we allow you to specify just the background color. It is never used for the titlebar. If you specify both a backgroundColor and an accentcolor, accentcolor is used for the titlebar, and backgroundColor is used for the background of the browser.

textShadow
One of the other areas that causes problems with Personas is the area of text shadows. We’ve provided an additional attribute to let you control the text shadow. Personas determines the color of the text shadow to use for your Persona by computing the luminance of the textcolor specified in your Persona.

let luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;

If the luminance is less than or equal to 110, it makes your text shadow light, otherwise it makes your text shadow dark. We’ve made textShadow an attribute that you can specify, and you can give it three values: dark, bright or none. You can experiment with these three values to see which one makes your text look good on your Persona.

Summing it all up

So what does all this give us? The ability to create a Persona that takes full advantage of CSS. If you hover over the preview images below with Personas Interactive installed, you’ll see examples of Enhanced Personas in action. Each of these Enhanced Personas has an image on the left, an image on the right and a repeating image for the background. If you install them, you can resize the browser and see that the images stay in both corners of the browser. I’ve deliberately placed breaks in the background image so you can see the repeat. You’ll also notice that I’ve used a different text shadow option for each of the Personas. See if you can figure out which value I used.

Enhanced Persona Demo 1attachPersona(document.getElementById(“enhancedpersonademo1-preview”));Enhanced Persona Demo 2attachPersona(document.getElementById(“enhancedpersonademo2-preview”));Enhanced Persona Demo 3attachPersona(document.getElementById(“enhancedpersonademo3-preview”));Enhanced Persona Demo 4attachPersona(document.getElementById(“enhancedpersonademo4-preview”));

Enhanced Persona Demo 5attachPersona(document.getElementById(“enhancedpersonademo5-preview”));Enhanced Persona Demo 6attachPersona(document.getElementById(“enhancedpersonademo6-preview”));Enhanced Persona Demo 7attachPersona(document.getElementById(“enhancedpersonademo7-preview”));Enhanced Persona Demo 8attachPersona(document.getElementById(“enhancedpersonademo8-preview”));

Here are some other things to keep in mind with Enhanced Personas.

backgroundImage is a required attribute. This means that even if you use the other attributes, if backgroundImage isn’t specified, they won’t be honored. The only exception to this is textShadow.

You can create an Enhanced Persona that works with Firefox out of the box. Just specify both a headerURL and a backgroundImage. Personas Interactive users will get the Enhanced Persona.

For our next installment, we’re going to talk about the hallmark of Personas Interactive, Interactive Themes and Interactive Personas.

This is part three in my series about Personas Interactive from Brand Thunder. If you missed the first two, they are Introduction to Personas Interactive and What is a Persona?

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *

One thought on “Enhanced Personas