Yuriy Ustushenko
and 1 contributors

NAME

Mojolicious::Plugin::Sprite - let you easy introduce and maintain CSS sprites in your web-site.

SYNOPSIS

    # Mojolicious
    $self->plugin('Sprite');

    # Mojolicious::Lite
    plugin 'Sprite';

    # Custom options
    plugin 'Sprite' => {
        config  => "sprite.xml",
        css_url => "/css/sprite.css"
    };

DESCRIPTION

This plugin parses HTML out and converts images into sprites according to rules of configuration file,

In other words, HTML tag <img src="icons/img1.gif"> will be converted to <span class="spr spr-icons-img1"> and will be used CSS like:

    .spr {
        display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
        *display: inline;
        background-repeat: no-repeat;
    }
    .spr-icons-img1,.spr-icons-img2 {
        background-image: url('/sprites/sprite.png?1376352016') !important;
    }
    .spr-icons-img1 {
        background-position: 0px 0px !important;
        width:32px;
        height:32px;
    }
    .spr-icons-img2 {
        background-position: 0px -32px !important;
        width:48px;
        height:48px;
    }

For generating sprites you can use CSS::SpriteBuilder module.

METHODS

Mojolicious::Plugin::Sprite inherits all methods from Mojolicious::Plugin and implements the following new ones.

register

    $plugin->register;

Register plugin in Mojolicious application.

CONFIGURATION

The following options can be set for the plugin:

  • config [ = "sprite.xml" ]

    Specify XML config file like:

        <root>
          <sprite src="/sprites/sprite.png?1376352016">
            <image width="32" selector=".spr-icons-small-add" x="0" height="32" image="icons/small/Add.png" y="0" is_background="0" repeat="no"/>
            <image width="48" selector=".spr-icons-medium-cd" x="0" height="48" image="icons/medium/CD.png" y="32" is_background="0" repeat="no"/>
            ...
          </sprite>
        </root>

    * This file can be generated by CSS::SpriteBuilder.

    Or hash like:

        {
            "icons/small/Add.png" => ".spr-icons-small-add",
            "icons/medium/CD.png" => ".spr-icons-medium-cd",
            ...
        }
  • css_url [ = "/css/sprite.css" ]

    Specify url for CSS file.

    * This file can be generated by CSS::SpriteBuilder.

SEE ALSO

Mojolicious, Mojolicious::Guides, CSS::SpriteBuilder.

AUTHOR

Yuriy Ustushenko, <yoreek@yahoo.com>

COPYRIGHT AND LICENSE

Copyright (C) 2013 Yuriy Ustushenko

This library is free software; you can redistribute it and/or modify it under the same terms as Perl itself.