Image Processing (Hi-Res, Super Hi-Res, etc.)

How to process and code the various size pictures presented on the web site.

Note; Start with ‘Super High Resolution with Super Zoom’.  There’s a good reason it should be done and is listed first. It cuts down on typing of names with Fancy Box URLs. In this fashion all one has to do is erase.
…also, some of the ShortCode had to be escaped with double brackets [[ ]] (Normal ShortCode only has single brackets [].

Future Note on Images; All of the images created by the following process are very large and intended for viewing on Computers. Hopefully there is some Plugin that will downsize everything for phones and tablets.
…also look into caching Plugins

  • Super High Resolution with Super Zoom: FULL Size (IE, sky’s the limit)
  • Super High Resolution: 8192px wide (8192 is about as big as Magic Zoom seems to be able to handle effectively)
  • High Resolution: 2048px wide
  • ‘Normal’ (for Timeline ‘Announcement’): 1024px wide (sized for a good looking image, but also a speedier download)

Super High Resolution with Super Zoom

The image is contained within a Unite Gallery Container, which in turn is contained in a ARI FancyBox Container (Full Screen, as in it includes all of the opaque gray and the X in the top right hand corner)

  • Create Unite Gallery by duplicating 1761 – A General Map of North America, height should be set to 852px, regardless of the image resolution (custom CSS Code will be included too, see below for a copy if needed)
  • …except for Panoramic Views that are really wide.  Height needs to be set to something larger, otherwise the logo and menus will start to be visible.
  • CLICK Update Settings! If you forget to click Update Gallery and switch to a new tab, the changes will be lost.
  • Create a Page, paste in Unite Gallery ShortCode and check ON all of the boxes (Exclude from Menu, Hide…, etc., also ‘Page CSS Code’ is NOT necessary and actually has no effect inside the Unite Gallery Container as it is an iFrame)
  • Set Page Template to FULL Screen
  • Paste ARI FancyBox ShortCode and URL of Page into Timeline Announcement; ARI Fancy Lightbox: specify "url" parameter in [fancybox] shortcode. (as noted above, this can be copied and pasted two more times for the other resolutions and made appropriate by just erasing part of the URL)

Super High Resolution

The image comes from Magic Zoom and is contained in an ARI FancyBox Container (Full Screen, as in it includes all of the opaque gray and the X in the top right hand corner)

  • Create a Short Code in Magic Zoom at 8192 (maximum) x 852 (8192 is about as big as Magic Zoom seems to be able to handle effectively)
  • Create a Page, paste in Image Zoom ShortCode and add ‘Page CSS Code’, check ON all of the boxes (Exclude from Menu, Hide…, etc.)
  • Set Page Template to Full Width
  • Paste into Timeline and add URL; ARI Fancy Lightbox: specify "url" parameter in [fancybox] shortcode.
  • Switch to Text Tab and remove <p></p> Tags if present, and Update the page
  • …and do NOT switch back to the visual tab as it will put the <p></p> Tags back in if the TineMCE editor setting is set to ‘preserve’ the <p> tags

High Resolution; (typically about a 5 MB file)

The image comes from Magic Zoom and is contained in an ARI FancyBox Container (Full Screen, as in it includes all of the opaque gray and the X in the top right hand corner)

  • Create a Short Code in Magic Zoom at 2048 (up to 4096) x 852 (yes the picture can be lower resolution, but should be resampled to 2048, and since some pictures are in the 3000px range, that’s fine too)
  • Note; For images that are less than 852 pixels, add padding to the top via CSS override or just resample the picture up to 2048 in width, see 1858 for example
  • Note; For images that are taller than they are wide, verticle size may need to be adjusted for some images, IE, as mentioned above, resample them up to 2048 in width
  • Create a Page, paste in Image Zoom ShortCode and add ‘Page CSS Code’, check ON all of the boxes (Exclude from Menu, Hide…, etc.)
  • Set Page Template to Full Width
  • Paste into Timeline and add URL; [ARI Fancy Lightbox: specify "url" parameter in [fancybox] shortcode.
  • Switch to Text Tab and remove <p></p> Tags if present, and Update the page
  • …and do NOT switch back to the visual tab as it will put the <p></p> Tags back in if the TineMCE editor setting is set to ‘preserve’ the <p> tags

Normal Timeline Image;

  • Create a Short Code in Image Zoom at Full Size (1024 x whatever it is, unless it is really, really tall like that news clipping from the late 1800s)
  • Paste Magic Zoom ShortCode into a Timeline ‘Announcement’ instead of picture

Interactive Super High Resolution with Super Zoom

  • Create image in Image Map Pro
  • Create a Page, paste in Fancy Box and Image Zoom ShortCode; [fancybox_open]][[ImageMapProShortCode]][[/fancybox_open]
  • Add special ‘Image Map Pro CSS Code’ for page
  • Also add this to the page text; Click the ‘X’ located above the top right corner of this white box to close this window and return to the previous page.
  • Set Page Template to Full Width
  • Create a link in Timeline and add URL directing to page

Fancy Box ShortCode for Timeline

Note; Only use the PermaLink preceded by a forward slash instead of the complete URL (IE; http://www.RiseOfTheSaltonSea.com/PermaLink) so the images can be viewed via any URL (IE; http://Local.RiseOfTheSaltonSea.com/PermaLink)

Super High Resolution Image with Super Zoom
Super High Resolution Image
High Resolution Image

CSS Code for Super High Resolution Image with Super Zoom (Unite Gallery Lite) to be placed in the Unite Gallery, not on the Page CSS

p {display:none;}

body {overflow:hidden; background-color:black; height:852px}

#site-header {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}
#masthead {display:none}
#menu-sidebarmenu {display:none}
#secondary {display:none}
#colophon {display:none}
.page-scroll-buttons {display:none}
.position-style-0 {display:none}
.with-top {display:none}
.site:before
.ug-theme-panel {display:none}

CSS Code for Super High Resolution Image with Super Zoom (Unite Gallery Lite) for Page

/* Remember, CSS settings for this page essentially have no effect because the Unite Gallery is an iFrame on top of this page, so it's CSS 'blocks the view' of this CSS, thus rendering it pointless to put anything here. */

CSS Code for High Resolution & Super High Resolution
(Below are ALL the different IDs and Classes, with the unnecessary ones commented out)

/* * {} */
html {overflow:hidden;}
/* body {} */
/* p {} */

/* .site {} */
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
background-color: #000000;
}

#site-header {display:none}
#masthead {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}

#main {background-color:black;}
/* .site-main {} */
/* #main-content {} */
/* .main-content {} */
#primary {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
/* .content-area {} */
#content {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
/* .site-content {} - see above as this is just a place marker for the location .site-content is in the HTML */
.page {overflow:hidden; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
/* .entry-content {background-color:black} */
/* .MagicToolboxContainer {} */
/* .MagicZoom {} */
.edit-link {display:none}
.post-edit-link {display:none}
#secondary {display:none}
/* .navigation {} */
/* .menu-sidebarmenu-container {} */
/* .menu-item {} */
.menu {display:none}
#colophon {display:none}
/* .site-info {} */
.wpadminbar {display:none}
.page-scroll-buttons {display:none}

.site:before {display:none}

/* I tested .page-content, and I thought beyond a shadow of a doubt, there is some DIV, SPAN, or layer that exists, but is transparent and allows the Site .page-content to bleed through,
* but as it turns out, it takes all of the below items to do it, just like in the main site CSS file (style.css)*/

Image Map Pro CSS Code

#image-map-pro-224 {overflow:hidden}
#fancybox-container-1 {overflow:hidden}

* {}
.* {}
#* {}
html {overflow:hidden;}
div {max-height:100%;}
img {max-height:100%;}
body {}

#page {overflow:hidden;}
#site-header {display:none}
#masthead {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}
#main {}
#main-content {max-height:100%}
#primary {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#content {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
/* This one breaks Fancy Box or Image Map Pro #secondary {display:none} */
#menu-sidebarmenu {display:none}
#colophon {display:none}

.page-scroll-buttons {display:none}
.position-style-0 {display:none}
.with-top {display:none}
.site:before {display:none}

 

ARCHIVE

Super High Resolution Image with Super Zoom (Unite Gallery Lite) CSS Code

* {background-color:000000; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:0px 0px 0px 0px; overflow:hidden}
html {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:0px 0px 0px 0px; overflow:hidden;}
body {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:0px 0px 0px 0px; overflow:hidden; background-image:none}
#site-header {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}
#masthead {display:none}
#menu-sidebarmenu {display:none}
#secondary {display:none}
#colophon {display:none}
.page-scroll-buttons {display:none}
.position-style-0 {display:none}
.with-top {display:none}
.site:before
.ug-theme-panel {display:none}

High Resolution


#site-header {display:none}
#masthead {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}
#primary {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#secondary {display:none}
#content {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#colophon {display:none}

.page {overflow:hidden; padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
.page-scroll-buttons {display:none}
.site:before {display:none}

Page CSS Code

* {}
.* {}
#* {}
html {overflow:hidden;}
div {max-height:100%;}
img {max-height:100%;}
body {}

#page {overflow:hidden;}
#site-header {display:none}
#masthead {display:none}
#primary-navigation {display:none}
#primary-menu {display:none}
#search-container {display:none}
#main {}
#main-content {max-height:100%}
#primary {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#content {padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px;}
#secondary {display:none}
#menu-sidebarmenu {display:none}
#colophon {display:none}

.page-scroll-buttons {display:none}
.position-style-0 {display:none}
.with-top {display:none}
.site:before {display:none}
Rise of the Salton Sea