Sidebar Filling

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
tsvenson's picture

This idea is based on the http://css-tricks.com/more-sidebar/ post.

Simply described, the idea is to automatically show/add blocks, or panes in Panels, so that they only take up the same height space as the content. Then unused space will be filled with content, making the pages look better and content aligned on the height.

This could be done in various ways such as:

  • Global list of additional blocks/panes that are used in an orderly or random way to fill the spaces when the user scrolls down the page.
  • Uniquely based on page or content type. In the case of panes even based on the main content on the page
  • An option for the block/pane on pages to only show if the content height allows it.

I think this would open up for some really nifty ways of designing pages and make them look good an perfectly aligned when it comes to height.

Comments

Gotta say, my jaw dropped a

Garrett Albright's picture

Gotta say, my jaw dropped a little bit when I saw the diagram where the whitespace was labeled "Useless Space." Not every nook and cranny on a web page has to be crammed with content or menus or ads or ads or ads!

Anyway, if I were implementing something like this, I'd probably do it such that the content is already there on the page and then hidden by JS after the page loads, instead of loading the content in with AJAX calls later. That way it'd be more performant as well as more friendly for non-JS browsers and bots.

Garrett Albright, There is a

cr0ss's picture

Garrett Albright, There is a term "white space on a map". Website - is informational provider item of the internet, first of all. And its not a rule that every empty hole should be filled by ads or benefit content. Just imaging a financial or newsletter website with a bunch of white space right at the sidebar. It has no sence to left that space and "Useless Space" term is absolutely reasonable there.

There is a third implementation could be regarding this topic. And its tieing of these both ideas you've mentioned above. It is following:

Website editor providing new article or some content page for the site, Ajax call requesting for already stored information about content viewing, and if its empty - saving the space-flag (some flag about status for which content could be provided for certain page) and showing additional content. Next time this page displayed the server part reading space-flag and displaying information. This approach as I understand could prepare the ready page without empty spaces during the editor actions.

@Garrett: Well, my reason for

tsvenson's picture

@Garrett: Well, my reason for suggesting this was not to get an easy way of filling "useless space" with ads. For my own sites I would use it to be able to divide blocks/panes up in important and less important. The important would be those that always should be visible on a certain page, while the less important only would show if there is unused space available.

I believe this would prevent many pages from looking as a "Matrix" screen :)

--
/thomas
T: @tsvenson | S: tsvenson.com

Here is a case study where

gmclelland's picture

Here is a case study where they filled up the unused space with images:
See the The Vintage Aviator case study:
http://drupal.org/node/267393

excerpt:
spacefiller.module
This is a custom module I wrote to leverage the jstools dynamicload(block). It incrementally requests content from a pool of (imagecache-processed) gallery images to fill up gaps in the page. It does this post-load, as it's only then that we can calculate the page dimensions, and also so that requesting all those images doesn't slow down page loads.
You'll see it in the left column on a huge page http://thevintageaviator.co.nz/airshows/warbirds-over-wanaka/warbirds-ov...

Hope that helps somehow.
-Glenn

Contributed Module Ideas

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: