ApacheCon Event Banner Snippets

This page contains HTML examples for injecting banners for current Apache events into a project web site.
All Apache project websites SHOULD have a link to upcoming events, and this is the preferred way of doing that.
The banners are maintained by the conference planning committee.
All banners exist in two dimensions and two color options, giving you four design options:

How to add the banners to your web site

To inject one or more of the banners below into your website, add the following javascript snippet plus any of the below <a> blocks:

<script src="https://www.apachecon.com/event-images/snippet.js"></script>

Available banner formats:

<a class="acevent" data-format="wide"></a>

<a class="acevent" data-format="wide" data-mode="dark"></a>

<a class="acevent" data-format="square"></a>

<a class="acevent" data-format="square" data-mode="dark"></a>

Note that some events may not have all available formats (i.e., light and dark), although they should have both of the sizes.

Tweaking sizes

You can tweak the size of the banners using the data-width parameter.

<a class="acevent" data-format="wide" data-mode="dark" data-width="480"></a>

<a class="acevent" data-format="wide" data-mode="dark" data-width="240"></a>

<a class="acevent" data-format="wide" data-mode="dark" data-width="120"></a>

Specific events

By default, if no event is specified, we'll randomly cycle through the available events, so that over time all events get exposure to your site visitors.
If you wish, however, you can also specify an event to show a banner for, for instance acasia2022:

<a class="acevent" data-format="square" data-mode="dark" data-event="acasia2022"></a>

<a class="acevent" data-format="wide" data-mode="light" data-event="acasia2022"></a>

Custom styles for embedded image

You can add custom style data to the generated image using the data-style field like you would a normal style field:

<a class="acevent" data-format="wide" data-mode="light" data-style="border: 3px solid red; padding: 10px; background: yellow;" ></a>

You can also set a class for the injected image using the data-class field.