Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘Pinterest’

There are many different solutions for creating Pinterest-like, dynamic-column layouts.

Salvattore is another good one that comes with an important difference: it is not configured in JavaScript but in CSS.

It is again a JavaScript-powered solution but doesn’t require any frameworks.

Salvattore

The number of columns are mentioned in CSS and it is pretty easy to define different numbers for different devices using @media queries.

And, Salvattore works on almost all modern browsers (IE9+).

Pinterest-like responsive grid layouts became one of the standard ways to present “lots of content” in an organized way.

For anyone willing to use such layouts on any web project, Grid Layout Shock is one of the easiest yet feature-rich solutions out there. And, they are giving away 5 Developers licenses to WRD readers (details at the bottom).

GridLayoutShock

It is available in 2 versions:

  • WordPress plugin
  • jQuery plugin

which makes the usage for almost any type of website so quick and painless.

They are both responsive, have multiple styles and can be customized in means of look/feel.

The WordPress plugin integrates with the site completely as it can pull the content from posts, custom post types, taxonomies, galleries and portfolios (both versions can get the data from RSS).

GridLayoutShock Sample

Using the shortcode generated in the plugin’s settings page, it can be added anywhere inside pages, posts and widgets. Or, the whole site can be displayed with a responsive grid template.

Also, the number of the posts, their order or dimensions can all be set.

Grid Layout Shock has both free (with limited features) and paid versions. Make sure you check them all.

How to join the giveaway?

5 Developer licenses ($99/each) are being given away. In order to join you can choose one or both of the actions to increase the chances:

The winners will be selected randomly and announced a week later (26 August 2013).

Good luck to all.

The winners

Here they are:

  • pete (comment #1271135)
  • Farhan (comment #1271164)
  • @AhmetCAKIR
  • Ashmita Dobariya (comment #1271411)
  • Paula (comment #1271493)

Congratulations and thanks very much everyone for joining.

There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest).

Although most of them are great, sometimes, the grids contain gaps or ragged edges.

Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly.

Mason.js

One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid.

It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

Ok, copying is not good.. but getting inspired from other successful projects and learning from them definitely makes sense.

Pinry, an open source web application, eases building Pinterest-like (dynamic-column-grid-layout) websites.

It allows users to register to the app and pin, tag and share media (images, videos and webpages) quickly.

Pinry - Pinterest Clone

And, a bookmarklet exists for saving the content without leaving the pages being browsed.

The application is built with Python (Django) and it is a good starting for creating a community around pinning contents or a bookmarking site for personal use.

Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps.

The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements.

jQuery Nested

There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout.

Its usage is very easy by simply targeting a container element through a jQuery function.

And, various options exist for customization like enabling/disabling animation, min. number of columns and more.

The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes.

Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly.

Wookmark jQuery Plugin

The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all.

Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).

Newspaper-like layouts based on random-width/height grids had always existed but Pinterest definitely made them popular so much.

Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts.

There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution.

Grid-A-Licious jQuery Plugin

Regardless of the screen size or device, the grid fits perfectly as it is floating (no absolute positioning is used) and fluid.

The plugin has options to customize the width, gutter and animation (speed, duration, effect, etc.).

And, it supports appending/prepending new items to the grid which is useful for dynamic layouts.

Today, almost everyone is active on multiple social networks and displaying social streams is a widely-implemented when creating websites.

jQuery Socialist is a plugin which can aggregate activity from multiple networks and display it as a single feed.

It can get the contents from Facebook pages, Twitter, LinkedIn, YouTube, RSS and many others with ease.

jQuery Socialist

The plugin can present the combined stream as a Pinterest-like responsive layout or any other custom one you can design (multiple ready-to-use themes exist).

P.S. A WordPress plugin for Socialist is also under development.

Infinite-Social-Wall is an open source PHP-MySQL application for presenting any social activity in a Pinterest-like interface.

The application can actually grab the content from any number of given RSS feeds but it has built-in styles and icons for social networking sites like Twitter, Reddit, Instagram, Github and more.

Infinite Social Wall

It makes use the awesome Isotope plugin for the layout and can scroll infinitely by loading new items while scrolling.

Infinite-Social-Wall uses the database for storing the parsed content from the feeds in our not to parse them each time.

For anyone willing to create such a self-updating website, the application is a very handy resource.

Socialite.js is a JavaScript library for having more control over social sharing buttons.

The library is lightweight (2kb minified-gzipped), standalone and helps the social widgets to load when you want them or only when needed/requested to speed up web pages.

Socialite.js

It has support for the major players: Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify. There is no need to install the widget codes for each library as Socialite.js does that for you.

And, the library is extensible, any new social networks can be added with ease.

Uptime Robot
feed-holder
FeedBurner
PSD2HTML.com