4
Technical changes in Piwigo 15
Linty edited this page 2024-10-15 17:07:41 +02:00

Piwigo 14 introduced the "search in set" button/icon. Unfortunately it is followed by search engine robots and then indexed. In commit https://github.com/Piwigo/Piwigo/commit/b6789d4de9f701f4de01ae2ede439f413a4044a5 we ask robots to avoid indexing the search pages, but it would also be good to ask them to not follow links. If your theme has an index.tpl template, add rel="nofollow" on icon link and button link.

How to integrate a browsers built-in PDF reader to a theme

This is for themes that don't inherit picture.tpl or picture_content.tpl from default.

A new configuration setting is added : $['pdf_viewer_filesize_threshold'] this value is set in MB (megabytes). This corresponds to the treshold where we no longer display the web browsers PDF viewer.

In order to implement the PDF reader, please include in your themes the following :

picture.tpl

In picture.tpl or where the picture infos are found this is what allows the number of pages for the PDF to be displayed. the HTML is to be adapted to the themes template.

{if isset($PDF_NB_PAGES) and $current.path_ext=="pdf" }
  <div id="Pages" class="imageInfo">
    <dt>{'Pages'|@translate}</dt>
      <dd>{$PDF_NB_PAGES}</dd>
    </div>
{/if}

picture_content.tpl

In the picture_content or where the img tag is for displaying the picture we need to test if the file is a PDF. if this is true then we use an embed tag instead. We also check if the PDF file is bigger than PDF_VIEWER_FILESIZE_THRESHOLD

{if isset($current.path_ext) and $current.path_ext == 'pdf' and $current.filesize < $PDF_VIEWER_FILESIZE_THRESHOLD}
  <div>
    <embed src="{$ROOT_URL}{$current.path}" type="application/pdf"/>
  </div>
{else}
  <img class="file-ext-{if isset($current.file_ext)}{$current.file_ext}{/if} path-ext-{if isset($current.path_ext)}{$current.path_ext}{/if}" {if (isset($current.path_ext) and $current.path_ext == 'svg')} src="{$current.path}" {elseif $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}"{$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">
	
  {if isset($current.path_ext) and $current.path_ext == 'pdf' and $current.filesize > $PDF_VIEWER_FILESIZE_THRESHOLD}
  <div class="pdf-too-heavy">
    {'The PDF you requested is too large to display on this page.'|translate}</br>
    <a href="{$ROOT_URL}{$current.path}" target="_blank">{'Click here to display it'|translate}</a>
  </div>
  {/if}
{/if}

How to add a tab to a user's editing pop-in

Piwigo 15 has completely redesigned the user edit pop-in, adding tabs for greater fluidity and accessibility. We've also introduced a new system for your plugins to interact with the pop-in by adding a new tab.

You can see an example in the skeleton plugin.

First of all : Use the event to add your tpl to the "user_list" page

Example event :

add_event_handler('loc_end_admin', 'PLUGIN_NAME_add_tab_users_modal', EVENT_HANDLER_PRIORITY_NEUTRAL, $admin_file);

Example tpl :

{* Your file javascript () *}
{combine_script id="jquery.PLUGIN_NAMEuserlistjs" load="footer" path="{$PLUGIN_PATH}/js/notes.js"}

{* The HTML element to display in user modal
/!\ this id is important for the script *}
<textarea id="plugins_textarea"></textarea>

{* The HTML Style 
/!\ For better integration display: none; your html element *}
{html_style}
  #plugins_textarea {
    display: none;
    width: 100%;
    height: 100%;
    resize: none;
  }
{/html_style}

Then, follow Method 1 or Method 2 as explained below.

Method 1 : Adding a Tab with a Dedicated Function

Step 1 : Create a new table to store the data. To do this, go to the “install” function in the “maintain.class.php” file.

pwg_query('
CREATE TABLE IF NOT EXISTS `'. $this->table .'` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `notes` VARCHAR(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
)
;');

Remember to also define the logic for deleting the table in the "uninstall" function.

pwg_query('DROP TABLE `'. $this->table .'`;');

Step 2 : Use the “ws_add_methods” event to add new API methods to get and set your data.

NEW IN PIWIGO 15

Step 3 : Use the plugin_add_tab_in_user_modal function to add a new tab to the user modal with the following parameters in "{$PLUGIN_PATH}/js/notes.js"

  • param 1 (string): Name of the tab
  • param 2 (string): ID of the div or element to be added to the tab (your content should be coded in the first step by adding the tpl)
  • param 3 (string or null): Name of the column in the user_infos table (IMPORTANT: this parameter must be null in this method)
  • param 4 (function or null): Function to retrieve data from the plugin's HTML element and save it
  • param 5 (function or null): Function to retrieve data from your API method and display it in the plugin's HTML element
  • IMPORTANT: PARAM 3 MUST BE NULL IF PARAM 4 AND 5 ARE USED!
plugin_add_tab_in_user_modal(
    'MyPlugin Notes',
    'plugins_textarea',
    null,
    () => {
      // Function to retrieve data from the HTML element and save it via your API method
      console.log('set data');
    },
    () => {
      // Function to retrieve data from the database via your API method and display it in the user modal tab
      console.log('get data');
    }
  );

Method 2: Adding a Tab with a New Column in Users Table

Step 1 : Add a new column to the “USER_INFOS_TABLE” table for your plugin data. To do this, go to the “install” function in the “maintain.class.php” file.

$result = pwg_query('SHOW COLUMNS FROM `'.USER_INFOS_TABLE.'` LIKE "PLUGIN_NAME_COLUMN";');
    if (!pwg_db_num_rows($result))
    {
      pwg_query('ALTER TABLE `' . USER_INFOS_TABLE . '` ADD `PLUGIN_NAME_COLUMN` VARCHAR(255) DEFAULT NULL;');
    }

Remember to also define the logic for deleting the column in the "uninstall" function.

pwg_query('ALTER TABLE `'. USER_INFOS_TABLE .'` DROP `PLUGIN_NAME_COLUMN`;');

Step 2 : Use the “ws_invoke_allowed” and “ws_users_getList” events to add your parameter to the API methods users.setInfos and users.getInfos

NEW IN PIWIGO 15

Step 3 : Use the plugin_add_tab_in_user_modal function to add a new tab to the user modal with the following parameters in "{$PLUGIN_PATH}/js/notes.js"

  • param 1 (string): Name of the tab
  • param 2 (string): ID of the div or element to be added to the tab (your content should be coded in the first step by adding the tpl)
  • param 3 (string or null): Name of the column in the user_infos table
  • param 4 (function or null): Function to retrieve data from the plugin's HTML element and save it (IMPORTANT: this parameter 4 is null in this method)
  • param 5 (function or null): Function to retrieve data from your API method and display it in the plugin's HTML element (IMPORTANT: this parameter 5 is null in this method)
  • IMPORTANT: DO NOT PASS PARAM 4 AND 5 IF PARAM 3 IS USED!
plugin_add_tab_in_user_modal(
    'MyPlugin Notes method2',
    'plugins_textarea',
    'PLUGIN_NAME_COLUMN'
  );