Wordpress Plugin responive ?

Everything concerning the Wordpress/Joomla/Drupal plugins
Post Reply
Panorade
Posts: 29
Joined: Wed Feb 25, 2009 5:57 pm
Contact:

Hello ist the Wordpress Plugin responive ?
Zhamks Achim
User avatar
Sam Rohn
Posts: 29
Joined: Fri Sep 28, 2007 7:50 am
Location: New York City
Contact:

responsive behavior is more a function of your wordpress theme and CSS than this plugin, so you basically would need to cook up some custom media queries for the plugin embed element that fit your particular theme, this would not be a "one size fits all" situation, height and width per query would depend on your preference and layout etc

with PanoPress you could use code like below in your themes style.css file, im not sure how the main parent div element w GG plugin is named but something like this should work w GG plugin as well, just change ".pp-embed" to the proper element name for this plugin and paste the code into your wordpress theme's style.css file and you should have responsive embeds w GG plugin

the below code is just an example, you will need to set correct element name, set pano element height and width as desired, more query breakpoints for more device screen sizes if desired , and note the "!important" css declaration which is required to override size in prefs or shortcode

gg plugin does not seem to support % based or fluid widths at the present time, so you will probably need to keep everything in px

i have not tested this CSS w GG plugin but it works fine w PanoPress, and should work here too

media queries are standard CSS and can be applied to any html element, you could also hide titles at small screen sizes or reduce text size etc, change layout etc, and this same technique will also work w joomla, drupal or any other CMS or static html pages etc, see the links at bottom of this post for more info on media queries

Code: Select all

/* PANOPRESS RESPONSIVE MEDIA QUERIES (2:1 ASPECT) CSS EXAMPLE */
/* CHANGE ".pp-embed" TO PROPER ELEMENT NAME FOR GG PLUGIN */
/* SET "width:" & "height:" VALUES AS DESIRED PER QUERY */
/* "!important" DECLARATION IS REQUIRED AS SHOWN, DO NOT OMIT */

@media screen and (min-width: 980px) 
{
    .pp-embed { 
    width:800px !important; 
    height:400px !important; 
    }
}

@media screen and (min-width: 769px) and (max-width: 979px) 
{
    .pp-embed { 
    width:600px !important;
    height:300px !important; 
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) 
{
    .pp-embed { 
    width:500px !important; 
    height:250px !important; 
    }
}

@media screen and (min-width: 321px) and (max-width: 480px) 
{
    .pp-embed { 
    width:400px !important; 
    height:200px !important; 
    }  
}

@media screen and (max-width: 320px) 
{
    .pp-embed { 
    width:300px !important;
    height:150px !important; 
    }  
}
see these links for more info on css media queries

http://arcsec.ca/media-query-builder/

http://wpmu.org/how-to-customize-respon ... a-queries/

responsive panorama embeds have been discussed on panopress forum a bunch or times, most of what applies to panopress should also apply to gg plugin

http://www.panopress.org/forums/topic/r ... panopress/

http://www.panopress.org/forums/forum-tag/media-query/

http://www.panopress.org/forums/forum-t ... ive-theme/

sam
Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: http://www.panopress.org
Post Reply