Software

Hop Minifizer

Current Version: 4.3.0
  • EE2
  • EE3
  • EE4
  • EE5
  • EE6
Buy on Devotee Buy on EE Store

  • Installation

    1. Unzip the folder to a temporary location on your local hard drive.
    2. FTP the files from their local folders to the same locations in your EE install’s /system/user/addons/ folder on the server.
    3. Navigate to Add-ons in your EE control panel and install the add-on. That’s it!

    If you wish to enable compression, copy the contents of sample.htaccess to an .htaccess file placed in your cache folder, e.g. public_html/cache/.htaccess.

  • Configuration

    Preferences can be configured through the Hop Minifizer EE control panel, by tag parameters, or by editing EE’s system/user/config/config.php file. The control panel interface adds simplicity and convenience, but at the cost of an extra database call.

    To get the most out of Hop Minifizer’s performance offering, configure via EE’s $config variable:

    # example: configuring Hop Minifizer preferences in config.php

$config['hop_minifizer'] = array(
    'cache_path' => '/path/to/cache',
    'cache_url' => 'http://example.com/cache',
);

  • Usage

    Create a folder within your webroot for Hop Minifizer to save your cached files to, e.g. public_html/cache

    Next, install Hop Minifizer’s extension, or amend your config.php to include the cache folder’s location & URL.

    If you wish to enable compression, copy the contents of sample.htaccess to an .htaccess file placed in your cache folder, e.g. public_html/cache/.htaccess

    Once configured, basic use of Hop Minifizer is as simple and beautiful as:

    CSS
    {exp:hop_minifizer:css}
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="{stylesheet='css/webfonts'}">
    <link rel="stylesheet" href="http://example.com/css/global.css">
    <link rel="stylesheet" href="css/forms.css">
    <link rel="stylesheet" href="{path='site/site_style'}">
{/exp:hop_minifizer:css}

    Will render something like:

    <link rel="stylesheet" href="http://example.com/cache/b488f65d0085dcc6b8f536f533b5f2da.1345797433.css">
    JS
    {exp:hop_minifizer:js}
    <script type="text/javascript" src="/js/mylibs/jquery.easing.js"></script>
    <script type="text/javascript" src="/js/mylibs/jquery.cycle.js"></script>
    <script type="text/javascript" src="/js/mylibs/jquery.forms.js"></script>
    <script type="text/javascript" src="/js/scripts.js"></script>
    <script type="text/javascript" src="/js/plugins.js"></script>
{/exp:hop_minifizer:js}

    Will render something like:

    <script type="text/javascript" src="http://example.com/cache/16b6345ae6f4b24dd2b1cba102cbf2fa.1298784512.js"></script>
    SCSS

    Include your SCSS files using the data-parse-css attribute in a <link...> tag:

    {exp:hop_minifizer:css}
    <link rel="stylesheet" href="{stylesheet='styles/hop-scss'}" data-parse-scss>
{/exp:hop_minifizer:css}

    Or by using the scss_templates parameter:

    {exp:hop_minifizer:css scss_templates="styles/hop-scss"}
{/exp:hop_minifizer:css}

  • Advanced Usage

    There is a wealth of power and flexibility at your fingertips should you choose to go beyond Hop Minifizer’s basic setup. This section will continue to grow with more examples as time goes on.

    Queueing & Display

    Hop Minifizer has the ability to “queue” assets and then display the final cache later in your EE template. It’s a simple two-step process:

    Step 1

    Add queue parameter to your {exp:hop_minifizer:css} or {exp:hop_minifizer:js} opening tag:

    {exp:hop_minifizer:css queue="head_css"}
    <link rel="stylesheet" href="css/reset.css">
{/exp:hop_minifizer:css}

    For subsequent queue’ing, continue to use the same parameter value:

    {exp:hop_minifizer:css queue="head_css"}
    <link rel="stylesheet" href="{stylesheet='css/webfonts'}">
{/exp:hop_minifizer:css}
    ...

{exp:hop_minifizer:css queue="head_css"}
    <link rel="stylesheet" href="http://example.com/css/global.css">
    <link rel="stylesheet" href="css/forms.css">
{/exp:hop_minifizer:css}
    Step 2

    Once all assets have been queue’d, you can finally display your tag output with the {exp:hop_minifizer:display} tag; use css or js as your tag parameter depending on the type of asset, and specify the name of the queue:

    {exp:hop_minifizer:display css="head_css"}

{!-- will render something like: --}
<link rel="stylesheet" href="http://example.com/cache/b488f65d0085dcc6b8f536f533b5f2da.1345797433.css">

    The ‘Croxton Queue’ for EE2.4+

    Mark Croxton submitted this feature request to delay the processing of {exp:minimee:display} in the original Minimee until all other template parsing had been completed, by way of leveraging EE2.4’s template_post_parse hook. It was a brilliant idea and indication of his mad scientist skills. In his wise words:

    “Then you would never need worry about parse order when injecting assets into the header or footer of your page using queues.”

    This, combined with the priority parameter, means you can do something like:

    {exp:hop_minifizer:display css="header_css"}

    sometime LATER in EE’s parse order… “`html {exp:hop_minifizer:css queue="header_css" priority="10"} {/exp:hop_minifizer:css}

    and even later in parse order, also note the priority...
```html
{exp:hop_minifizer:css queue="header_css" priority="0"}
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
{/exp:hop_minifizer:css}

    And then what ends up happening is that exp:hop_minifizer:display outputs a cached css that contains, in this order:

    1. css/reset.css (first because of priority=”0”)
    2. css/forms.css (second because of priority=”10”)

    Embedding Cache Contents Inline

    There are now multiple approaches to “embedding” the contents of your cache inline with the rest of your HTML content. Let’s cover 2 basic options:

    Option 1: Using a Queue + Display method

    Begin with Step 1 above under Queueing + Display. This will queue one or more assets for display.

    As a Step 2, specify a display output of contents. Be sure to wrap it within the appropriate HTML tag:

    <style type="text/css">
    {exp:hop_minifizer:display css="head_css" display="contents"}
</style>

    However, by also specifying one or more attribute:name="value" parameters to exp:hop:display, Hop Minifizer will automatically wrap the contents of the cache in the appropriate HTML tag for you, using the attributes you specified:

    {exp:hop_minifizer:display css="head_css" display="contents" attribute:type="text/css"}

    Will output something like:

    <style type="text/css">
    /* your CSS here */
</style>
    Option 2: Directly changing display mode

    The return mode of {exp:hop_minifizer:js} and {exp:hop_minifizer:css} tags can now be altered in a single call, by specifying the display value at the same time. When doing so, it is recommended to also provide the appropriate attribute:name=”value” parameters as well, so that the contents are automatically wrapped in tags:

    {exp:hop_minifizer:css display="contents" attribute:type="text/css"}
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="{stylesheet='css/webfonts'}">
    <link rel="stylesheet" href="http://example.com/css/global.css">
    <link rel="stylesheet" href="css/forms.css">
{/exp:hop_minifizer:css}

{!-- Will output something like: --}
<style type="text/css">
    /* your CSS here */
</style>

  • Basic Preferences

    Cache Path and Cache URL

    Paths are assumed to be absolute, but will also test as relative to Base Path. If not configured, cache_path and cache_url will default to /cache at the root of your site.

    'cache_path' => '/path/to/example.com/cache'  
'cache_url' => 'https://example.com/cache'
    Combine Assets & Minify

    Specify the type of assets you want to combine and run through the minification engine.

    'combine_js'      => 'yes'
'combine_css'     => 'yes' 
'minify_css'      => 'yes'
'minify_js'       => 'yes'
'minify_html'     => 'no'

    Note: HTML minification is only available for EE2.4+

    Disabling Hop Minifizer

    Disable Hop Minifizer entirely; aborts all activity and returns all tags untouched.

    'disable' => 'no'

  • Advanced Preferences

    The base path of your local source assets - optional

    'base_path' => 'FCPATH'

    Location on your webserver where your source CSS and JS files sit - optional

    'base_url' => 'base_url'

    Updating cache_busting to a unique string forces Hop Minifizer to create a new cache file, ensuring that your most recent changes are visible to your end users immediately - optional

    'cache_busting' => ''

    When cleanup is enabled, Hop Minifizer will automatically delete any cache files it determines as expired - optional

    'cleanup' => ''

    Choose which algorithm will be used to create the cache filename. Available values: sha1, md5, and sanitize/sanitise

    'hash_method' => 'sha1'

    Rewrites relative image and @import URLs into absolute URLs

    'css_prepend_mode' => 'yes'

    The URL to use when css_prepend_url is yes

    'css_prepend_url' => 'base_url'

    Specifies which minification library to use for your CSS. Available values: minify, cssmin

    'css_library' => 'minify'

    Specifies which minification library to use for your JS. Available values: jsmin, jsminplus

    'js_library' => 'jsmin'

    Specify the method with which Hop Minifizer should fetch external & {stylesheet=} assets. Available Values: auto, fgc, curl

    'remote_mode' => 'auto'

    Specify whether or not to generate gzip. Requires the Zlib compression library, and modifications to your .htaccess file

    'save_gz' => 'no'

    Hook for HTML minification. If you have CE Cache installed, you may run HTML minification during its ce_cache_pre_save hook. Values: template_post_parse, ce_cache_pre_save

    'minify_html_hook' => ''

  • Amazon S3 Settings

    If you are using Amazon Simple Storage Service (Amazon S3) to host your static website, enter your S3 access credentials here.

    'amazon_s3_access_key_id'     => ''
'amazon_s3_secret_access_key' => ''
'amazon_s3_bucket'            => ''
'amazon_s3_location'          => ''
'amazon_s3_folder'            => ''

    For more info on Amazon S3, visit https://docs.aws.amazon.com/s3/.

  • Config via Tags & Paramenters

    Heads up! All configuration values mentioned above can also be specified as tag parameters using exp:hop_minifizer:css, exp:hop_minifizer:js, and exp:hop_minifizer:display.
    Refer to the EE $config section above for key/value combinations.

    exp:hop_minifizer:css and exp:hop_minifizer:js
    Parameter Required? Default Values Description
    attribute:name="value" no none String

    By default Hop Minifizer uses the first tag it encounters as a template for the cache tag output (e.g. <link ... > or <script ... >). You may override this by specifying one or more tag attributes using this parameter format.
    combine= no none yes | no

    Shorthand, runtime override of the combine_(css|js) config option
    delimiter= no , String

    When not combining, this is the string to place between cache output
    display= no tag tag

    Specify which format to display as the cache results; the default is “tag”, returning the appropriate asset tag (e.g. <link ...> or <script...></script>).
    url

    This option will only return the URL to the cache, e.g. http://example.com/cache/cachefile.name.ext. When specifying URL, be aware that if Hop Minifizer encounters an error, you may experience unexpected results.
    contents

    Instruct Hop Minifizer to return the contents of the cache, for embedding inline in your template. By default, only the contents are returned; specify one or more attribute:name="type" values to instruct Hop Minifizer to wrap the contents in the appropriate HTML tag (e.g. <style>...</style> or <script>...</script>
    minify= no none yes | no

    Shorthand, runtime override of the minify_(css|js) config option
    priority= no 0 Numeric

    For use with queue feature. Value specified is a number; lower numbers are placed earlier in queue order.
    queue= no none String

    To “queue” assets for output; receives a “key” value (e.g. "head_css"), which is used later to lookup and retrieve the queue’d cache
    scss_templates= no none String If you are using the Sass to extend css in your stylesheets, scss_templates= allows you to specify your SCSS files for minifization (see the Basic Usage section below for examples of how to minifize SCSS)


    exp:hop_minifizer:display
    Parameter Required? Default Values Description
    attribute:name="value" no none String

    By default Hop Minifizer uses the first tag it encounters as a template for the cache tag output (e.g. <link ... > or <script ... >). You may override this by specifying one or more tag attributes using this parameter format.
    combine= no none yes | no

    Shorthand, runtime override of the combine_(css|js) config option
    css= OR js= yes none String

    The “key” value of the queue, to fetch and return
    delimiter= no , String

    When not combining, this is the string to place between cache output
    display= no tag tag

    Specify which format to display as the cache results; the default is “tag”, returning the appropriate asset tag (e.g. <link ...> or <script...></script>).
    url

    This option will only return the URL to the cache, e.g. http://example.com/cache/cachefile.name.ext. When specifying URL, be aware that if Hop Minifizer encounters an error, you may experience unexpected results.
    contents

    Instruct Hop Minifizer to return the contents of the cache, for embedding inline in your template. By default, only the contents are returned; specify one or more attribute:name="type" values to instruct Hop Minifizer to wrap the contents in the appropriate HTML tag (e.g. <style>...</style> or <script>...</script>
    minify= no none yes | no

    Shorthand, runtime override of the minify_(css|js) config option


    exp:hop_minifizer
    Parameter Required? Default Values Description
    attribute:name="value" no none String

    Override the tag output; useful if changing display="contents", since you will need to specify tag output to avoid contents being returned without a containing tag. See Advanced Usage section below.
    combine= no none yes | no

    Shorthand, runtime override of the combine_(css|js) config option
    css= OR js= yes none String

    Filename(s) of assets to cache. Cannot specify both in same call.
    delimiter= no , String

    When not combining, this is the string to place between cache output
    display= no tag tag

    Specify which format to display as the cache results; the default is “tag”, returning the appropriate asset tag (e.g. <link ...> or <script...></script>).
    url

    This option will only return the URL to the cache, e.g. http://example.com/cache/cachefile.name.ext. When specifying URL, be aware that if Hop Minifizer encounters an error, you may experience unexpected results.
    contents

    Instruct Hop Minifizer to return the contents of the cache, for embedding inline in your template. By default, only the contents are returned; specify one or more attribute:name="type" values to instruct Hop Minifizer to wrap the contents in the appropriate HTML tag (e.g. <style>...</style> or <script>...</script>
    minify= no none yes | no

    Shorthand, runtime override of the minify_(css|js) config option
    priority= no 0 Numeric

    For use with queue feature. Value specified is a number; lower numbers are placed earlier in queue order.
    queue= no none String

    To “queue” assets for output; receives a “key” value (e.g. "head_css"), which is used later to lookup and retrieve the queue’d cache


    exp:hop_minifizer:html
    Description

    This tag is required only when all are true:

    1. You have configured Hop Minifizer via EE’s $config object
    2. Hop Minifizer’s extension is disabled
    3. You are not using any of Hop Minifizer’s other tags for CSS or JS processing

    When the above are all true, then Hop Minifizer needs to be called once during template parsing to know to minify your HTML. Placing this tag somewhere in your template will do just that.

  • Requirements

    System Requirements:
    • PHP5+
    • ExpressionEngine 3+
    Optional Requirements:
    • EE2.4+ is required for HTML minification
    • cURL or file_get_contents() is required if using {stylesheet=} or external URLs
    • If using file_get_contents(), PHP must be compiled with support for fopen wrappers (allow_url_fopen must be set to true in PHP.ini)
    • If using file_get_contents() and combining/minifying files over https, PHP must be compiled with OpenSSL support

  • Updating

    Updating is easy:

    1. Download a new version from this website, and extract on your hard drive.
    2. Upload the new files to their appropriate locations.

  • Uninstalling

    1. Navigate to the Add-Ons > Modules tab in your EE control panel and uninstall the module.
    2. Remove the add-on directory from your EE system folder on the server.

  • Version History

    Last updated: one day ago

    4.3.0 - 2023-03-30

    Updated

    • Hello EE7
    • Vendor packages

    Added

    • Adding a debug toggle

    4.2.2 - 2021-12-18

    Fixed

    • Update script bug

    4.2.1 - 2021-09-20

    Fixed

    • Load settings for all cp pages

    4.2.0 - 2021-08-24

    Changed

    • Move config settings out of extensions

    Fixed

    • RegEx to parse stylesheet tag

    4.1.0 - 2021-06-16

    Updated

    • README and add-on description

    Fixed

    • SCSS parser

    Removed

    • Unnecessary icon CSS invert code

    4.0.1 - 2021-02-19

    Fixed

    • Installer Helper file path

    4.0.0 - 2021-01-04

    Updated

    • Hello EE6!
    • Enhanced template parsing for tags

    3.0.2 - 2020-10-05

    Updated

    • Stable release

    3.0.1 - 2020-05-27

    Added

    • Hop license

    3.0.0 - 2019-04-05

    Updated

    • Add-on taken over and updated for use at Hop Studios

Have a Project for Us?

Request a Proposal