Attacher is a powerful and versatile extension for Cotonti CMF (version 0.9.26+, PHP 8.4+), designed for managing the upload, processing, and display of files and images. The plugin enables attaching files to various system entities, such as articles, forum posts, product cards, or custom modules, and provides flexible tools for handling media files. It supports asynchronous uploads, image processing, integration with visual editors, and display in galleries or downloadable lists.

Help & Support

1. Flexible File Uploads:
   • Multiple Upload Methods: Supports uploads via file selection, drag-and-drop, or URL. Allows direct image uploads from external sites by specifying their URL, which is particularly convenient for creating or editing articles, product cards, forum posts, and other entities.
   • Multi-Upload: Simultaneous upload of multiple files with customizable quantity limits.
   • Chunked Uploads: Uploads files in chunks to bypass server $_POST limits (default 2 MB).
   • File Validation: Filters by extensions (e.g., jpg, png, gif, webp, pdf) and MIME types.
   • Supported Formats: Images, audio, video, archives, and documents.
2. Attachment Management:
   • Binding to Entities: Attach files to any Cotonti entity (pages, posts, products, comments) with module, entity, and field specification.
   • Title Editing: Users can set titles for each file via the interface.
   • File Replacement: Replace existing files without breaking their binding.
   • Sorting: Reorder attachments using drag-and-drop.
   • Statistics: Tracks download counts and preserves original file names.
3. Image Processing:
   • Thumbnails: Automatically generates small and large thumbnails with customizable sizes and cropping modes (crop, width, height, auto).
   • JPEG Conversion: Optional conversion of all uploaded images to JPEG with adjustable compression quality.
   • Watermarks and Textures: Apply watermarks and background textures, with the ability to recreate copies when settings change.
   • Responsive Output: Converts images to <picture> tags for adaptive display (large thumbnails for desktops, small for mobiles).
   • On-the-Fly Processing: Removes style attributes, converts images to links, or wraps them in <span> containers with customizable classes.
   • BB-Code: Supports [att_image?...]err for embedding images in text with size, cropping, and class parameters.
4. Integration with Forms and Editors:
   • Upload Widget: Interactive widget (att_filebox) for creation/editing forms, such as articles, product cards, or forum posts.
   • URL Upload: Direct image uploads from external sites via URL input, simplifying media addition without downloading to the device.
   • Preview: Displays image previews before uploading.
   • Editor Integration: Automatically generates buttons for inserting images into visual editors, respecting size settings.
   • Galleries and Lists: Displays files as galleries (att_gallery), downloadable lists (att_downloads), or general lists (att_display).
5. Security and Restrictions:
   • Permission Checks: Restricts upload, edit, and delete actions based on user permissions.
   • Limits: Configurable limits on single file size, total storage space, and number of attachments.
   • Cleanup: Automatically deletes temporary files (garbage collection) for unsaved forms.
   • Security Token: Uses an x token to secure upload and delete operations.
6. Flexibility and Customization:
   • Templates: Customizable templates for upload interface and file display.
   • Configuration: Detailed settings via admin panel for file types, sizes, quality, and styles.
   • Localization: Supports multilingualism via language files (attacher.<lang>.lang.php).
   • Gallery Compatibility: Integrates with external gallery libraries (e.g., Highslide) via customizable templates.

• Cotonti: Siena 0.9.26+ (latest version recommended).
• PHP: 8.4+
• Libraries:
  • jQuery and jQuery UI for the interface.
  • jQuery File Upload for asynchronous file uploads.
  • JavaScript Load Image for image processing and URL uploads.
  • JavaScript Templates for dynamic template rendering.
  • Canvas-to-Blob for image conversion.
  • TableDnD for drag-and-drop attachment sorting.
• Browsers: Modern browsers (Chrome, Firefox, Safari, Edge). Limited support for IE8+ via iframe transport.
• Conflicts: Incompatible with attach2 and file modules — these must be disabled.
• Database: Uses a separate table to store file information.
•  

1. Download (free) the plugin archive from the GitHub repository and unzip it.
2. Rename the folder to attacher and place it in the plugins directory of your site.
3. Go to the Cotonti admin panel: Site Management → Extensions → Image and File Upload and install the plugin.
4. Create a folder for file uploads (default: datas/attacher) and set permissions to CHMOD 755 or 777. If using a different directory, configure it in the settings.
5. Configure plugin settings in the admin panel: Site Management → Configuration → Plugins → Attacher.
6.  

• File Directory: Path to the upload folder (default: datas/attacher).
• File Name Prefix: Prefix for file names (e.g., att_).
• Allowed File Types: List of extensions (e.g., jpg,png,gif,pdf,zip,mp3,mp4).
• Max Attachments: Limit on the number of files per entity (e.g., 5, 10, or unlimited).
• Allowed MIME Types: MIME types for file picker filtering (e.g., image/*,application/pdf).
• Chunked Upload: Chunk size in bytes (e.g., 1 MB) to bypass $_POST limits.
• Max File Size: Limit on single file size in bytes (e.g., 10485760 for 10 MB).
• Total Storage Space: Storage limit per user in bytes (e.g., 104857600 for 100 MB).
• Auto Upload: Enable/disable automatic uploads after file selection (hides "Start" and "Cancel" buttons).
• Sequential Upload: Choose between sequential or parallel file uploads.
• CSS Inclusion: Enable plugin styles (fileupload.css and jQuery UI).

• Image Scaling: Enable scaling of uploaded images.
• Scaling Width/Height: Maximum image dimensions (e.g., 1920x1080).
• JPEG Conversion: Automatically convert all images to JPEG.
• JPEG Quality: Compression level in percentage (e.g., 80%).

• Show Thumbnails: Enable/disable thumbnail display in the interface.
• Upscale Small Images: Enlarge images smaller than specified thumbnail sizes.
• Thumbnail Width/Height: Sizes for small (e.g., 200x160) and large (e.g., 800x600) thumbnails.
• Cropping Mode: crop (crop), width (by width), height (by height), auto (preserve aspect ratio).

• Watermark: Path to the watermark file (e.g., datas/attacher/watermark.png).
• Min Width/Height: Minimum image dimensions for applying watermarks (e.g., 300x200).
• Background Texture: Path to the texture file (e.g., datas/attacher/texture.jpg).
• Texture Padding: Padding size around the image for texture fill (e.g., 10 pixels).

• Output Mode: Image display options (as a link, <picture>, or plain image).
• Title from Alt: Create title attribute from alt for links.
• Remove Style: Remove style attribute for image alignment.
• Responsive <picture>: Use large and small thumbnails for different devices.
• Container <span>: Create a parent container with customizable CSS classes.

The plugin uses three main templates for the interface and file display:

1. attacher.filebox.tpl:
   • Purpose: File upload form integrated into creation/editing pages (e.g., articles, product cards).
   • Content:
     • File selection field and drag-and-drop area.
     • URL input field for uploading images from external sites (e.g., https://example.com/image.jpg) with an "Upload by URL" button.
     • Control buttons: "Add File", "Start Upload", "Cancel", "Delete", "Select All".
     • Progress bar for upload status.
     • Table for previewing uploaded files with thumbnails.
   • Configuration: Includes the attConfig object with upload settings (extensions, MIME types, limits).
   • Libraries: Integrates jQuery File Upload, JavaScript Load Image, and TableDnD.
2. attacher.files.tpl:
   • Purpose: Full-featured upload management page, used in iframes or standalone interfaces.
   • Content:
     • Upload form with similar interface: file selection, drag-and-drop, URL field.
     • List of uploaded files with options to edit titles, replace, or delete.
     • Supports multi-upload and file display in a table.
   • Styles and Scripts: Includes fileupload.css, jQuery UI, jQuery, JavaScript Templates, Canvas-to-Blob, and other libraries.
3. attacher.templates.tpl:
   • Purpose: Templates for dynamic rendering of files during upload/download.
   • Content:
     • template-upload: Displays files during upload with a progress bar, file name, and cancel buttons.
     • template-download: Shows uploaded files with thumbnails, titles, delete/replace buttons, and editor insertion options.
     • Supports image previews and integration with visual editors.
   • Format: Uses text/x-tmpl for rendering via JavaScript Templates.

All templates are customizable and support localization via language variables ({PHP.L.<key>}).

The att_filebox function adds the upload form to creation/editing pages (e.g., articles, product cards):

<!-- In page.add.tpl (for new pages) -->
<!-- IF {PHP|cot_auth('plug', 'attacher', 'W')} -->
<div>
    {PHP|att_filebox('page', 0)}
</div>
<!-- ENDIF -->
<!-- In page.edit.tpl (for existing pages) -->
<!-- IF {PHP|cot_auth('plug', 'attacher', 'W')} -->
<div>
    {PAGEEDIT_FORM_ID|att_filebox('page', $this)}
</div>
<!-- ENDIF -->

For page lists (page.list.tpl or page.enum.tpl):

<!-- Simple image display -->
<!-- IF {LIST_ROW_ID|att_count('page', $this, '', 'images')} > 0 -->
<div>
    <a href="{LIST_ROW_URL}" title="{LIST_ROW_SHORTTITLE}">
        <img src="{LIST_ROW_ID|att_get('page', $this, '')|att_thumb($this, 200, 160, 'crop', false)}" alt="{LIST_ROW_SHORTTITLE}">
    </a>
</div>
<!-- ENDIF -->
<!-- Using att_display -->
<!-- IF {LIST_ROW_ID|att_count('page', $this, '', 'images')} > 0 -->
<div>
    <a href="{LIST_ROW_URL}" title="{LIST_ROW_SHORTTITLE}">
        {LIST_ROW_ID|att_display('page', $this, '', 'attacher.display.thumb', 'images', 1)}
    </a>
</div>
<!-- ENDIF -->

• All files:

  <!-- IF {PAGE_ID|att_count('page', $this)} > 0 -->
  <div data-att-display="all">
      <h3>{PHP.L.att_attachments}</h3>
      {PAGE_ID|att_display('page', $this, '', 'attacher.display', 'all')}
  </div>
  <!-- ENDIF -->

   

Image Gallery:

<!-- IF {PAGE_ID|att_count('page', $this, '', 'images')} > 0 -->
<div data-att-gallery="yourgallery">
    <h3>{PHP.L.att_gallery}</h3>
    {PAGE_ID|att_gallery('page', $this, '', 'attacher.gallery')}
</div>
<!-- ENDIF -->
<!-- With Highslide (separate plugin) -->
<!-- IF {PAGE_ID|att_count('page', $this, '', 'images')} > 0 -->
<div data-att-gallery="highslide" data-att-group="mygroup">
    <h3>{PHP.L.att_gallery}</h3>
    {PAGE_ID|att_gallery('page', $this, '', 'highslide.attacher.gallery')}
</div>
<!-- ENDIF -->

Downloadable File List:

<!-- IF {PAGE_ID|att_count('page', $this, '', 'files')} > 0 -->
<div data-att-downloads="download">
    <h3>{PHP.L.att_downloads}</h3>
    {PAGE_ID|att_downloads('page', $this)}
</div>
<!-- ENDIF -->

The att_widget function for iframe-based uploads:

<!-- In page.edit.tpl -->
<!-- IF {PHP|cot_auth('plug', 'attacher', 'W')} -->
<div>
    {PAGEEDIT_FORM_ID|att_widget('page', $this)}
</div>
<!-- ENDIF -->
<!-- Link to popup widget -->
<!-- IF {PHP|cot_auth('plug', 'attacher', 'W')} -->
<div>
    {PAGEADD_FORM_ID|att_widget('page', $this, '', 'attacher.link')}
</div>
<!-- ENDIF -->

<!-- IF {PHP|cot_auth('plug', 'attacher', 'W')} AND {FORUMS_POSTS_ROW_USERID} == {PHP.usr.id} -->
{FORUMS_POSTS_ROW_ID|att_widget('forums', $this, '', 'attacher.link')}
<!-- ENDIF -->
<!-- File display -->
<!-- IF {FORUMS_POSTS_ROW_USERID} == {PHP.usr.id} -->
{FORUMS_POSTS_ROW_ID|att_display('forums', $this)}
<!-- ENDIF -->

Use the [att_image?...]err BB-code to embed images in text (e.g., in articles or product cards):

[att_image?id=15]err2
[att_image?id=11&width=350]err2
[att_image?id=2&width=350&height=350]err2
[att_image?id=7&width=320&height=240&alt=Image alt]err2
[att_image?id=88&width=320&height=240&alt=Image alt&class=myclass]err2

Parameters:

• id: Image ID (required).
• width, height: Image dimensions.
• frame: Cropping mode (crop, width, height, auto).
• alt: Alternative text.
• class: CSS class for the image.

• Register New Entity:

  att_fixNewPath($area, $item);

   

Used to bind files to a new entity after creation. Example for the page module:

if (cot_auth('plug', 'attacher', 'W')) {
    if ($id) {
        att_fixNewPath('page', $id);
    }
}

Remove All Attachments:

att_remove_all($user_id = null, $area = null, $item_id = null);

Deletes all files associated with an entity or user. Example for the page module:

if (cot_auth('plug', 'attacher', 'W')) {
    att_remove_all(null, 'page', $id);
}

Create Uploader:

att_filebox($area, $item, $field = '', $type = 'all', $limit = -1, $tpl = 'attacher.filebox');

• Parameters:
  • $area: Module/plugin (e.g., page, forums).
  • $item: Entity ID (or 0 for new entities).
  • $field: Field name for file grouping.
  • $type: File type (all, image, file).
  • $limit: File count limit (-1 for group settings, 0 for unlimited).
  • $tpl: Template (attacher.filebox by default).

• Widget in iframe:

  att_widget($area, $item, $field = '', $tpl = 'attacher.widget', $width = '100%', $height = '200');

   
• Creates an iframe or link to a popup uploader.

• Display Files:

  att_display($area, $item, $field = '', $tpl = 'attacher.display', $type = 'all', $limit = 0, $order = '');

   
• Displays all files or a specific type (e.g., images only).

• Display Gallery:

  att_gallery($area, $item, $field = '', $tpl = 'attacher.gallery', $limit = 0, $order = '');

   
• Creates an image gallery with support for external libraries (e.g., Highslide).

• Count Attachments:

  att_count($area, $item, $field = '', $type = 'all');

   
• Returns the number of files attached to an entity. $field = '_all_' returns the total count.

• Display Download List:

  att_downloads($area, $item, $field = '', $tpl = 'attacher.downloads', $limit = 0, $order = '');

   
• Generates a list of downloadable files.

• Create Thumbnail:

  att_thumb($id, $width = 0, $height = 0, $frame = '', $watermark = true);

   
• Generates a thumbnail URL with specified parameters.

• Get Item Data:

  att_get($area, $item, $field = '', $column = '', $number = 'first');

   
• Returns file data (e.g., path, name, size).

• Generate HTML for Image:

  att_customizable_thumb($m);

   
• Converts an <img> tag into a customizable HTML snippet (<span><a><picture><source><img></picture></a></span>).

• Generate HTML from BB-Code:

  att_customizable_thumb_bbcode($m);

   
  12. Converts [att_image?...]err BB-code to HTML with support for responsive <picture>.

• Delete Copies: Remove all thumbnails to recreate them with new settings (e.g., updated watermark).
• Cleanup: Delete unattached files (garbage collection) via the admin panel.
• File Management: View, edit, and delete uploaded files.

• Conflicts: Incompatible with attach2 and file modules. Disable them before use.
• Galleries: Supports external libraries (e.g., Highslide) via customizable templates.
• URL Upload: Implemented via JavaScript Load Image, enabling image uploads from external sites without downloading to the device.
• Localization: Supported through language files (attacher.<lang>.lang.php).