• Visit Rebornbuddy
  • Visit Panda Profiles
  • Visit LLamamMagic
  • (W.I.P) Customizable Forum Images For Your Projects

    Discussion in 'Honorbuddy Profiles' started by EchoTiger, Feb 11, 2015.

    1. EchoTiger

      EchoTiger Official Profile and Singular Developer Staff Member Moderator

      Joined:
      Nov 28, 2012
      Messages:
      6,810
      Likes Received:
      631
      Trophy Points:
      113
      [​IMG] [​IMG]
      Welcome!
      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.​



      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.​



      Image 1: Profile Functions Display
      Attributes:
      • 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
      [​IMG]
      Code:
      http://azyul.com/features.php?features=mail,alliance,horde&color=black&width=300&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



      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.​



      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 ​



      Here's some live examples of Image 1!

      You need to register and have one post to see spoilers!





      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.​



      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!​
       
      Last edited: May 27, 2015

    Share This Page