Project

General

Profile

Feature #9939

Campus branding widget

Added by Boone Gorges over 3 years ago. Updated almost 3 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
WordPress Plugins
Target version:
Start date:
2018-06-15
Due date:
% Done:

0%

Estimated time:

Description

Widget to be called something like 'CUNY Campus Branding'.

Should be a "multi-widget" - more than one instance allowed on a page.

On back end, it'll be a dropdown of campus names.

On the front end, the campus logo, linked to the campus home page.

List of campuses with brand guides: http://www2.cuny.edu/about/administration/offices/communications-marketing/university-identity/campus-identity/ Appropriate art will have to be rendered out of the PDFs (I guess?) and resized/resampled to an appropriate size for display. Widget should be tested to look decent against Twenty themes; pick the one with the widest widget area to choose the sample size for the image.

Widget should be available on all sites, so put it in either an mu-plugin or in a network-activated plugin.


Related issues

Related to CUNY Academic Commons - Feature #9940: CUNY OneSearch widgetResolved2018-06-15

History

#1 Updated by Boone Gorges over 3 years ago

#2 Updated by Chris Stein over 3 years ago

I started a Google Doc with images and links to each campus communications page if there is one.
https://docs.google.com/document/d/1CGPTB2O7-r73_Q8MsXvgqz8q33hHwKNudFY_PXGh-V8

I got about a third of the way through. I can finish it if someone doesn’t beat me to it.

A couple of notes:
  • We will need to come up with a standard size limit and
  • someone will have to resize all logos to fit within those dimensions
  • Some colleges have multiple versions. Do we want to offere more than one version for a college if available?
  • Some colleges don’t have pages with downloadable logos.
  • The Grad Center wants you to ask their permission before you use the logo

#3 Updated by Boone Gorges about 3 years ago

A first version of this is complete. I've attached a few screenshots.

For images, I started with the document provided by Chris, and dug through websites to find remaining images. Some campuses make this easy, and some do not. Wherever possible, I've chosen the image that they recommend as their default logo, and have abided by their standards for spacing, color, etc. In cases where the campus style guide recommends a transparent background, I've rendered the image over a white background instead, as we can't predict what various themes will do. Where possible, I've also provided HiDPI/retina-friendly images, and tried to optimize the images as much as reasonably possible without sacrificing visual quality. There is likely much room for improvement in terms of image selection and preparation, but what I've got in place is likely good for the first round.

There are currently some problems with cdev that prevent me from creating a test site where you can see all of the logos in action. Once that's resolved, I'll provide a link.

#4 Updated by Matt Gold about 3 years ago

Thanks, Boone -- this looks great. thank you! A few questions:

-- does the logo automatically link to the campus website? If not, would we want it to?
-- can you confirm that the placement/positioning of the widget in the sidebar could be adjusted by how the sidebar widgets are arranged? E.g. if someone wanted the logo to be further down in the sidebar, they could just put other widgets above it?
-- are the logos responsive? If not, and if that's not something we can fix now, is it something we should work for a second iteration?
-- am I right that site owners would not be able to control the size of the logo?

thanks in advance for your thoughts.

#5 Updated by Boone Gorges about 3 years ago

-- does the logo automatically link to the campus website? If not, would we want it to?

Yes, each logo links to the campus home page. Sorry, I forgot to mention that above.

-- can you confirm that the placement/positioning of the widget in the sidebar could be adjusted by how the sidebar widgets are arranged? E.g. if someone wanted the logo to be further down in the sidebar, they could just put other widgets above it?

Confirmed. It's a regular WordPress widget, so can be manipulated and placed like any other WP widget.

-- are the logos responsive? If not, and if that's not something we can fix now, is it something we should work for a second iteration?

It depends on what you mean by "responsive". I assume it means "mobile-friendly", but this can mean a number of things. In terms of layout, the widget obeys the theme's rules for how sidebars appear. So if a theme has the sidebar appear at the bottom of the page on a narrow screen, then these widgets will do so as well. In that sense, they are "responsive" by virtue of adapting as expected to responsive layouts (ie, layouts that change dynamically based on the width of the viewport). There's another sense of "responsive images" where smaller image assets are served when viewing on a small viewport, through the use of srcset or other techniques. I have not implemented this, because the images are small (300px) and are already fairly optimized, so the items loaded on desktop view are already quite small and mobile-friendly. If you have something else in mind for "responsive", please let me know.

-- am I right that site owners would not be able to control the size of the logo?

Correct. The images are set to fill the entire width of the sidebar, up to a maximum of 350px (the width of each logo). If someone really needs it to be smaller for some reason, custom CSS rules could be applied. I've intentionally tried in most cases to choose logos that are roughly horizontally oriented - ie, they're wider than they are tall - so that the images don't take up too much vertical space in the sidebar. This usually works, but in a small handful of cases - the Graduate Center comes to mind - the logos are necessarily fairly tall. This is the only case where I can see someone realistically wanting to adjust the size of (ie shrink) the logo.

#6 Updated by Matt Gold about 3 years ago

Okay -- thank you, Boone. That all sounds good to me. I would just suggest that we test this on a mobile device using one or two of our more popular themes to see how it renders.

#7 Updated by Boone Gorges about 3 years ago

  • Status changed from New to Testing Required

Hi all - A quick update that I've got a cdev site set up where you can see all of the images in one place. https://teststudentblog.commons.gc.cuny.edu/ Be sure the following is in your /etc/hosts file to access:

146.96.128.253 commons.gc.cuny.edu chaserobinson.net teststudentblog.commons.gc.cuny.edu

The thick black lines between the widgets, and the asymmetrical top/bottom padding, are features of the Twenty Sixteen theme. The campus widgets will generally follow the styling rules of the theme in which they appear.

#8 Updated by Matt Gold about 3 years ago

Thanks, Boone -- I've taken a look. Generally, the logos look great and it is cool to have them linked. Two notes:

1. The logos look a bit big to me. The GC one, especially, is enormous, but I wonder if others could comment on the default sizing as well; for me, the size of the logos would dissuade me from using the widget on my course site.

2. The Hunter logo appears twice -- not sure whether that is an issue.

Overall, though -- great progress and thank you for your work!

#9 Updated by Boone Gorges about 3 years ago

Thanks, Matt. As noted earlier, the GC doesn't have a non-vertical logo, and I standardized on an image width for all logos, which means that the GC logo ends up very tall. It is probably possible to shrink it and others, though the technique depends on whether they all need shrinking, or whether it's just one or two.

The extra Hunter logo is probably just because I added an extra widget to the test site. It was all done manually.

#10 Updated by Matt Gold about 3 years ago

Okay. FWIW, I think they all need at least a bit of shrinking, though GC logo needs more due to the difference between vertical and horizontal logos. Is there any way to treat it differently than the others?

#11 Updated by Boone Gorges about 3 years ago

Yes, there are ways, but it'd be helpful to have some details about the necessary changes before deciding how to do it. Do you want them all shrunk? All by the same amount (aside from the GC)? Since logos will no longer be taking up all available horizontal space in the sidebar, as is currently the case, how should they be aligned - left or center?

#12 Updated by Matt Gold about 3 years ago

I don't have exact dimensions, and of course it is mostly an issue of proportion. For example, in the attached screenshot, which shows my current class blog, I wouldn't want the logo to be bigger than the pink box (and even smaller would be okay). I did think that all of the logos (save maybe the CUNY Law logo) should be smaller, but that the GC logo should be much smaller.

As for horizontal alignment, I think center is probably fine

#14 Updated by Boone Gorges about 3 years ago

Thanks. I've made the following changes:

- Default image size is narrower
- Images are centered
- GC logo is narrower than default
- CUNY Law logo is wider than default

Let me know if there are other changes that you need.

#15 Updated by Matt Gold about 3 years ago

That looks great to me, Boone. Thank you!!

#16 Updated by scott voth almost 3 years ago

Just tested and looks great. Using 2012 theme, the brand might look better if it was left aligned, but that can be done with CSS also.

#17 Updated by Boone Gorges almost 3 years ago

Thank you for testing, Scott! I don't want to try making per-theme adjustments this late in the game, but let's definitely consider it for future releases.

#18 Updated by Boone Gorges almost 3 years ago

  • Status changed from Testing Required to Resolved

Also available in: Atom PDF