EchoTiger
Official Profile and Singular Developer
- Joined
- Nov 28, 2012
- Messages
- 6,810
Currently this project is a work in progress.
I wouldn't normally post something like this 'this' early - but I figured I would test the waters a bit and get some opinions / feedback on the idea.
It's worthy to note! that these images are all SVG meaning they can be scaled infinitely without any quality loss or filesize increase.
I wouldn't normally post something like this 'this' early - but I figured I would test the waters a bit and get some opinions / feedback on the idea.
It's worthy to note! that these images are all SVG meaning they can be scaled infinitely without any quality loss or filesize increase.
What is this?
This is a project aimed at creating dynamic images for people who are too lazy to make own, or just don't have the deisgn tools to! ;D
Images that are programatically altered by using simple attributes to fit your needs.
These images can be used to stylize your thread or to visualize your project's functionality.
Images that are programatically altered by using simple attributes to fit your needs.
These images can be used to stylize your thread or to visualize your project's functionality.
Image 1: Profile Functions Display
Attributes:
Here below is the result of color=black features=mail,alliance,horde width=300 and height=80
Two (Current) designs
At the moment this image has two designs. The default is Metro and the other is WoW.
The WoW design is not a SVG and it will not scale properly. It's also not affected by the 'color' attribute.
The design by default is set to metro, but you can set it by using design=wow
- color= [Name/Hex of a Color] Sets the base color of the image. (default #00a2ff)
- features= [vendor,mail,alliance,horde,navigation] - Defines what features your profile/project supports. (default none)
- design= [metro, wow] Sets the image design. (default metro)
- checkcolor= [Color Name/Hex] Sets the checkmarks to this color. (default #59f564)
- checkopacity= [.1 to 1] Sets the checkmarks opacity (default 1)
- crosscolor= [Color Name/Hex] Sets the crossmarks to this color. (default #f03d3d)
- crossopacity= [.1 to 1] Sets the checkmarks opacity (default 1)
- showcross= [false / true] Will hide the crosses. (default true)
- width= CSS width (default 500px)
- height= CSS height (default 100px)
Here below is the result of color=black features=mail,alliance,horde width=300 and height=80
Code:
http://azyul.com/features.php?features=mail,alliance,horde&color=black&width=300&height=80Two (Current) designs
At the moment this image has two designs. The default is Metro and the other is WoW.
The WoW design is not a SVG and it will not scale properly. It's also not affected by the 'color' attribute.
The design by default is set to metro, but you can set it by using design=wow
Image 1: What do the icons mean!?!?!
Well, hopefully they are self-explanitory! P:
The first icon represents mailing, by checking this you're telling your users that your profile has mailbox support.
The second icon represents vendor, the third represents Alliance support, the fourth represents Horde support and the fifth...
The fith represents "Universal Navigation." Checking this will tell your users that your profile can be started in nearly any area of the game.
The first icon represents mailing, by checking this you're telling your users that your profile has mailbox support.
The second icon represents vendor, the third represents Alliance support, the fourth represents Horde support and the fifth...
The fith represents "Universal Navigation." Checking this will tell your users that your profile can be started in nearly any area of the game.
How to customize and use an image.
At the moment, these images are generated through PHP. The PHP script itself is hosted on my Azyul servers.
To generate an image, you'd need to pass a few attributes through the PHP script via URL.
Ex: http://azyul.com/features.php?color=black will generate a black image.
Notice how any feature that's not listed is automatically populated with cross marks.
With PHP, when passing arributes the first one is always accompanied with a ?.
Any further attributes are accompanied with a &.
Ex: http://azyul.com/features.php?color=orange&crosscolor=black
As you can see in the link, we have ?color, and &crosscolor. Any variable after &crosscolor will also need a &.
If you plan on using hex instead of color names, it's important to note that # will not work in a URL.
So in order to use a # you will need to use %23 to escape it.
Ex: http://azyul.com/features.php?color=#4169E1
The order of your variables do not matter.
Once you've stylized your image, simply wrap it as a image on the forum by using
To generate an image, you'd need to pass a few attributes through the PHP script via URL.
Ex: http://azyul.com/features.php?color=black will generate a black image.
Notice how any feature that's not listed is automatically populated with cross marks.
With PHP, when passing arributes the first one is always accompanied with a ?.
Any further attributes are accompanied with a &.
Ex: http://azyul.com/features.php?color=orange&crosscolor=black
As you can see in the link, we have ?color, and &crosscolor. Any variable after &crosscolor will also need a &.
If you plan on using hex instead of color names, it's important to note that # will not work in a URL.
So in order to use a # you will need to use %23 to escape it.
Ex: http://azyul.com/features.php?color=#4169E1
The order of your variables do not matter.
Once you've stylized your image, simply wrap it as a image on the forum by using
Here's some live examples of Image 1!
Some important information
As stated previously, these images are pure SVG. They can be scaled up or down as much as you want without quality loss/increase - also the filesize itself will remain the same.
The images are forced to a specific aspect ratio, so they will not be stretched inproperly if you try using a bad width/height.
The images are forced to a specific aspect ratio, so they will not be stretched inproperly if you try using a bad width/height.
Upcoming 'Things'
As of now just the above image is availible. It's also only availible in 2 designs which is metro (Windows 8 / Microsoft themed) and WoW (World of Warcraft themed)
There's plans to add several more designs for this image, they'll be coming soon!
There's plans to add several more designs for this image, they'll be coming soon!
Last edited: