WordPress.org

Ready to get started?Download WordPress

Plugin Directory

Gridster

Use Gridster to manage your content with ease in a customizable grid.

How can I customize the layout of the Gridster Widgets on the frontend?

There a some CSS classes you can use

  • .gridster-not-loaded is appended to the <body> element, when a shortcode is found on the current page
  • .gridster-loaded replaces the former mentioned .gridster-not-loaded body-class, when Gridster Javascript is successfully loaded
  • .gridster-wrap is the wrapper for the whole shortcode output
  • .gs_w is the generic class aplied to every Gridster Widget

How to avoid the loading of `gridster_frontend.css`

The Plugin comes with minimal styling for the Gridster Markup, but maybe you'll add theese few lines of CSS to your own theme stylesheet to reduce server requests. Just set the constant GRIDSTER_FRONTEND_CSS to false in your themes functions.php file.

/**
 *  Do not use gridster frontend styles
 */
define( 'GRIDSTER_FRONTEND_CSS', false ); 

How to get best fitting image-sizes to work?

Gridster uses the generated images used as post-thumbnails by default. When you add existing content to a new gridster, the plugin will look for the best fitting image size, according to the width and height of your current gridster-widget. So if you have defined the base width to 100px, base height to 100px and your margins to 10px, the plugin will look for images of 100 * 100 px.

Now, when you resize this gridster-widget to, let's say, 1 row with 2 columns, the plugin will reload this gridster-widget with an image of 220 * 100 px. To avoid ugly cropping or unwanted scaling of the post-thumbnails, you go best with defining some additional post-thumbnail sizes within your functions.php like so.

/**
 *  Add some additional post-thumbnail sizes, that can be used by the Gridster Plugin
 *  e.g. we have base-width: 100px, base-height: 100px and margins both 10px
 *  
 *  @see    http://codex.wordpress.org/Function_Reference/add_image_size              
 *            
 */
if ( function_exists( 'add_image_size' ) ) { 
    add_image_size( 'gridster-1col-1row', 100, 100, true ); 

    add_image_size( 'gridster-2col-1row', 220, 100, true ); 
    add_image_size( 'gridster-3col-1row', 340, 100, true );
    add_image_size( 'gridster-4col-1row', 460, 100, true );

    add_image_size( 'gridster-1col-2row', 100, 220, true );  
    add_image_size( 'gridster-1col-3row', 100, 340, true );      
    add_image_size( 'gridster-1col-4row', 100, 460, true );                

  /** ... and so on ... */
} 

Do you have some question?

Drop me a line at gridster@carsten-bach.de

Requires: 3.3 or higher
Compatible up to: 3.6.1
Last Updated: 2013-4-22
Downloads: 10,831

Ratings

3 stars
3.6 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

50,2,1 100,1,1 100,1,1 50,2,1 100,1,1 100,3,3
0,3,0