Logo issues

[allanaaa]

The logo is not appearing as expected - not centred and probably doesn't need any whitespace either. This is a bit confusing because I realize the option is provided for both a background image ("banner") and the foreground linked image ("logo") but we don't give any instruction on how to utliize those, and what the options are. I imagine people will want to upload a logo for sure, but maybe not bother with a banner.

http://dev.omeka.org/amayer/amayer-s/omeka-s/s/my-omeka-s-site/page/welcome

In Firefox:

And the same in Chrome:

My settings:

I think this is a consequence of the "Banner height" setting - header.medium and header.tall are calling height numbers, but there is no header.small effect.

At any rate, the "Banner height" is actually the height of the whole container, including resizing the logo, whether there is a banner image selected or not.

(The hard-coded numbers should also appear in the settings interface - "Medium (168px tall)" and "Tall (240px tall)" - or in the expandable guidance.)

There appears to be a "-19.2px" setting that is reducing the top, left, and bottom margins of the logo image and pushing the logo to the left of the window. I think that should be removed in any case.

And a.site-title has a 24px padding - for my purposes it should be remvoed so I can have a full coverage logo. Maybe we could include a setting to position the logo - centre, stretched, or left?

So:

• Add in the ".small" setting
• Include the pixel heights in the interface
• Remove the negative margin
• Rename "Banner height" to "Header height" and include help text to explain that
• Provide some logo styling options for common uses

[kimisgold]

I agree that we should provide more guidance on the distinction between "logo" and "banner". The intention was that the logo would be a smaller asset, like mainly the wordmark ("digital collections") in your example with the rest of the image more appropriate as the "banner", which actually functions more as a header background image.

In common usage, logos are not expected to bleed to edges, hence the padding on a.site-title. In your use case, I would encourage separating the wordmark from the rest of the background image. We could certainly provide more sizing options for the background image.

I agree that replacing "banner" with "header background" would provide more clarity, and replacing its other usages with the header context as well.

[kimisgold]

All references to "banner" are now replaced by "header background". I've also provided more guidance on the logo and header background field descriptions. The banner height options have pixel values included, and I've provided a default height for small.

What are some logo styling options you envisioned?

[kimisgold]

@allanaaa I'm closing out some issues and wanted to draw attention back to this. Has your original issue been addressed?

[allanaaa]

Okay - I can see the header height is set to 120px in my theme settings, but the actual image height is 100px and there's also a 20px black border. Is that border mandatory? The setting should probably say 100px/148px/220px to reflect space available for the image.

And it looks like the logo is constrained to 52px in height, which I guess is based on the header height - if the header is 100, the logo is 52; if the header is 148, the logo is 100, etc.? Can we put that information in the interface, in the expandable field descriptions?

I'd suggest:

Logo
An image asset representing your project or institution. This will be linked to your site's home page and include a margin around all edges. It can be as wide as the page, but it will be shrunk to 48px shorter than the header height set below.

Header height
The header image selected above will be stretched or shrunk to this height. The logo will be displayed at this height minus 48px.

Or something like that?

[kimisgold]

The header's CSS is set to include the border in the height calculations (box-sizing: border-box). I can change it to exclude it (box-sizing: content-box).

I don't want to conflate the logo with the header background, so I'd like to avoid the language about the logo being able to be as wide as the header. Would something like "The logo will always be constrained by the header's maximum height." be sufficient?

Regarding the header height, the description is inaccurate because the header background image is set to fill the width of the header. It will be cropped by the set header height.

[allanaaa]

I think if the logo can be 100% width, people may want to use that? Maybe they have a really long institution name.

The more precise we can be helping people figure out what size images they need to make, the better. Leaving people to figure it out on their own by inspecting the code of their own site is what we're trying to avoid.

The header background is set to "cover !important", so:

• If they set an image wider than it is tall (expected), it's cropping the width, while fitting 100% vertically. It appears to be hard-coded "left" so the right hand edge of the image is always visible and the left side is cropping as needed.
• If they set an image taller than it is wide (unexpected but possible), it'll crop height depending on the vertical setting, and display the image at 100% of the browser width. This is the only place where the vertical-affixing comes into play, right?

[kimisgold]

Sure, we can include the margin calculation in the logo description. "The logo height will always be 48px less than the designated header height." For institutions with long names, I would expect them to have a logo that scales for different usages. If it is a long project name, there is also the possibility of not using an image and allowing the site title to be text that wraps instead.

Regarding the header background, maybe we should better set the expectation that it is a decorative image that will be cropped and resized in response to viewport size. For the background sizing, "cover" means that the background image will be sized to leave no white space. For wide images, they can still be cropped, especially with the header having a maximum height. The anchoring is there to set a preference if they want to maximize the visibility of an element of their background. I have a mountain landscape image example showing the three different anchoring options to demonstrate.