Setting Up Hero Images

Details
Category: Guides
  • Applicable Software: MokonyxHero
  • Min Version Number: Development
  • Max Version Number: Not Applicable

Step 1: Upload Images

Upload your hero images to a folder inside /images/, for example /images/heroes/. Keep only the images you want visitors to see in that folder, since MokonyxHero can display any image it finds there.

Step 2: Configure the Module

  1. Go to Content > Site Modules.
  2. Find MokonyxHero and click to edit it.
  3. Set the Image Folder to your upload path (for example, images/heroes).
  4. Assign it to a template position (for example, banner or top).
  5. Set the module to published and save.

Preparing Your Images

A hero image carries a lot of visual weight, so it is worth preparing each one before you upload. The following are widely used best practices for full-width web banners:

  • Dimensions - Aim for roughly 1920×600-800px (or wider) so the banner stays crisp on large, high-resolution displays. Use the same dimensions and aspect ratio across every image in the folder so the banner does not shift as it rotates.
  • File size - Compress and optimize each image, targeting a few hundred kilobytes rather than multiple megabytes. Large hero files are one of the most common causes of slow homepages.
  • Focal point - Keep the main subject near the center and leave breathing room around the edges, since banners are often cropped differently on phones versus desktops.
  • Alt text - Give each image meaningful alternative text describing what it shows. This helps screen-reader users and search engines understand the banner.

Supported Formats

JPG, PNG, WebP, and GIF images are supported. WebP is a good default for photographic banners because it keeps quality high at smaller file sizes. SVG is not supported for security reasons.

Tips for Great Hero Images

  • Use consistent dimensions across all images in the folder so the banner rotates smoothly.
  • Optimize file sizes before uploading to keep your pages loading quickly.
  • Choose images with room for any overlaid text, if your design includes it, and check that the text stays readable against the image.
  • Seasonal or campaign rotations are easy - drop new images into the folder and they appear automatically.

Need Help?

MokonyxHero is under active development, so some options may change between versions. If you need help choosing a template position or troubleshooting your banner, contact the Moko Consulting team at This email address is being protected from spambots. You need JavaScript enabled to view it..

Hits: 38