The simplest way to use your guild emblem is to download the PNG from the Emblem Creator. Alternatively, you can download the font pack and apply the HTML to your webpage to render the font-based version. Using the fonts is a great way to reduce page size and create highly-scalable content.
If you have a forum or want to save time creating the HTML blocks for an emblem, you can make use of the jquery plugin to add support for parsing special bbcode-style markup.
The simplest way to add the Emblems to your site is to generate the PNG version from the Emblem Creator page to the size you require, then save the image and upload it to your website, then where you would like to display the image, add the following HTML into your web page source:
You can change the size of the generated guild logos by altering the file name in the URL. For example, if you were to generate the guild logo for Veterans of Lions Arch, the Generator would give you the following URL:
The part highlighted in bold is the desired size. You can change the size to any positive numeric value above 10. The value 1024 is the recommended maximum size, as anything bigger may not work correctly or may completely fail to render. Use at your own risk!
You can also change the file extension from png to gif or jpg - however unless you specifically have a justified reason to do so, leave the extension as PNG for the best image quality.
Although you can hot-link to the generated files on this website, the practise is discouraged and may be blocked in future if hot-linking begins to consume too much bandwidth. The best practise is to download your guild icon and upload it to your website or image hosting provider to link from.
To use the Font face, download the pack from the website and extract it to a folder on your computer. Once extracted, copy the contents of the extracted folder to your website. The kit assumes a generic website layout is in use - you may need to customise some file references to apply the font to your site. Please see the README in the extract for more information.
Once you have deployed the files into your website, edit your webpages to have the following additional header line:
For modern browsers, that's it! Your website now has Emblem support for all CSS3 capable web browsers on all devices.
To try this out, use the Emblem Creator to create your code block and paste the code block into your page where you would like the emblem to display. Save the file and upload to your webserver.
When you test your web page out, you should see your guild emblem where you placed the code.
So instead of using the Emblem Creator to generate you code block, you have decided to create it by hand.
To start with, you need to declare a container for the emblem with the class "gw2".
This will define some of the important CSS properties for the emblem. You should also attach a size styling otherwise your emblem will not properly render. In the gw2emblems CSS there are several default sizes prefixed with the word 'emblem' (eg: emblem32, emblem64, emblem100)
Once your container is ready, you can then insert containers for the emblem pieces themselves and set the class for the emblem piece you desire.
The above example will load the shield background in the default page text colour. There are a number of classes used in the above example:
Adding Foreground elements is exactly the same process - however instead of 'gw2b-' you use 'gw2f-' instead. Each foreground is comprised of two glyphs to provide support for the two tones of the emblem piece.
The result isn't too exciting, as it draws in the same font as the active text of the page.
By default, the above will draw a shield with the octopus and trident logo over it, but will all draw in the same colour. In order to get some colour into your emblem, you need to use standard CSS font colouring! Add a colour directive to get some life into your emblem:
If you test the above code in your page, it will look horrific, but you will have colour!
So you build your Guild logo, but it doesn't look right because your Guild has flipped or mirrored the background or foreground. Not to worry! You can achieve the same thing with CSS.
The above code will flip the shield so that it is in a pointed-end-up orientation, and the octopus will now be on the right facing left.
To combine both the flip and mirror element, use the invert class.
The above sample effectively rotates the original a complete 360 degrees.
The plugin for JQuery allows you to save writing code blocks and use AJAX parsing to create emblems from doing bbcode-style tags. The jquery plugin runs on page load and scans the page for [guild] tags, then for each guild tag a call to this website is made to return the code block.
The plugin has been tested with JQuery 1.9.1+, but should also work from JQuery 1.4.2 and later.
Although the plugin by default targets this website, you can overload the AJAX URL through the settings if you wish to set up your own JSON source for the queries.
To use the JQuery plugin, follow the same process as for the Using the font face above, but you should also copy the "jquery-gw2emblems.js" file to your site javascript folder. Once copied over, add the following code to your web page:
It is recommended you place this code at the footer of your page to ensure the page is fully loaded before the script executes.
The above code sample will scan the entire "<body>" tag to find [guild] tags. If you know your guild tag mark-up will only be in a specific tag or set of tags, you can set the appropriate JQuery selector where body is defined.
The plugin supports both generic [guild]<name>[/guild] and also with size parameter: [guild size=<pixel size>]<name>[/guild]. The default size of an emblem when size is not specified is 100 pixels.
Because the plugin will perform AJAX calls to this website, there is a default limit of 10 calls made. Any more guild tags present on the page will be ignored once the cap is reached. You may alter the limit by specifying the parameters when writing the JQuery call.
You can change the default parameters of the plugin by adding a json object to the function call, as illustrated in this code sample:
The parameters available are: