— The challenge
The UNT Identity Guide sets the standard for copy, print, and web branding for the University. It was extremely important that this site serve the useful function of housing over 10,000 university logos, while also upholding the brand and narrative of the University. Because this site is used by faculty, staff, and students, it required an accessible interface for ease of use, and also because this site details the standards of accessibility.
— The goals of this project
- A large, searchable repository of over 10,000 university marks, with different color and layout variations
- Must be easy for student and administrative assistants to update, so that marks could be uploaded
— The solutions
- The Paragraphs contributed module provided a user-friendly interface for uploading multiple variations of the same logos
- Custom theming for paragraphs and nodes output the logos in a way for ease of downloading
- Taxonomy was applied to nodes and files for improved search and sorting
- Permissions granted to University faculty, staff, and students to access the marks
Design & function: serving up 10,000 University marks using the Paragraphs contributed module
The first iteration of the Identity Guide had used separate node entries for every single lockup and variation. But when users searched a keyword like Art - they might get dozens of results, one for each degree or organization that contained the word, multiplied by three different color variations and then three times again by layout variations. We needed a solution to group together all logos belonging to the same unit, while still being able to accurately describe each of them through their metadata.
Paragraphs provided the perfect solution. We were able to group by unit, while also streamlining the process for selecting descriptors.
I used paragraphs for:
- Reducing search results
- Granular templating for each paragraph item, and paragraph collections
- Providing a user-friendly interface for people with minimal Drupal experience to upload, tag, and manage logos
I also used the Field permissions module to hide all of the download links for the logos; however, campus community members can still search and access the page of their needed lockups before logging in.
Code sample
Since the repository is behind a log-in wall, I'm sharing some of the code and output used in the site. The colors have been altered to fit this theme.
Code
Selected code from paragraphs-item--college-or-department-lockup.tpl, a custom Paragraphs template that uses PHP since it was built in Drupal 7.
<?php if ($logged_in): ?> <?php if(render($content['field_published'][0]) == "Published"): // If the field is published ?> <div class="row"> <div class="paragraph brand-resource-item par <?php print render($classes_array[2]); ?> <?php print render($classes_array[3]); ?>"<?php print $attributes; ?>> <div class="columns large-5"> <img src="<?php print render($content['field_logo_png_file'][0]); ?>"<?php if(render($content['field_color'][0]) == "White"): ?> style="background-color: #00853e; padding: 15px;"<?php endif; ?> alt="Lockup color: <?php print render($content['field_color'][0]); ?> | Layout: <?php print render($content['field_format'][0]); ?>"> </div> <div class="columns large-7"> <h5><?php print render($content['field_color'][0]); ?> <?php print render($content['field_format'][0]); ?> <?php print render($content['field_line'][0]); ?></h5> <?php if (render($content['field_logo_png_file'][0])): // If there is a PNG file ?> <div class="btn btn1 c1 altcolor download"><a href="<?php print render($content['field_logo_png_file'][0]); ?>" download>Download<br />PNG for Digital</a></div> <?php endif; ?> <?php if (render($content['field_logo_eps_file'][0])): // If there is an EPS file ?> <div class="btn btn1 c1 altcolor download"><a href="<?php print render($content['field_logo_eps_file'][0]); ?>" download>Download<br />EPS for Print</a></div> <?php endif; ?> <?php if (render($content['field_logo_svg_file'][0])): // If there is an SVG file ?> <div class="btn btn1 c1 altcolor download"><a href="<?php print render($content['field_logo_svg_file'][0]); ?>" download>Download<br />SVG for Web</a></div> <?php endif; ?> </div> </div> </div><!-- /. row for paragraphs --> <?php endif; ?> <?php else: ?> <div class="columns large-3 end" style="background: url(<?php print render($content['field_logo_png_file'][0]); ?>) no-repeat center center; background-size: contain; <?php if(render($content['field_color'][0]) == "White"): ?> background-color: #00853e;<?php endif; ?>"> <img src="/sites/default/files/preview.png" alt="Preview of lockup color: <?php print render($content['field_color'][0]); ?> | Layout: <?php print render($content['field_format'][0]); ?>"> </div> <?php endif; ?>
Output
Below is code output. Because the code sample was built on Zurb Foundation, it has been adjusted here to fit Bootstrap.
The code incorporates metadata (assigned by the person submitting it), and creates useful and descriptive alt text, while also adjusting the style output. For instance, white images will be rendered on a solid background.