4webby web applications
17
Jul 2007

FreakAuth_light 1.1 new assets management

del.icio.usdiggtechnoratiblinklistfurlredditnewsvinespurlyahoofark

FreakAuth_light 1.1 comes, among the other things with a more flexible way to manage your css, js, images etc. I'll refer to the latter as assets.

The new assets structure has been introduced in order to make it easier and faster the integration of FAL with your custom way to handle your website assets, or to your preferred template engine!

The new FAL assets structure  is organized as follows:

FAL new assets structure looks as follows:

public/
  |
  |--admin        <-- ADMIN BACKEND RELATED ASSETS
  |     |
  |     |--css/
  |     |   |--admin_console.css
  |     |
  |     |--js/
  |     |
  |     |--images/
  |
  |--frontend    <-- FRONTEND RELATED ASSETS
  |     |
  |     |--css/
  |     |   |--fal_style.css
  |     |
  |     |--js/
  |     |
  |     |--images/
  |
  |--images      <-- WEBSITE IMAGES
  |
  |
  |--shared      <-- ASSETS (CSS, JS, CSS-IMG) SHARED BETWEEN FRONTEND/BACKEND
        |
        |--css/
        |
        |--js/
        |   |--flash.js
        |   |--jquery.js
        |
        |--images/

The structure above comes as default in FAL_1.1.

We decided to adopt the above structure in order to allow more flexibility if you use a custom template engine (YATS etc.) or if you simply want to manage
your assets (css, javascripts files etc.) in a more tidy fashion.

The new assets structure is highly configurable from the FAL config file
application/config/freakauth_light.php
  1. /*--------------------+
  2. |  TEMPLATE SETTINGS  |
  3. +--------------------*/
  4.  
  5.  /*
  6. |------------------------------------------------------
  7. |  Directory for FreakAuth_light views assets
  8. |------------------------------------------------------
  9. |
  10. | Where we place our css, images, javascript files.
  11. | This is handy if you use other templating systems.
  12. */
  13.  $config['FAL_assets'] = 'public';      //main assets folder
  14.  $config['FAL_css'] = 'css';
  15.  $config['FAL_images'] = 'images';
  16.  $config['FAL_js'] = 'js';
  17.  $config['FAL_assets_shared'] = $config['FAL_assets'].'/shared'; // shared assets
  18.  $config['FAL_assets_front'] = $config['FAL_assets'].'/frontend';// admin frontend
  19.  $config['FAL_assets_admin'] = $config['FAL_assets'].'/admin';   // admin backend

In order to upgrade from previous FAL versions you should:
 
 create those folders in /public:

  • frontend
  • frontend/css
  • frontend/images
  • frontend/js
  • admin/
  • admin/css
  • admin/images
  • admin/js
  • shared/
  • shared/css
  • shared/images
  • shared/js
  • move public/css/fal_style.css into  public/frontend/css/
  • move the public/css/images folder to  public/frontend/css/images
  • move public/css/admin_console.css into  public/admin/css/
  • move and rename the public/css/images_adminconsole folder to  public/admin/images
  • if you used our admin_console.css, replace the old one by the new one
  • if you used yours admin_console.css, you will know better than we do what to do:

   just replace images_adminconsole occurences with ../images (4 occurences)
   images_adminconsole/arrow.gif with ../../shared/images/arrow.gif (1)
   images/error.png with ../../shared/images/error.png (1)
 

  •  remove the old public/css folder
  •  move the public/js folder to public/shared/js


If you do not want to adopt the new assets folder structure, simply change the TEMPLATE SETTINGS in application/config/freakauth_light.php in order to make
 them accomplish your needs!

 If you change the default TEMPLATE SETTINGS, remember to edit the CSS files in order to make them point to the right folders were you put your images.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 i.e. (admin_console.css

admin_console.css
  1. .error, li.error {
  2. color:#760000;
  3. padding-left: 18px;
  4. background: url(../../your_folder_of_css_img/error.png) no-repeat left top;
  5.   }

 

 

EXAMPLE OF MODIFIED TEMPLATE SETTINGS

  • all css in public/css
  • all images in public/images
  • all js in public/js

application/config/freakauth_light.php
  1. /*--------------------+
  2. |  TEMPLATE SETTINGS  |
  3. +--------------------*/
  4.  
  5.  /*
  6. |------------------------------------------------------
  7. |  Directory for FreakAuth_light views assets
  8. |------------------------------------------------------
  9. |
  10. | Where we place our css, images, javascript files
  11. | This is handy if you use other templating systems
  12. */
  13.  $config['FAL_assets'] = 'public'; //main assets folder
  14.  $config['FAL_css'] = 'css';
  15.  $config['FAL_images'] = 'images';
  16.  $config['FAL_js'] = 'js';
  17.  $config['FAL_assets_shared'] = $config['FAL_assets'].'/public'; //shared assets
  18.  $config['FAL_assets_front'] = $config['FAL_assets'].'/public'; //admin frontend
  19.  $config['FAL_assets_admin'] = $config['FAL_assets'].'/public'; //admin backend

 

del.icio.usdiggtechnoratiblinklistfurlredditnewsvinespurlyahoofark