Display topic images on the mobile version

Go down

Tutorial Display topic images on the mobile version

Post by Ange Tuteur on 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.

Display topic images on the mobile version Image_11


Display topic images on the mobile version 09615110 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.


Display topic images on the mobile version 09615110 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;
      }
     
    }
  }
});


Display topic images on the mobile version 10-10-132.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

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum