Add/Edit Banner

Overview

The Add Banner page is a comprehensive form for creating and editing banner advertisements in ComusThumbz. It supports two banner types: Image banners (uploaded files or hotlinked URLs) and HTML banners (custom HTML/CSS content). The form includes sponsor/sub-sponsor selection, placement zone assignment, scheduling options, category targeting, and real-time preview functionality. The page also supports banner copying with pre-populated fields.

Location: Navigate to this page via Admin Panel → Advertising → Add Banner or access directly via ct/admin/addbanner.php

[Screenshot: add-banner-main-interface]

Getting to This Page

1. Navigate to Admin Panel → Advertising
2. Click Add Banner link
3. Alternatively, click "Add New Banner" on the Banner Management page
4. To edit, click "Edit" on an existing banner (loads with ?id=X)
5. To copy, click "Copy" on an existing banner (loads with ?copy=1&...)

System Requirements

PHP Requirements

Required PHP Extensions

Required PHP Functions

Folder Permissions

Network Requirements

Features & UI Elements

Page Header

[Screenshot: add-banner-header]

Copy Notice Banner

[Screenshot: add-banner-copy-notice]

Appears when copying a banner:

Navigation Buttons

Same as Banner Management page - links to all banner-related pages.

Section 1: Basic Information

[Screenshot: add-banner-basic-info]

Section 2: Banner Type

[Screenshot: add-banner-type-selection]

Two clickable options:

Selection toggles which content section is visible.

Section 3a: Banner Image (for Image type)

[Screenshot: add-banner-image-upload]

Upload Methods:

File Upload:

• Drag and drop supported
• File type validation
• Size validation (5MB max)
• Automatic dimension detection

Hotlink URL:

• URL input field
• "Check Dimensions" button to fetch image info
• Automatic dimension detection

Preview Container:
Shows after file selection or hotlink check:

• Image preview (max 300px height)
• Width, Height, File Size information

Section 3b: HTML Banner Content (for HTML type)

[Screenshot: add-banner-html-editor]

HTML Guidelines:

• Use %referurlhere% as placeholder for click URL
• Include inline CSS (external stylesheets may not work)
• Keep JavaScript minimal and inline
• Test in different browsers

Example Code:

<div style="width:300px;height:250px;background:#f0f0f0;border:1px solid #ccc;text-align:center;padding:20px;">

    <h3>Your Ad Title</h3>

    <p>Compelling ad text here</p>

    <a href="%referurlhere%" style="background:#007cba;color:white;padding:10px 20px;text-decoration:none;border-radius:5px;">Click Here</a>

</div>

HTML Preview Container:
Shows rendered HTML preview when "Preview HTML" button clicked.

Section 4: Banner Settings

[Screenshot: add-banner-settings]

Section 5: Categories

[Screenshot: add-banner-categories]

• Up to 10 categories can be selected
• Categories are ordered by selection order (priority)
• Used for targeted banner display on category pages

Form Actions

[Screenshot: add-banner-form-actions]

Loading Overlay

Shows during form submission with spinner and "Processing banner..." message.

HTML Banner Processing

When saving HTML banners, the system automatically processes the content:

Wildcard Replacement

%referurlhere% is replaced with a click tracking URL:

{baseurl}/bannerclick.php?url={encodedclickurl}

Processing Rules

1. Iframe src attributes - URL-encoded for embed parameters
2. Anchor href attributes - Direct replacement
3. onclick handlers - JavaScript-escaped
4. Remaining occurrences - Simple replacement

iframe Wrapping

If an iframe doesn't contain %referurlhere%, it's wrapped in a clickable div with transparent overlay for click tracking.

Step-by-Step Usage

Creating a New Image Banner

1. Navigate to Admin Panel → Advertising → Add Banner
2. Enter a descriptive Banner Title
3. Select the Sponsor from dropdown
4. Optionally select a Sub-Sponsor
5. Select the Banner Placement (zone)
6. Enter the destination Click URL
7. Ensure "Image Banner" is selected
8. Choose upload method:

• File Upload: Click "Choose File" or drag/drop an image
• Hotlink: Enter URL and click "Check Dimensions"

1. Review auto-detected dimensions
2. Optionally set Weight, Start/End Dates, and Status
3. Select up to 10 Categories
4. Click Create Banner

Creating an HTML Banner

Navigate to Admin Panel → Advertising → Add BannerFill in basic information (title, sponsor, placement, click URL)Click "HTML Banner" type optionPaste or type your HTML code in the editor

1. Use %referurlhere% for click tracking links
2. Click Preview HTML to verify rendering
3. Set dimensions manually
4. Configure settings and categories
5. Click Create Banner

Editing an Existing Banner

1. From Banner Management, click Edit on a banner
2. Page loads with all fields pre-populated
3. Make desired changes
4. For image banners, upload new file to replace existing
5. Click Update Banner

Copying a Banner

1. From Banner Management, click Copy on a banner
2. Page loads with copy data (title has " (Copy)" appended)
3. Status is set to "inactive" by default
4. Modify any fields as needed
5. Click Create Copy

AJAX Actions

File Upload Validation

File Naming Convention:

banner{sponsorid}{timestamp}.{extension}

Example: banner51704067200.jpg

Troubleshooting

Common Errors

Cause: Required fields not filled
Solution: Ensure all required fields have values

Cause: Image banner without image source
Solution: Upload a file or enter a valid hotlink URL

Cause: HTML banner type selected but no content
Solution: Enter HTML code in the editor

Cause: URL doesn't pass filtervar() validation
Solution: Use a complete URL starting with http:// or https://

Cause: Remote image not accessible or invalid
Solution:

1. Verify URL is correct
2. Check if image is publicly accessible
3. Try accessing URL directly in browser

Cause: Server permission or disk space issue
Solution:

1. Verify images/banners/ folder exists with write permissions
2. Check available disk space
3. Review PHP upload settings

Cause: JavaScript error in HTML content
Solution:

1. Check browser console for errors
2. Simplify HTML content
3. Remove external scripts that may be blocked

Dimension Detection Issues

Translatable Strings

The following strings should be added to backendtranslations.md:

addbannertitleadd = "Add New Banner"
addbannertitleedit = "Edit Banner"
addbannertitlecopy = "Copy Banner"
addbannerbreadcrumbadd = "Add"
addbannerbreadcrumbedit = "Edit"
addbannerbreadcrumbcopy = "Copy"
addbannersubtitle = "Create and manage banner advertisements with support for images and HTML content"
addbannercopynotice = "Copying Banner: You are creating a copy of an existing banner. The form has been pre-filled with the original banner's data. Make any desired changes and click \"Create Banner\" to save the copy."
addbannersectionbasic = "Basic Information"
addbannersectiontype = "Banner Type"
addbannersectionimage = "Banner Image"
addbannersectionhtml = "HTML Banner Content"
addbannersectionsettings = "Banner Settings"
addbannersectioncategories = "Categories"
addbannerfieldtitle = "Banner Title"
addbannerfieldsponsor = "Sponsor"
addbannerfieldsubsponsor = "Sub-Sponsor"
addbannerfieldplacement = "Banner Placement"
addbannerfieldclickurl = "Click URL"
addbannerfieldwidth = "Width (px)"
addbannerfieldheight = "Height (px)"
addbannerfieldweight = "Weight"
addbannerfieldstartdate = "Start Date"
addbannerfieldenddate = "End Date"
addbannerfieldstatus = "Status"
addbannerfieldhtmlcontent = "HTML Content"
addbannerselectsponsor = "Select Sponsor"
addbannerselectsubsponsor = "Select Sub-Sponsor (Optional)"
addbannerselectplacement = "Select Placement"
addbannertypeimage = "Image Banner"
addbannertypeimagedesc = "Upload an image file or use a hotlink URL"
addbannertypehtml = "HTML Banner"
addbannertypehtmldesc = "Create custom HTML/CSS banner content"
addbanneruploadfile = "Upload File"
addbanneruploadfiledesc = "Upload an image file from your computer"
addbannerhotlink = "Hotlink URL"
addbannerhotlinkdesc = "Link to an image hosted elsewhere"
addbannerchoosefile = "Choose File"
addbannersupportedformats = "Supported formats: JPG, PNG, GIF, WebP (Max 5MB)"
addbannercheckdimensions = "Check Dimensions"
addbannerpreviewhtml = "Preview HTML"
addbannerhtmlguidelines = "HTML Banner Guidelines"
addbannerhtmlplaceholdertip = "Use %referurlhere% as a placeholder for the click URL"
addbannerhtmlinlinecss = "Include inline CSS for styling (external stylesheets may not work)"
addbannerhtmlminimaljs = "Keep JavaScript minimal and inline if needed"
addbannerhtmltestbrowsers = "Test your banner in different browsers"
addbannerhtmlexample = "Example"
addbannercategorieslimit = "Select Categories (Up to 10)"
addbannercategorieswarning = "Maximum 10 categories allowed"
addbannerbtncancel = "Cancel"
addbannerbtncreate = "Create Banner"
addbannerbtnupdate = "Update Banner"
addbannerbtncopy = "Create Copy"
addbannerprocessing = "Processing banner..."
addbannersuccess = "Banner saved successfully"
addbannererrorrequired = "Please fill in all required fields"
addbannererrorimagerequired = "Please upload a file or provide a hotlink URL for image banners"
addbannererrorhtmlrequired = "Please provide HTML content for HTML banners"
addbannerpreviewwidth = "Width"
addbannerpreviewheight = "Height"
addbannerpreviewsize = "File Size"
addbannerpreviewexternal = "External"

Version History

Related Documentation

• Banner Management - Viewing and managing banners
• Banner Zones - Creating placement zones
• Sponsors Management - Managing sponsors
• Sub-Sponsors - Managing sub-sponsors