How do I change the mobile banner image on my mobile responsive site?


For some Net Affinity designed sites, the banner image on mobile is managed separately to the banner images on desktop. This is for several reasons:

  • Load Speed - Number of images – on desktop a carousel of images works great, but on mobile, for each additional image, it increases the weight of the site, and slows down load speed.
  • Size & Proportion of Image – when sizing an image specifically for mobile, you have more control over the display of the image – ensuring that the image focus is correct showing the part of the image you want to display, as well as resizing it down to a smaller file size.



How to Change:

  • Firstly, resize the image to the correct size, this will be approx. 420 * 600, but may very for your site. You can check for your own site under MODULES -> IMAGES / FLASH and find the size of the current image.

  • Once the image has been resized, run through, this will reduce the file size of the image, without hampering the image quality.

  • Go to MODULES -> IMAGES / FLASH -> ADD NEW IMAGE and upload your new image. Be as specific as you can in your image name, to make it easier for you to find, but also as Google reads the name of the image as an ALT TAG, which is important for SEO, e.g. Affinity Hotel – Exterior – Mobile or Affinity Hotel – Double Room – Mobile.

  • Go to HOME under the list of PAGES (or the page you need to amend on).
  • Under ADVANCED SETTINGS -> IMG_MOBILEBANNER, select the image you have just uploaded from the dropdown for USE UPLOADED. You will see it appear in the preview to ensure you have the correct one.
  • Click SUBMIT CHANGES to save.

  • Take out your mobile phone and check how it looks on the front end to ensure you are happy with the display.
0 out of 0 found this helpful



Article is closed for comments.