🌍
English
Differences
This shows you the differences between two versions of the page.
|
dev:changes_in_2.2 [2011/03/14 09:52] plg typo fixed |
— (current) | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Technical changes in Piwigo 2.2 ====== | ||
| - | FIXME (2011-03-09) this page is under preparation | ||
| - | |||
| - | This page lists the technical changes that may be useful for plugin and theme developpers to make their extension compatible with Piwigo 2.2. | ||
| - | |||
| - | ===== cleaner URL for plugin administration ===== | ||
| - | |||
| - | If the adminstration main page of your plugin is plugins/plugin_directory/admin.php, then you can simplify the URL of your plugin in the main.inc.php from this: | ||
| - | |||
| - | <code php> | ||
| - | add_event_handler('get_admin_plugin_menu_links', 'localfiles_admin_menu'); | ||
| - | function localfiles_admin_menu($menu) | ||
| - | { | ||
| - | array_push( | ||
| - | $menu, | ||
| - | array( | ||
| - | 'NAME' => 'LocalFiles Editor', | ||
| - | 'URL' => get_admin_plugin_menu_link(LOCALEDIT_PATH . 'admin.php') | ||
| - | ) | ||
| - | ); | ||
| - | |||
| - | return $menu; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | into this: | ||
| - | |||
| - | <code php> | ||
| - | add_event_handler('get_admin_plugin_menu_links', 'localfiles_admin_menu'); | ||
| - | function localfiles_admin_menu($menu) | ||
| - | { | ||
| - | array_push( | ||
| - | $menu, | ||
| - | array( | ||
| - | 'NAME' => 'LocalFiles Editor', | ||
| - | 'URL' => get_root_url().'admin.php?page=plugin-'.basename(dirname(__FILE__)) | ||
| - | ) | ||
| - | ); | ||
| - | |||
| - | return $menu; | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | * admin.php?page=plugin§ion=LocalFilesEditor%2Fadmin.php (ugly) in Piwigo 2.1 | ||
| - | * admin.php?page=plugin-LocalFilesEditor (nice) in Piwigo 2.2 | ||
| - | |||
| - | Even better, if you have several tabs on your plugin administration screen, you can append -tabName in the "page" URL parameter. | ||
| - | |||
| - | * admin.php?page=plugin§ion=LocalFilesEditor%2Fadmin.php&tab=css (ugly) in Piwigo 2.1 | ||
| - | * admin.php?page=plugin-LocalFilesEditor-css (nice) in Piwigo 2.2 | ||
| - | |||
| - | ===== No longer hard code the ./local/ directory ===== | ||
| - | |||
| - | If you use the ./local directory to store your theme/plugin configuration, I suggest to move configuration to the "config" table which does a very good job. If you want to keep configuration in a separate file, don't hard code the ./local/ directory, user $conf['local_dir'] instead. | ||
| - | |||
| - | Starting from Piwigo 2.2, it is possible to run several photo galleries with the same installation of Piwigo, this is a basic multisite feature and each site has its own $conf['local_dir'] | ||
| - | |||
| - | ===== Adviser mode was removed ===== | ||
| - | |||
| - | Because it was not that useful and had impact on many files, we've decided to remove the Adviser mode. In your PHP files, remove the: | ||
| - | |||
| - | <code php> | ||
| - | if (is_adviser()) | ||
| - | </code> | ||
| - | |||
| - | and in the TPL files, remove the: | ||
| - | |||
| - | <code html> | ||
| - | {$TAG_INPUT_ENABLED} | ||
| - | </code> | ||
| - | |||
| - | The function is_adviser() is deprecated but not removed : it will always return //false//. | ||
| - | |||
| - | ===== combine_css ===== | ||
| - | |||
| - | To reduce the number of HTTP requests from the visitor web browser to the web server, we use the new "combine_css" method, which merge several CSS files into a single one, minified. | ||
| - | |||
| - | Piwigo 2.1 | ||
| - | <code html> | ||
| - | {html_head}<link rel="stylesheet" type="text/css" href="{$LOCALEDIT_PATH}locfiledit.css">{/html_head} | ||
| - | </code> | ||
| - | |||
| - | Piwigo 2.2 | ||
| - | <code html> | ||
| - | {combine_css path="plugins/LocalFilesEditor/locfiledit.css"} | ||
| - | </code> | ||
| - | |||
| - | For coding steps, before releasing your theme/plugin, you can deactivate the combine_css feature : | ||
| - | |||
| - | <code php> | ||
| - | $conf['template_combine_files'] = false; | ||
| - | </code> | ||
| - | |||
| - | ===== combine_script replaces known_script ===== | ||
| - | |||
| - | To reduce the number of HTTP requests from the visitor web browser to the web server, we use the new "combine script" method, which merge several javascript files into a single one, minified. | ||
| - | |||
| - | <code html> | ||
| - | {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'} | ||
| - | {combine_script id='rating' load='async' require='core.scripts' path='themes/default/js/rating.js'} | ||
| - | {combine_script id='jquery' path='themes/default/js/jquery.min.js'} | ||
| - | {combine_script id='jquery.cluetip' load='async' require='jquery' path='themes/default/js/plugins/jquery.cluetip.js'} | ||
| - | |||
| - | {combine_script id="jquery" load="async"} | ||
| - | {combine_script id="jquery.ui" load="async"} | ||
| - | {combine_script id="jquery.ui.draggable" load="async"} | ||
| - | </code> | ||
| - | |||
| - | * **id** : a string that makes the javascript file unique | ||
| - | * **load** : header/footer/async. header and footer values means the javascript file need to be loaded by the web browser to display the page. Try to use "async" if possible, to speed up page display. For example Google Analytics javascript could be "async". | ||
| - | * **require** : the id of the parent javascript file. You can define several ids, separated by commas : __"jquery, jquery.ui,my_script"__ | ||
| - | * **path** : relative to the "root url" of your gallery | ||
| - | |||
| - | Note: the "require" argument is optionnal for jquery, jquery.ui, jquery.effects all jquery plugins jquery.ui.xxxx or jquery.effects.xxxx. The "path" is optionnal is the javascript file can be found under themes/default/js/ui. | ||
| - | |||
| - | To write javascript code inside your template (with dependencies on one or several javascript files) | ||
| - | <code html> | ||
| - | {footer_script require='jquery.ui.xxxx'}{literal} | ||
| - | jQuery(document).ready(function() { | ||
| - | alert("This is a test"); | ||
| - | }); | ||
| - | {/literal}{/footer_script} | ||
| - | </code> | ||
| - | |||
| - | No need to have a "require" in your footer_script. You can have a piece of javascript code in your template file that you want to be executed at the end of the page, like this: | ||
| - | |||
| - | <code html> | ||
| - | {footer_script}{literal} | ||
| - | alert("This is a test"); | ||
| - | {/literal}{/footer_script} | ||
| - | </code> | ||
| - | |||
| - | |||
| - | ==== Example 1, jquery.fcbkcomplete ==== | ||
| - | |||
| - | Piwigo 2.1: | ||
| - | <code html> | ||
| - | {known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"themes/default/js/plugins/jquery.fcbkcomplete.js"} | ||
| - | {literal} | ||
| - | <script type="text/javascript"> | ||
| - | $(document).ready(function() { | ||
| - | $("#tags").fcbkcomplete({ | ||
| - | json_url: "admin.php?fckb_tags=1", | ||
| - | cache: false, | ||
| - | filter_case: false, | ||
| - | filter_hide: true, | ||
| - | firstselected: true, | ||
| - | filter_selected: true, | ||
| - | maxitems: 100, | ||
| - | newel: true | ||
| - | }); | ||
| - | }); | ||
| - | </script> | ||
| - | {/literal} | ||
| - | </code> | ||
| - | |||
| - | Piwigo 2.2: | ||
| - | <code html> | ||
| - | {combine_script id='jquery.fcbkcomplete' load='footer' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} | ||
| - | |||
| - | {footer_script require='jquery.fcbkcomplete'}{literal} | ||
| - | jQuery(document).ready(function() { | ||
| - | jQuery("#tags").fcbkcomplete({ | ||
| - | json_url: "admin.php?fckb_tags=1", | ||
| - | cache: false, | ||
| - | filter_case: false, | ||
| - | filter_hide: true, | ||
| - | firstselected: true, | ||
| - | filter_selected: true, | ||
| - | maxitems: 100, | ||
| - | newel: true | ||
| - | }); | ||
| - | }); | ||
| - | {/literal}{/footer_script} | ||
| - | </code> | ||
| - | |||
| - | ==== Example 2, jquery.ui.sortable ==== | ||
| - | |||
| - | Piwigo 2.1: | ||
| - | <code html> | ||
| - | {known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"} | ||
| - | {known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js" } | ||
| - | {known_script id="jquery.ui.sortable" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.sortable.packed.js" } | ||
| - | |||
| - | {literal} | ||
| - | <script type="text/javascript"> | ||
| - | jQuery().ready(function(){ | ||
| - | jQuery(".catPos").hide(); | ||
| - | jQuery(".drag_button").show(); | ||
| - | jQuery(".categoryLi").css("cursor","move"); | ||
| - | jQuery(".categoryUl").sortable({ | ||
| - | axis: "y", | ||
| - | opacity: 0.8 | ||
| - | }); | ||
| - | }); | ||
| - | </script> | ||
| - | {/literal} | ||
| - | </code> | ||
| - | |||
| - | Piwigo 2.2: | ||
| - | <code html> | ||
| - | {footer_script require='jquery.ui.sortable'}{literal} | ||
| - | jQuery(document).ready(function() { | ||
| - | jQuery(".catPos").hide(); | ||
| - | jQuery(".drag_button").show(); | ||
| - | jQuery(".categoryLi").css("cursor","move"); | ||
| - | jQuery(".categoryUl").sortable({ | ||
| - | axis: "y", | ||
| - | opacity: 0.8 | ||
| - | }); | ||
| - | }); | ||
| - | {/literal}{/footer_script} | ||
| - | </code> | ||
| - | |||
| - | No need to use combined_script, because Piwigo will automatically load jquery.ui.sortable, which automatically requires jquery.ui which automatically requires jquery. It works because jquery.ui.sortable is available in themes/default/js/ui | ||
| - | |||
| - | ===== Convert your icon files into a single "sprite" ===== | ||
| - | |||
| - | CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image. Instead of performing an HTTP request for each icon of a page, the web browser only performs a single request to get all icons at once. Read more on [[http://www.alistapart.com/articles/sprites|CSS Sprites: Image Slicing’s Kiss of Death]]. | ||
| - | |||
| - | 1) start the Gimp | ||
| - | |||
| - | 2) open themes/default/s26/outline_ff3363.png (with the pink icons) | ||
| - | |||
| - | 3) switch to RGB Mode : Image > Mode > RGB | ||
| - | |||
| - | 4) in the Toolbox pane, make sure you have the "Rectangle Select Tool" active | ||
| - | |||
| - | 5) create a new layer, on top of the background (which includes the icons) and select it | ||
| - | |||
| - | {{ :en:dev:piwigo22_icons_sprite-01.png }} | ||
| - | |||
| - | 6) open your icon home.png, Select > All (Ctrl+a), Edit > Copy (Ctrl+c) | ||
| - | |||
| - | {{ :en:dev:piwigo22_icons_sprite-02.png }} | ||
| - | |||
| - | 7) focus on the sprite window | ||
| - | |||
| - | 8) Edit > Paste and move the floating selection with the mouse cursor, your home icon must be on top of the default home icon | ||
| - | |||
| - | {{ :en:dev:piwigo22_icons_sprite-03.png }} | ||
| - | |||
| - | 9) click outside the current selection, the pasted icon will be merged into the "New Layer" | ||
| - | |||
| - | 10) reproduce steps 6 to 9 for each icon of the sprite | ||
| - | |||
| - | 11) select the "Background" layer in the "Layers" pane (but don't hide the "New Layer") | ||
| - | |||
| - | {{ :en:dev:piwigo22_icons_sprite-04.png }} | ||
| - | |||
| - | 12) in the image window, select each icon you have replaced and press "suppr" on your keyboard, this will delete the background, ie the default icon | ||
| - | |||
| - | {{:en:dev:piwigo22_icons_sprite-05.png}} | ||
| - | {{:en:dev:piwigo22_icons_sprite-06.png}} | ||
| - | |||
| - | 13) save the file as themes/yourTheme/icon/icons_sprite.png (use option "Merge visible layers" when saving) | ||
| - | |||
| - | {{ :en:dev:icons_sprite_hover.png }} | ||
| - | |||
| - | Now you have a sprite with all your icons. Let's declare it in the theme.css of your theme. Open your theme.css and write: | ||
| - | |||
| - | <code css> | ||
| - | .pwg-icon { | ||
| - | background-image: url(icon/icons_sprite.png); | ||
| - | } | ||
| - | |||
| - | A:hover .pwg-icon { | ||
| - | background-image: url(icon/icons_sprite.png); | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | Open your web browser and check the icons are correctly displayed. If you have problems like alignment, reopen icons_sprites.png, select the icon with the Rectangle Select Tool, Edit>Cut (Ctrl+x), Edit>Paste (Ctrl+v) and move it up/down/right/left with arrows on your keyboard, save file and check in your web browser. | ||
| - | |||
| - | ==== Optional : create a specific sprite for "a:hover" ==== | ||
| - | |||
| - | One thing really nice with the new system to display icons is the ability to have a distinct icon for a:hover (when the mouse cursor is on the icon). For this example, I've decided to have my icons grey by default and colored when cursor is over it. | ||
| - | |||
| - | 1) copy icons_sprite.png as icons_sprite_hover.png | ||
| - | |||
| - | 2) modify your themes.css as follows | ||
| - | |||
| - | <code css> | ||
| - | .pwg-icon { | ||
| - | background-image: url(icon/icons_sprite.png); | ||
| - | } | ||
| - | |||
| - | A:hover .pwg-icon { | ||
| - | background-image: url(icon/icons_sprite_hover.png); | ||
| - | } | ||
| - | </code> | ||
| - | |||
| - | 3) open icons_sprite.png with the Gimp | ||
| - | |||
| - | 4) Image > Mode > Grayscale | ||
| - | |||
| - | 5) save and see the nice result in your web browser | ||