Skip to main content

Folder and file naming for Joomla websites

All important at a glance:

Folder label

  • Organize by Menu : The folder structure should mirror the website's menu structure to ensure intuitive organization and easy media discovery.
  • Page-specific folders : A separate folder should be created for each page that contains media. This folder should have the suffix “page-FOLDER-NAME”, where “FOLDER-NAME” is replaced by the actual name of the page (e.g. “page-home”, “page-products”).

Image naming

  • Avoiding special characters : To avoid compatibility issues, special characters should not be used in file names.
  • Lowercase : All letters in filenames should be lowercase to ensure consistency and cross-platform compatibility.
  • Function-based suffixes : The purpose or function of the image should be clearly identified in the file name by a suffix. Examples include “header-imagename.jpg” for a header image or “slideshow-01-imagename.jpg” for the first image of a slideshow.

To create an effective folder structure and notation for images on Joomla pages, it is important to plan for both clarity and future scalability. Here is a detailed guide based on the structure you provide:

1. Basic folder structure

  • /images/ : This is the main folder where all images are stored. It helps organize all visual resources in one central location.

1.1 System (folder)

  • /images/system/ : This folder contains basic system images such as logos and favicon. Examples:
    • logo-company-name.svg : The main logo of the company. It is advisable to use a vector version (.svg) for scalability and clarity.
    • logo-company-name-inverted.svg : An inverted color version of the logo, useful for different backgrounds.
    • favicon.svg : The small icon displayed in browser tabs should also be saved as an .svg for clear display across different devices.

1.2 Page folders

  • /images/page-XXX/ : A separate folder should be created for each page of the website, where "XXX" is the name of the page (e.g. "home", "products", "contact"). This helps organize images specific to each page.
Example: Products page
  • /images/page-products/ : Stores images specific to the product page.
    • /page-product-A/ : Create a separate folder for each product A to organize product-related images.
      • header-product-A.jpg : A main image for product A, ideally in high resolution.
      • slideshow-1-individuelle-bezeichung.jpg : Slideshow images should have individual names that describe the content or feature of the image.
      • call-to-action-product-A.jpg : A specific image that calls for action, e.g. for special offers or key features of the product.

2. Naming rules

  • Use clear and descriptive names that reflect the content or purpose of the image.
  • Separate words with hyphens (-) instead of spaces to avoid compatibility issues.
  • Use lowercase letters to ensure consistency and avoid confusion.
  • If necessary, add numeric suffixes to identify versions or sequences (e.g. "header-01-product-A.jpg", "header-02-product-A.jpg").

This structure and guidelines are intended to help ensure organized and efficient management of image resources on Joomla sites. It is important to maintain consistency in naming and organization to make website maintenance and updating easier.

Categories

Important contributions

Popular posts