The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Display topic images on the mobile version

View previous topic View next topic Go down

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.



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.


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


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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