Mobile Media

From TNG_Wiki
Jump to navigation Jump to search
Obsolete The Mobile Media mod is obsolete with TNG 10.1.2. The functionality was added to TNG V10.1.2.


This mod only applies to TNG v10.1 and v10.1.1 and is a temporary mod to adjust the Image displays when not using the Image Viewer based on the screen width, and adjusts the Image Preview based on screen width for smart phones and tablets. It should be used in conjunction with the following mods:

Obsolete


Mobile Media
Summary fixes the image display and image previews for smart phones and tablets
Validation
Mod Updated {{{mod_last_update}}}
Download link for
TNG 10.1.1

mobile_media_v10.1.1.4.zip
for

TNG 10.1.0
mobile_media_v10.1.0.4.zip
Download stats View download statistics
Author(s) Ken Roy
Homepage Mobile Media (This page)
Mod Support TNG Community Forums
Contact Developer Ken Roy
Latest Mod 10.1.1.4 for TNG V10.1.1
10.1.0.4 for TNG V10.1.0
Min TNG V 10.1.0
Max TNG V 10.1.1
Files modified
showalbum.php
browsemedia.php
showmedia.php
showmedialib.php
css/genstyle.css
Related Mods
Mobile Site Enhancements
Mobile Individual Page Map
Mobile Site No Previews
Mobile Site No Slideshow
Responsive Tables
Life Dates Mobile or Life Dates Mod
Notes
Note that this mod conflicts with the Media Preview Fixed mod


Introduction

This mod adjusts the Image display and image preview for different screen widths

Note that this mod requires that you use v10.1.0.3 of the Mobile Site Enhancements mod since some of the code in this mod was previously in the Mobile Site Enhancements mod

Note the slide show suppression code was moved to the Mobile Site No Slideshow

Developer

This mod was developed by Ken Roy with some code provided by Darrin Lythgoe that will be part of the upgrade after TNG 10.1.1.

Thanks to Roger Moffat, Graham Chamberlain, and Del Groves for testing.


Revision History

Version Date Contents
v10.1.1.4
v10.1.0.4 		14 June 2015 Provides the Image Preview changes that will be in the next TNG upgrade

The slide show suppression code was moved to Mobile Site No Slideshow v10.1.0.3 and v10.1.1.3 were used for beta testing only.

v10.1.0.2 22 April 2015 Initial production version of the mod
v10.1.0.1b 20 April 2015 Disable the Slide Show in Show Album for smart phones and tablets
v10.1.0.1a 17 April 2015 Disable the Slide Show in Browse Media for smart phones and tablets
v10.1.0.1 17 April 2015 Initial version of the mod

Requirements

  • a working TNG installation
  • an installed current version of the Mod Manager
  • a backup of the getperson.php file
  • must be using the latest TNG templates/templateN/footer.php that includes setting the $flags['basicfooter'] = true; before calling the tng_footer function

Automated Installation

  1. Download the appropriate mod for your TNG version and desktop genealogy program from the download links in the status area in the upper right.
  2. Extract the appropriate zip file to your TNG mods folder.
  3. Follow the normal automated installation for Mod Manager, as shown in the example Mod Manager - Installing Config Files to install the appropriate mod for your desktop genealogy program.

Known Problems

If you are not using the latest versions of the TNG footer.php modules, then the Image Preview will not be displayed since the jQuery script that calls the showPreview function in net.js is added to the page footer by the tng_basicfooter function in the tng_footer function of genlib.php.

to resolve this problem update your template footer to include setting the $flags['basicfooter'] before the tng_footer function call
$flags['basicfooter'] = true;
echo tng_footer($flags);

Visualization

The following screen captures shows the major changes made by the mod

Image Display

Image Display Before Installation Image Display After Installation
Before installing this mod, the following issues exist
  • Image exceeds the screen width
  • Slide Show does not display correctly
 The installed mod
  • Displays the image within the screen width
  • Removes the Slide Show button
Image Display before Image Display after

Image Preview

Image Preview Before Installation Image Preview After Installation
Before installing this mod, the following issues exist
  • Image preview exceeds the screen width
 The installed mod
  • Displays the image preview within the screen width
Image Preview before Image Preview after

Note that the column width reductions in the above after image are implemented by the Mobile Site Enhancements mod

Note that the Slide Show not showing in the above after image is implemented by the Mobile Site No Slideshow mod


Alternative CSS @media query

The following is an alternative CSS @media query that you could put in your templates/templateN/css/mytngstyle.css provided by Colin Spencer that may provide a better display experience on the iPhone 5. These definitions added to your templateN/css/mytngstyle.css will overrided the definitions provided by the mod. 


/* definitions for different screen widths added in TNG 10.1.1+  to keep image preview on screen 
   see http://www.canbike.org/CSSpixels/ for CSS Pixel Widths using 
                

/* media query default for smart phones and tablets  */
@media screen and (max-width:1200px) {.media-prev {height:100%; top:50px; background:none;}}
@media screen and (max-width:640px) {.media-prev {padding: 10px 4px 6px 0;}}
@media screen and (min-width: 300px) and (max-width: 360px) {
        .media-prev {
                        left: -20px;
                        width: 180px;        
                }
}
@media screen and (min-width:361px) and (max-width: 480px) {
        .media-prev {
                left: 10px; 
                width: 180px;
                }
}
@media only screen and (min-width:481px) and (max-width:640px) {
        .media-prev {
                left: 50px;        
                width: 230px;
                
        }
}

@media only screen and (min-width:641px) and (max-width:1100px) {
        .media-prev {
                left: 50px;        
                                
        }
}


Sites using this mod

If you download and install this mod, please add your TNG site to the table below:

URL User Note Mod-Version TNG-Version User-language
Our Roy and Boucher Family Ken Roy Mod is provided to adjust the Image display when not using the Image Viewer, suppress the Slide Show on the smart phones 10.1.0.4 10.1.1 English, French
Wortelboer Genealogy Bernard Wortelboer 10.1.0.2 10.1.1 NL, EN
Genealogy of the Hendee Family John Hendee 10.1.1.4 10.1.1 EN
Chamberlain & Eidenbenz Genealogy Graham Chamberlain 10.1.1.4 10.1.1 EN,NL,FR,DE,ES
Our Family Saga Del Groves 10.1.1.4 10.1.1 EN

Related Links

Mobile Mode Display

Tuning for Mobile Display

Life Dates Mobile - adjusts the date displays for smart phones and tablets as an alternative to Life Dates Mod which always puts the birth and death dates on separate lines

Mobile Media - adjusts the Image display when not using the Image Viewer and the Image Preview for mobile devices

Mobile Individual Page Map - adjusts the Google Event Map on smart phones and tablets

Mobile Site Enhancements - several adjustments for smart phones and tablets

Mobile Site No Previews - eliminates the Person and Family previews for smart phones

Mobile Site No Slideshow - eliminates the slide show for smart phones and tablets

Responsive Tables - adjusts TNG table displays based on screen widths

Retrieved from "https://tng.lythgoes.net/wiki/index.php?title=Mobile_Media&oldid=88874"