Displaying Large Images (Option 2)

classic Classic list List threaded Threaded
1 message Options
GregChapman GregChapman
Reply | Threaded
Open this post in threaded view
|

Displaying Large Images (Option 2)

This post was updated on .
East Ruston Map
By default posts that include images that are wider than the window in which they are viewed generate a scrollbar at the bottom of the post. Many visitors will ignore the scroll bar and see only the leftmost part of the image.

This post describes an approach for including large images in what could be considered a smaller "thumbnail" format that allows a user to zoom in to examine small areas of the image. whre it is more important to be able to see the full image then Option 1 may be a better approach.
NOTE: it is crucial that the file to be uploaded is no larger than 1Mb or Nabble will reject the upload.

Because the image will be displayed in a small format, the visitor will need to be prompted to use their browser's right-click (or tap and hold) menu to display the image independently so it can be zoomed to full size.

Chrome has the option "Open Image in New Tab". Firefox has a similar option "View Image" (a wheel-click is normally sufficient to open a link in a new tab). Other browsers have similar facilities.

The example here has dimensions of 1800px x 2546px which will more than fill most large desktop screens.

Users need only upload their image file (no larger than 1Mb) setting the "Float" option to either left or right and keeping the "Resize" option at the default "None" and the forum does the rest.

To make this work you need to add the custom CSS code below to your forum. This makes any image that is set to float to left or right occupy 48% of the width of the space available (plus some small margins) regardless of the images actual dimensions. On small screens the code is over-ridden and even though set to float to one side the image will fill the full width of the screen.
div.root-text img.left, div.message-text img.left {
  clear: left;
  width: 48%;
  margin: 0 10px 1em 5px;
}

div.root-text img.right, div.message-text img.right {
  clear: right;
  width: 48%;
  margin: 0 5px 1em 10px;
}

@media only screen and (max-width:700px) {

  div.root-text img.left, div.root-text img.right,
  div.message-text img.left, div.message-text img.right {
    display:block;
    float: none;
    width: 100%;
    margin: 0 auto 1em;
  }

}

To enter the code go to your forum home page and paste it into the dialogue you find via:
Options > Application > Change Appearance > CSS

Greg