George Stephanis 4:05 pm on February 12, 2016
Tags: badges ( 6 ), WordCamps ( 239 )

Name Badges are hard to make, and confusing for organizers.

Especially if they want pretty GravatarGravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/. badges.

I’ve always had some problems with InDesign — some technical (my only experience in InDesign is making badges the past two years, and it always feels confusing) and others philosophical (should we really be this all-in on a proprietary, commercial piece of software?)

To that end, I knocked together a rough proof of concept this morning — took about an hour and change — that generates name badges purely in HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. and CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. — languages that nearly every organizing team will have someone familiar with.

You can see the code here: https://gist.github.com/georgestephanis/1057841cff4ebdc0eba5

And the generated markup — once printed (in this case, to a PDF) looks like this:

Click to access Z0n7Tg0LET.pdf

I’m planning on expanding on this to either a standalone, or internal tool for organizers to customize and generate badges. (standalone for the short term, internal if y’all like the idea and want to move forward with it).

As WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. sites know the WordCamp name, and the WordCamp Logo, they can generate these badges with very little necessary user input or customization — although users can always further customize them before printing, if desired.

Related: https://meta.trac.wordpress.org/ticket/262

#badges, #wordcamps

George Stephanis 4:07 pm on February 12, 2016

And if we really want to push the customizing of badges further, we can extend the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. kinda like WooCommerce does for email styling, to let users customize their badges.
Kevin Cristiano 4:11 pm on February 12, 2016

I am all for anything that makes the badges easier. I am also not fond of hunting down someone that owns InDesign and is willing to donate their time.
Ian Dunn 5:57 pm on February 12, 2016

Big +1 from me.

For background, the current solution is documented at https://plan.wordcamp.org/helpful-documents-and-templates/create-wordcamp-badges-with-gravatars/, and it’s basically just a rough v1 that was created for WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. San Francisco 2013. It’s not user-friendly at all, and requires a developer and a designer to make it work.

I think automating this process would be a huge win for organizers.

should we really be this all-in on a proprietary, commercial piece of software?

I agree. The only reason it targets InDesign is because that’s what the designer for WCSF13 happened to be using.

I do wonder if there would be camps that would prefer some kind of rich design tool over just HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites./CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site., so maybe we should support both, but maybe not. What does everyone prefer?

As WordCamp sites know the WordCamp name, and the WordCamp Logo, they can generate these badges with very little necessary user input or customization

The camp logo could probably be embedded automatically in many cases, ala r2447, but this would be a nice use case for the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. The designer could pick the colors, fonts, etc.
George Stephanis 6:40 pm on February 12, 2016

Very rough first draft pluginification —

https://github.com/georgestephanis/wc-badge-generator

Currently isn’t pulling in Twitter handles, and doesn’t have any indicator of Speaker / Volunteer / whatever.

Also there’s no real way to modify the styles atm, apart from just going into your browser inspector and playing with them there before you print.
- Ian Dunn 5:44 pm on April 15, 2016
  I added some classes for identification:
  - Attendee name – can be used to make the font smaller for long last names, etc
  - Ticket type – can be used to distinguish microsponsors, etc
  - Coupon code – often can be used to identify speakers, sponsors, volunteers, etc
  e.g.,
  
  <article class="attendee attendee-kevin-cristiano ticket-general-admission coupon-speakers">
Ian Dunn 6:42 pm on February 12, 2016

@georgestephanis, how are you thinking the printing, cutting, laminating, etc would happen? Typically that’s all handled by the print vendor, and they need a very specific format. If all of that has to be done manually, it’d add a lot of work for the organizing team.
- George Stephanis 6:46 pm on February 12, 2016
  
  For WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Lancaster, the past two years, I did everything myself in InDesign, generated PDF files, then took them to either CopyMax or Kinkos, and had them run them off on a semigloss cardstock and use their big cutter that can chop like 300 pieces of paper at a time to cut off the off-fall. Then I manually folded them all in half, with the schedule on the inside, and punched holes in the top for the badges. It took one person (me) about an hour each time to do the folding and hole-punching for ~150 attendees once I have them printed and cut and in hand.
  
  The printing winds up running about $100 or so, as I recall, for the full color badges.
  
  With this tool, it would basically be a case of “Print off this page directly onto the stock you want, print the schedule on the back, cut, fold, punch, done.”
  
  By my workflow, at least.
  - Ian Dunn 1:06 am on February 13, 2016
    
    Ah, sweet, I was thinking it would take much longer than that.
Lydia 3:38 pm on February 13, 2016

Really love this idea. InDesign has always been tricky and having an alternate is a great options. My only concern is printing, since usually printing straight from a webpage is going to ignore things like background images (we usually have more going on design-wise on our badges). But it’s a great start and we could probably roll our own.
- George Stephanis 5:05 pm on February 13, 2016
  
  You can print background images by making them foreground images. Like, setting it via `content:url(images/mybg.png);` on a pseudo-element or something purely via css.
  - Ian Dunn 2:58 pm on April 15, 2016
    
    At least in Firefox, there are also options in the print dialog to include background colors and background images.
  - Ian Dunn 2:59 pm on April 15, 2016
    
    That did give me the idea to include some arbitrary empty divs, though. There’s 5 at the bottom of each badge side, and another 5 at the bottom of each attendee section.
George Stephanis 1:53 am on April 2, 2016

I’ve added some additional styling tweaks and such to the code and got it working as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party against the WordPress MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Environment in VVV. You can see the working plugin code here:

https://github.com/georgestephanis/wc-badge-generator

It’s fairly basic, but then again, it doesn’t need to do much — it just adds a menu item under “Tickets” called “Badges” that — when viewed — generates a page full of badges and quits.

If the user wants to further customize the badges, they can just use firebug to tweak the styles on the page before printing. I’m considering adding a textarea up top where the user can write CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. rules that get injected into the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. of the page, to make customizing it simpler, without using a web inspector, but that’d be for a v1.1 — at the moment, I’m doing MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia.

For a sample output of what it generates when printed with Firefox, here’s the output — it may look a bit lackluster because the WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Content site doesn’t have a Site Logo configured (or enabled in the theme, I don’t believe) — if that were set, it would appear in lieu of the site name.

Also, if WordCamps could consolidate how they flag Twitter fields, we could easily add those to the badges as well, but at the moment there’s no good way to extract them (short of `preg_match( /twitter/i, $fieldname )`

https://make.wordpress.org/community/files/2016/04/WordCamp-Badges.pdf
- Ian Dunn 2:46 pm on April 6, 2016
  
  Also, if WordCamps could consolidate how they flag Twitter fields, we could easily add those to the badges as well, but at the moment there’s no good way to extract them (short of `preg_match( /twitter/i, $fieldname )`
  
  That should be standard, take a look at `camptix/addons/field-twitter.php`.
  - Ian Dunn 5:47 pm on April 15, 2016
    
    I didn’t get around to this for v1, but it’s on the list for v2
Ian Dunn 2:43 pm on April 6, 2016

Before we move forward with this, it’ll need to be approved by the team, but there haven’t been a lot of comments yet. Does anyone have thoughts on if it should be approved or not, or feedback on the prototype?

@karenalma, @adityakane, @gounder, @amylaneio, @bph, @brandondove, @drewapicture, @miss_jwo, @savione, @rkoffy, @nofearinc, @mayukojpn, @chanthaboune, @camikaos, @andreamiddleton, @_dorsvenabili, @kovshenin
Rich Robinkoff 3:14 pm on April 6, 2016

I think this is a great solution, especially with the addition in 1.1 of the textarea for the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. rules.
- George Stephanis 3:10 am on April 7, 2016
  
  Just added that this evening — and if Jetpack is available (which it should always be on WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. sites) it uses the CodeMirror bundled with Jetpack’s Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. module for pretty editing.
  
  It doesn’t actually /save/ the changes anywhere, as I wasn’t sure the best place to stash them — maybe just in an option? I don’t want to put the cart before the horse here by building some largely unnecessary system for versioning the css via a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. or the like for something as relatively simple as this.
Andrea Middleton 7:53 pm on April 6, 2016

I think this is definitely worth a try; if people don’t like it, they can still use the “traditional” way. 🙂 I suggest we move forward with this and have a bunch of people try it out.
Cami Kaos 12:52 am on April 7, 2016

Having this option available to organizers would be a great step forward in better badges for any event wanting them without the big ticket cost. It looks like we should at least offer it up for folks to try. Awesome George!
Ian Dunn 6:19 pm on April 8, 2016

I’m working on sprucing this up a bit. @georgestephanis, do you have an image of one of the final Lancaster badges? It’d look great in the documentation.
- George Stephanis 10:54 pm on April 8, 2016
  
  Just added you as a contributor to the repository, if you’d find it easier to work out of the same place.
  
  The WCLanc ones we actually just iterated through the downloaded CSV to build — so it was a very different process.
  - Ian Dunn 1:17 am on April 9, 2016
    
    Awesome, thanks. I pushed a new branch with what I’ve been working on. My main goals for v1 are to:
    
    1) Make it forwards-compatible for when we automate the InDesign bin script
    2) Get a live preview of the HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. badges in the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings., ala WPCOM’s custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.
    - Ian Dunn 6:53 pm on April 13, 2016
      
      @georgestephanis, do you remember the specific problems you saw with page breaks in non-Gecko browsers? I don’t see any differences there between Chrome and Firefox, and supposedly all modern browsers have almost identical support for `page-break` rules. I want to make sure I’m not missing something, though.
      
      (There are still some other differences, like default font sizes, but I think those can be fixed with a normalize/reset sheet)
      - George Stephanis 6:58 pm on April 13, 2016
        
        It’s entirely possible that I was looking at an old resource, or had a bug in my code at the time. If it’s working for you in Chrome, so much the better. I’d recommend printing two pages and making sure everything matches alignment from one page to the next though — hold them up to the light, or something.
      - Ian Dunn 7:10 pm on April 13, 2016
        
        Awesome, thanks 🙂
        
        I actually don’t have a printer anymore since I hardly ever have a need for one, but I’ve been comparing the generated PDFs between master and the branch, and they look identical. I’ll ask a few people to test it out before deployingDeploy Launching code from a local development environment to the production web server, so that it's available to visitors., though.
      - Ian Dunn 4:33 pm on April 14, 2016
        
        Ah, ok, now I’m running into those same problems too. It seems like there’s a bunch of bugs and inconsistencies in Webkit/Blink. There are a lot of workarounds on StackOverflow, but none that seemed to work right away. I’ll have to dig into it more.
Ian Dunn 11:22 pm on April 14, 2016

I think this is ready to launch, but I don’t have a printer to test with; would anyone be willing to give that a shot?

You can get the latest code from the customizer-indesign branch on GitHub, or just download a sample PDF, if you don’t want to run the code locally.

If you do run into any problems, and have the time/ability, it’d be really helpful if you could provide a version of the CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. that fixes the problem, but if not just a description of the problem would still be very helpful.
- George Stephanis 3:50 am on April 15, 2016
  
  Left to right positioning looks just about perfect. Vertically, though, there’s maybe 1/2″ extra whitespace at the bottom of the page versus the top, and the dashed fold lines didn’t show up on my printing of the PDF — may be worth making that a solid fold line instead of dashed, or even just a touch thicker.
  
  Also, it may be worth including an outline or border (probably css outline property, as it doesn’t affect the layout at all) to the first two badges, so the printer can use those as cut marks for the stack. No need to include the cut marks on the lower sheets.
  
  Also may want to add a bit more whitespace to the top of the badge to allow for the hole punch? That’s iffy, and camps can probably account for it based on their own size / height needs.
  
  Nothing worth holding up deployment over — just trivialities that can easily be fixed down the road.
  - Ian Dunn 5:16 pm on April 15, 2016
    
    Awesome, thanks. I made those changes, except for the vertical positioning. I played around with it, but didn’t come up with a good solution and didn’t want to go down the rabbit hole. It is less of an issue after adding more whitespace for the holepunch, though. I’m wondering if it might be better to switch to Flexbox in the future, to get a more precise layout. Definitely not a blocker, though.
    - Ian Dunn 1:13 am on April 16, 2016
      
      I’m gonna be on vacation next week, but I’ll finish up the documentation, etc for this when I get back, and then deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. it 🙂
Marco Pereirinha 11:22 am on April 15, 2016

Allow me to bring something new to this discussion. At least something that I think it worth to be aware of. It regards to color space. As far as I know, CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. doesn’t support CMYK. Thus results of the generated PDF’s might be different from expected once printed. Specially when we have colourful badges.

So far, I didn’t thought about a strategy that might help mitigate this issue, but I’ll keep this in mind and return here to share.

I think it also worth mention that I do have past experience with different technics/workflows for printing.

Thumbs up for the great work you guys are doing here 😉
- Ian Dunn 2:36 pm on April 15, 2016
  
  That’s a good point to bring up. It looks like the CSS4 draft spec includes device-cmyk() for specifying colors in CMYK.
  
  We also have some support for using InDesign to create Gravatar badges, and that tool will become more automated in the future.
Ian Dunn 9:34 pm on April 26, 2016

This has launched now 🙂

Welcome!

Get Involved

Let’s Talk

Learn More

Name Badges are hard to make, and confusing for organizers.

Welcome!

Get Involved

Let’s Talk

Learn More

Share this: