Display topic images on the mobile version

by Ange Tuteur August 28th 2015, 12:15 pm

Display topic images on the mobile version

By default the images in the mobile version are shown as links, mostly to cut load times. Nowadays this shouldn't be too much of a problem thanks to advances in technology. This tutorial aims to provide you with ways to display images on the mobile version without changing the page or opening a new tab.

1. Installing the CSS

One of the drawbacks to displaying images inside the messages, is the fact that larger images can overflow the post and stretch the page. To prevent this, it's necessary to add some CSS to your stylesheet. Go to Administration Panel > Display > Colors > CSS stylesheet and add the following rules to your stylesheet.

Code:: .mobile_image { max-width:99% } #mpage-body .postbody > .content > div { overflow:hidden }

This will shrink larger images to fit inside the post, and prevent those images from overflowing the message container if the former is unsupported.

2. Installing the JavaScript

Next, to render the images a script is needed to apply some changes to the image links. Go to Administration Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Mobile Image Settings
Placement : In all the pages

Code:: $(function() { var mode = 0; /* -- Mode Options -- */ // 0 : Shows all images by default // 1 : Shows images only when clicked if (!_userdata.page_desktop) return; var a = document.getElementsByTagName('A'), i = 0, j = a.length, showImage = function() { if (/img_link/.test(this.className)) { this.onclick = null; this.removeAttribute('class'); this.innerHTML = '<img class="mobile_image" src="' + this.href + '" alt="' + this.innerHTML + '" />'; return false; } }; for (; i < j; i++) { if (/img_link/.test(a[i].className)) { switch (mode) { case 0 : a[i].removeAttribute('class'); a[i].innerHTML = '<img class="mobile_image" src="' + a[i].href + '" alt="' + a[i].innerHTML + '" />'; break; case 1 : a[i].onclick = showImage; break; default : a[i].onclick = showImage; break; } } } });

2.1. Modifications

There's only one modification to make in the script, and that is to the mode variable at the top of the script. This variable takes a number value which allows you to choose how the images are rendered. Please read the explanation below.

mode = 0 : The default mode, 0, renders all images regardless of actions. When you visit a page that previously contained images as links, the links should now be images.

mode = 1 : Setting the mode to 1, only displays images once you click on the image link. Choose this if you still want to keep fast load times, but give people the option to display the images directly in the message.

Display topic images on the mobile version Mobile11

In short, choose the mode that best suits your forum. Smile