by | Saturday, 23 May 2026

abcheader-logo

ABC Header

ABC Header gives HumHub spaces and user profiles professional, update-safe header control. Customize responsive banner proportions, choose circle or square logos, preserve transparent images, support AVIF/WebP/JPG/PNG optimization, and bulk-convert existing banners and logos to the smallest suitable file size without modifying HumHub core files.

EUR 25.00€ EUR 75.00€
EUR 75.00€
Buy Now

ABC Header is a professional HumHub module for customizing space and user profile headers without changing HumHub core code. It replaces fragile core hacks with a clean module-based solution, so header behaviour remains easier to maintain across HumHub updates.

With ABC Header, administrators can control how profile and space banners appear across desktop, tablet, and mobile layouts. Banner proportions are handled responsively, so header images keep their intended visual ratio instead of being forced into HumHub’s default narrow banner height.

The module also gives much better control over profile images and space logos. Depending on the design need, logos can be displayed as a circle, rounded square, or sharp square. This is especially useful for organizations, schools, companies, churches, shops, and directory spaces where square logos often look better than cropped circular images.

ABC Header also improves image quality and performance. It supports modern image formats and can automatically compare AVIF, WebP, JPG, and PNG versions of a banner or logo, then keep the smallest suitable file. Transparent logos are handled properly, so PNG/WebP/AVIF files with transparency no longer show unwanted black backgrounds.

For existing installations, admins can run a bulk conversion process for all current header banners and profile/logo images. Before conversion, an admin-only backup download option helps protect original files. There is also an optional guarded setting to delete original files after conversion, with a clear backup warning.

Main features include:

  • Responsive custom header banner proportions
  • Space and user profile header support
  • No HumHub core file modifications required
  • Circle, rounded-square, or sharp-square logo display
  • Improved handling for transparent logos
  • AVIF, WebP, JPG, and PNG optimization
  • Automatic smallest-file selection per image
  • Bulk conversion for existing banners and logos
  • Admin-only backup download before conversion
  • Optional original-file cleanup with warning
  • Clean Theme compatibility improvements
  • Designed for HumHub 1.18+ and ABC Suite installations

 

ABC Header is ideal for branded communities, school directories, company networks, church portals, marketplaces, and any HumHub platform where spaces and profiles should look professional, load quickly, and stay update-safe.

 

 

 

ABC Header Manual

Professional HumHub Headers Without Core Hacks

ABC Header is a HumHub module that gives admins, space owners, and users simple control over header banners and profile/logo images without editing HumHub core files.

For many years, simple changes such as a taller space banner, a square logo, or support for modern image formats required manual modifications inside HumHub core files. This was unreliable because every HumHub update could overwrite those changes. ABC Header solves this by moving these features into a normal module, so non-programmers can manage headers directly from the interface.

1. What ABC Header Does

ABC Header controls the visual behavior of:

  • Space header banners

  • User profile header banners

  • Space logos

  • User profile images

  • Space card logos

  • User image widgets

  • Header image upload and edit behavior

  • Image optimization for banners and logos

The module is especially useful for communities, directories, school platforms, churches, organizations, companies, marketplaces, and branded HumHub networks where every space should look professional and load quickly.

2. Why This Module Exists

HumHub’s default header banner is limited to a narrow size. In many real-world installations, that is not enough.

For example, a school, church, company, shop, NGO, or directory listing often needs a more visual header area. The default HumHub banner can crop too much, and logos are often forced into circles even when the original logo is square or rectangular.

Before ABC Header, this required editing files such as:

protected/humhub/libs/ProfileBannerImage.php
protected/humhub/models/forms/UploadProfileImage.php

That works temporarily, but it is not update-safe. After every HumHub update, the same code changes must be repeated.

ABC Header removes this problem. The banner size, image format support, logo shape, and optimization behavior can now be managed from the module configuration.

3. Main Features

ABC Header includes:

  • Custom responsive banner proportions

  • Global header settings

  • Space and user header support

  • Circle, rounded-square, or sharp-square logo display

  • Clean Theme compatibility for logo shapes

  • Transparent PNG/WebP/AVIF logo support

  • AVIF, WebP, JPG, and PNG support

  • Automatic smallest-file image optimization

  • Bulk conversion for existing banners and logos

  • Admin-only backup download before conversion

  • Optional deletion of original files after backup

  • AVIF edit-modal helper previews

  • Better upload handling for modern images

  • No HumHub core modifications required

4. Installation

Upload the module folder to:

protected/modules/abcheader

Then go to:

Administration → Modules

Enable ABC Header.

After installation or update, clear the cache:

cd protected
php yii cache/flush-all

After larger updates, especially when CSS or JavaScript changed, also clear published assets:

rm -rf runtime/cache/*
rm -rf runtime/assets/*
rm -rf ../assets/*
php yii cache/flush-all

Then hard-refresh the browser.

Normally, this module does not need:

php yii module/scan

5. Important Note for Existing Core Hacks

If you previously modified HumHub core files to change banner size or upload formats, ABC Header is intended to replace those modifications.

Recommended approach:

  1. Install and enable ABC Header.

  2. Configure the desired banner and logo settings.

  3. Test space and user headers.

  4. Restore the modified HumHub core files back to the original HumHub version.

This keeps your installation update-safe.

6. Global Configuration

Go to:

Administration → Modules → ABC Header → Configure

Here the HumHub admin can define the default behavior for all spaces and user profiles.

Typical global settings include:

  • Default banner width

  • Default banner height

  • Mobile banner height

  • Banner object position

  • Profile/logo shape

  • Profile/logo image fit

  • Allowed upload formats

  • AVIF support

  • WebP support

  • Automatic image optimization

  • Bulk conversion options

  • Backup options

  • Original-file cleanup options

The global configuration is useful when the whole platform should follow the same visual standard.

7. Header Banner Proportions

ABC Header allows banners to use a professional ratio instead of HumHub’s default narrow banner.

For example:

1920 × 849

This does not mean the browser always forces the banner to be 849px high. Instead, ABC Header keeps the proportion of the banner responsive.

That means:

  • on a wide desktop screen, the banner appears larger

  • on a smaller screen, it scales down

  • the visual ratio stays correct

  • the sides of the banner are not unnecessarily cut off

  • mobile display can use a separate height setting

This is important because a fixed 849px height inside a narrow content area would make the image appear too tall and crop the sides. ABC Header now treats the configured size as a banner ratio, not simply as a forced frontend height.

8. Banner Display Behavior

ABC Header supports different ways of displaying the banner image.

The most common behavior is:

cover

This fills the available header area and may crop slightly if the screen ratio differs.

For logos or images where cropping is not wanted, a contain-style behavior can be used where available. This helps keep the full image visible.

The module also supports banner positioning, for example:

center center

This controls which part of the image remains visually centered when cropping is necessary.

9. Space and User Headers

ABC Header works for both:

/s/... space pages
/u/... user profile pages

This means the same professional header behavior can be used for organizations and personal profiles.

Examples:

  • A school can use a wide campus or classroom banner.

  • A church can use a worship or community banner.

  • A company can use a branded corporate header.

  • A user can use a personal profile banner.

  • A directory space can use a header that matches its category.

10. Logo and Profile Image Shapes

HumHub often displays profile images and space logos as circles. This is fine for portraits, but not always good for logos.

Many organization logos are designed as:

  • square logos

  • rectangular logos

  • shield logos

  • school badges

  • company marks

  • church logos

  • icons with transparent background

If these are forced into circles, important parts can be cut off.

ABC Header allows logo/profile images to be displayed as:

Circle
Rounded square
Sharp square

This makes it much easier to show logos correctly.

Use cases:

  • Circle: best for personal portraits and profile photos.

  • Rounded square: best for modern brand icons and app-style logos.

  • Sharp square: best for formal logos, school badges, certificates, and official organization marks.

11. Space Card Logo Shapes

ABC Header does not only adjust the large profile header logo. It also applies logo shape settings to space cards and image widgets.

This includes:

  • space cards

  • space directory views

  • space chooser items

  • user image widgets

  • acronym fallback icons

This is important because the same logo should not appear square in one place and circular in another unless that is intentionally configured.

12. Clean Theme Compatibility

Some themes, especially Clean Theme, may force thumbnails to circles with CSS like:

.rounded:not(#img-logo) {
    border-radius: 50% !important;
}

Because this rule uses !important, it can override normal module styling.

ABC Header includes stronger overrides so the selected shape can still apply without manually editing Clean Theme SCSS.

If logo shapes still do not update after installing ABC Header:

  1. Clear HumHub cache.

  2. Clear published assets.

  3. Hard-refresh the browser.

  4. Check whether additional custom CSS in the theme is forcing border-radius: 50% !important.

In most installations, editing Clean Theme files should no longer be necessary.

13. Transparent Logos

ABC Header improves transparent image handling.

Transparent logos should stay transparent. This is especially important for:

  • PNG logos

  • WebP logos with transparency

  • AVIF logos with transparency

  • white logos on dark mode

  • dark logos on light mode

  • school badges

  • company marks

  • app-style icons

Without correct handling, transparent images can be converted into JPG and receive a black or unwanted background. ABC Header avoids this where possible.

Important: If a transparent logo was already converted by HumHub core into JPG before ABC Header was installed, the transparency is already lost. In that case, upload the original transparent PNG/WebP/AVIF again.

14. Supported Image Formats

ABC Header supports modern image workflows for:

AVIF
WebP
JPG / JPEG
PNG

The exact server-side support depends on the server image libraries.

For best results, the server should have ImageMagick or another image backend with support for:

  • AVIF decoding/encoding

  • WebP decoding/encoding

  • PNG transparency

  • JPEG processing

If the browser can display AVIF but the server cannot decode AVIF, the image may display on the frontend but not be editable or convertible server-side.

15. AVIF in Edit and Crop Modals

HumHub’s edit/crop modals may not always handle AVIF directly. ABC Header solves this by creating helper preview images for the modal.

How it works:

  1. The frontend can use the optimized AVIF image.

  2. For the edit/crop modal, ABC Header creates a same-dimension helper preview.

  3. The helper preview is usually WebP or PNG.

  4. Crop coordinates stay correct because the helper file keeps the same dimensions.

  5. The final saved image can still be optimized again.

This avoids the problem where the AVIF banner or logo displays on the page but does not appear correctly in the edit modal.

ABC Header supports this behavior for:

  • banner edit modal

  • logo/profile image edit modal

16. Automatic Smallest-File Optimization

ABC Header can optimize uploaded banners and logos by testing different image formats.

It can compare:

AVIF
WebP
JPG
PNG

and then keep the smallest suitable version for that specific image.

This is important because there is no single best format for every image.

Examples:

  • A photo banner may be smallest as AVIF.

  • A logo with transparency may be better as WebP or PNG.

  • A simple graphic may compress very well as PNG.

  • A fallback JPG may be safer if transparency is not needed.

ABC Header can choose based on the actual file size result, not just a fixed format rule.

17. Upload Optimization

When enabled, ABC Header can optimize newly uploaded header images automatically.

This applies to:

  • space banners

  • user banners

  • space logos

  • user profile images

The goal is to reduce file size while keeping good visual quality.

This improves:

  • page load speed

  • mobile performance

  • storage usage

  • bandwidth usage

  • user experience on slower connections

18. Bulk Conversion for Existing Images

Existing HumHub installations may already contain many old JPG, PNG, or WebP header images.

ABC Header includes an admin-only bulk conversion option so existing banners and logos can be optimized after installation.

This is useful when:

  • many spaces already exist

  • many logos were uploaded before ABC Header

  • old images are too large

  • you want to convert existing files to smaller AVIF/WebP/PNG/JPG versions

  • you want consistent image handling across the platform

The bulk converter processes existing header banners and logos and chooses the smallest suitable format where possible.

19. Backup Before Conversion

Before running bulk conversion, always create a backup.

ABC Header includes an admin-only backup download option for original header images.

Recommended workflow:

  1. Open ABC Header configuration.

  2. Download the backup ZIP.

  3. Store the backup safely.

  4. Run bulk conversion.

  5. Check several spaces and user profiles.

  6. Only after testing, consider deleting originals.

This is important because image conversion can depend on server libraries and quality settings. A backup protects against unexpected results.

20. Deleting Original Files

ABC Header can optionally delete original files after conversion, but this should be used carefully.

The module includes warnings because deleting originals means you may no longer be able to restore the exact uploaded source image unless you have a backup.

Recommended:

Download backup first.
Test conversion first.
Only then delete originals if storage saving is necessary.

For production sites, keep backups outside the web server if possible.

21. Admin-Only Tools

The most sensitive tools are visible only to HumHub administrators.

These include:

  • backup download

  • bulk conversion

  • deleting original files

  • global optimization settings

This prevents normal users or space admins from accidentally changing system-wide image storage.

22. Recommended Settings

A good default setup for modern HumHub installations:

Banner ratio: 1920 × 849
Mobile banner height: around 320px
Logo shape: rounded square
Profile image fit: cover or contain depending on logo style
Optimization: enabled
Smallest-file selection: enabled
AVIF output: enabled only if the server supports it
WebP output: enabled
Delete originals: disabled until backup and testing are complete

For organization directories, rounded square or sharp square logos usually work better than circles.

For social communities with mostly personal profile photos, circles may still be the best default.

23. Example Use Cases

School Directory

A school can use a wide banner showing the campus, classroom, or children’s activity. The school logo can stay square so the badge or official logo is not cropped.

Church Platform

A church space can use a worship or community banner, while the church logo can be displayed as a rounded square. This looks more professional than forcing every logo into a circle.

Company Network

A company can use a corporate banner and a sharp square logo. Transparent logos remain clean on light or dark backgrounds.

NGO or Foundation

An NGO can use a real activity photo as a banner and preserve the official foundation logo without cutting it into a circle.

Marketplace or Directory

Each space can look like a professional listing with optimized images, faster loading, and consistent branding.

24. Common Problems and Solutions

Banner still looks like HumHub default size

Clear cache and assets:

cd protected
php yii cache/flush-all
rm -rf runtime/cache/*
rm -rf runtime/assets/*
rm -rf ../assets/*
php yii cache/flush-all

Then hard-refresh the browser.

Also check whether another theme or custom CSS forces:

max-height: 192px

Logo shape does not change

Check whether the active theme forces:

border-radius: 50% !important;

ABC Header includes overrides, but old published assets or additional custom CSS may still be active. Clear cache/assets and reload.

Transparent logo has black background

The logo was probably already converted to JPG before ABC Header handled it. Upload the original transparent file again.

Use:

PNG
WebP with transparency
AVIF with transparency

depending on server support.

AVIF displays on the frontend but not in edit modal

The browser may support AVIF, but the server image library may not decode it. ABC Header creates helper preview files where possible, but server-side AVIF support is still required for some operations.

Bulk conversion does not create AVIF

The server may not support AVIF encoding. Use WebP as the next best modern option.

25. Server Notes

ABC Header depends on server image support for advanced conversion.

Recommended server capabilities:

  • ImageMagick installed

  • AVIF support enabled if AVIF output is used

  • WebP support enabled

  • PNG transparency support

  • sufficient PHP upload limits

  • sufficient memory for larger images

For large communities, also check:

upload_max_filesize
post_max_size
memory_limit
max_execution_time

If uploads fail, the PHP upload limit may be too low.

26. JPEG XL / JXL Future Support

JPEG XL is a promising future image format, but browser and server support is still not universal enough for safe default production use.

ABC Header is designed with future image formats in mind, but JXL should only be enabled when:

  • the server can encode/decode it reliably

  • target browsers support it

  • fallback handling is available

  • admins understand compatibility risks

For now, AVIF and WebP are the practical modern formats for most HumHub installations.

27. HEIC / HEIF / JXL / AVIF / WebP Upload Support

ABC Header now supports modern image upload workflows for header banners and profile/logo images. This is especially important because many users take photos directly with smartphones, tablets, or iPhones and naturally expect to upload those images directly into HumHub without first using an external image converter.

Many iPhones save photos as HEIC or HEIF by default. These formats are efficient, but they are not always supported by standard browser upload previews, HumHub’s default image handling, or older server configurations. Without ABC Header, users may see upload errors such as:

 
Only files with these extensions are allowed: jpg, jpeg, png, tiff.
 

ABC Header solves this by adding an upload conversion bridge for profile headers, space headers, user images, and space logos.

Supported upload input formats

ABC Header can accept and process:

 
HEIC
HEIF
JXL / JPEG XL
AVIF
WebP
PNG
JPG / JPEG
TIFF
 

This allows users to upload images directly from:

  • iPhones
  • iPads
  • Android phones
  • tablets
  • digital cameras
  • modern image editors
  • already optimized WebP or AVIF image collections

Why this is useful

In real use, people usually do not want to think about image formats. They take a photo, open HumHub, upload it as a banner or profile image, and expect it to work.

ABC Header makes this possible.

A typical workflow is now:

  1. User takes a photo with an iPhone.
  2. The image is saved as HEIC/HEIF.
  3. The user uploads it directly as a HumHub space banner or profile image.
  4. ABC Header converts it automatically into a browser-friendly format.
  5. The image is inserted as the banner or profile/logo image.
  6. The user can crop and adjust it through the normal HumHub edit tools.
  7. ABC Header optimizes the final image to the smallest suitable format.

No external preprocessing is needed.

Automatic conversion after upload

When a HEIC, HEIF, JXL, AVIF, WebP, PNG, JPG, or TIFF image is uploaded, ABC Header can convert it into the best suitable web format.

Depending on the module settings and server support, the final image can become:

 
AVIF
WebP
JPG
PNG
 

ABC Header can compare available output formats and keep the smallest suitable result for each image.

This means the final format may be different from image to image. A photo may become AVIF, while a transparent logo may stay WebP or PNG if that gives the best result.

Header banners and profile/logo images

The upload conversion applies to:

  • user header banners
  • space header banners
  • user profile images
  • space logos

These images are not inserted through HumHub’s ProseMirror rich-text editor, so they need their own upload handling. ABC Header provides this handling directly for the HumHub header and profile image upload process.

AVIF and WebP

AVIF and WebP are modern web image formats that can reduce file size significantly compared with older JPG or PNG files.

ABC Header can use these formats for frontend display when supported by the server and browser. This helps pages load faster, especially on mobile devices and slower internet connections.

JPEG XL / JXL

JPEG XL is included as an experimental input format. Because browser support is still not universal, ABC Header does not currently recommend JXL as the default frontend output format.

Instead, JXL uploads can be accepted and converted into a safer browser-friendly format such as AVIF, WebP, JPG, or PNG.

Server requirement

HEIC, HEIF, AVIF, WebP, and JXL support depends on the server image stack.

For full functionality, the server should have ImageMagick or Imagick installed with support for the required formats.

Recommended server support:

 
HEIC / HEIF decoding
AVIF decoding and encoding
WebP decoding and encoding
PNG transparency support
JPEG support
Optional JXL decoding
 

If ImageMagick is installed without HEIC/HEIF support, HEIC uploads may still fail. In that case, the module settings may be correct, but the server itself cannot decode the image.

Important note about transparency

For logos with transparent backgrounds, ABC Header avoids forcing the image into JPG whenever possible. JPG does not support transparency and can create unwanted black, white, or colored backgrounds.

For transparent logos, WebP or PNG is usually safer. AVIF may also work when the server supports transparency correctly.

Recommended use

For most HumHub installations:

 
Allow HEIC/HEIF upload: enabled
Allow WebP upload: enabled
Allow AVIF upload: enabled
Allow JXL upload: optional / experimental
Automatic smallest-file optimization: enabled
Delete originals: disabled until backup has been created
 

Before bulk-converting existing images, always download a backup from the ABC Header admin tools.

 

ABC Header makes smartphone image uploads practical for normal users. They can take a photo and upload it directly to HumHub, while the module handles conversion, optimization, and browser compatibility in the background.

28. Best Practice Workflow

For a new site:

  1. Install ABC Header.

  2. Configure global banner ratio.

  3. Choose logo shape.

  4. Enable WebP optimization.

  5. Enable AVIF only if the server supports it.

  6. Upload test banner and logo.

  7. Check desktop and mobile.

  8. Adjust mobile banner height if needed.

  9. Enable upload optimization.

  10. Use bulk conversion only after testing.

For an existing site:

  1. Install ABC Header.

  2. Clear cache and assets.

  3. Test one user profile and one space.

  4. Download backup ZIP.

  5. Run bulk conversion.

  6. Check several existing spaces.

  7. Keep originals until you are sure everything is correct.

  8. Delete originals only after backup and testing.

29. Summary

ABC Header makes HumHub headers practical, flexible, and update-safe.

It replaces years of manual core modifications with a normal module that can be managed from the backend. It gives non-programmers control over banner proportions, logo shapes, transparent images, AVIF/WebP support, image optimization, and bulk conversion.

For communities where spaces and user profiles should look professional, branded, fast, and modern, ABC Header is one of the most useful foundation modules in the ABC Suite.