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 https://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 [email protected]
![An embeded Shortcode inside the Editor is replaced by visual placeholder, to keep things easy for your editors. No need to write (short-)code. Besides it's possible to update, edit and delete the shortcode via icons, formerly known from the [gallery]-shortcode. (with WordPress 3.5.1)](https://ps.w.org/cbach-wp-gridster/assets/screenshot-7.jpg?rev=690718)
