Isotope + Twitter Bootstrap + Infinite Scroll + Fluid/Responsive layout


29th April 2014 – I updated the code below and I think that now it really is as good as this can possibly get.
Perfect result!

I love both Isotope and Twitter Bootstrap framework, I think they’re great tools for developers & web designers alike.
However, due to the nature of TB’s fluid structure (with widths in % rather than px) and Isotope being originally developed way before this kind of layout structures were popular…. they don’t work nicely together out of the box.

Desandro (who, ironically, is a designer at Twitter), Isotope‘s developer, has recently released a beta for Isotope v.2 and the direction is definitely going towards making the library more accomodating of responsive and fluid layouts.
That said, I still had some trouble to make a full width website work as I wished, while implementing both, but I finally managed to make everything work beautifully.

isotope-8

Also, I am using Infinite Scroll (developed by Paul Irish), imagesLoaded (also developed by Desandro) and WP Imager (developed by me), to accomplish 3 more objectives:

– resize and cache images inside items
– make an endless list of items without needing to click on pagination
– make sure all images inside the items load before firing Isotope (mostly to avoid overlapping of partially formed items, while images are still loading).

All of this, on a WordPress site.

So here I’ll show you how they all work together.

Download and setup in your site, the (latest versions of) necessary scripts:

Isotope v2 beta .
Twitter Bootstrap (or use their CDN)
Infinite Scroll
imagesLoaded
WP Imager (keep in mind that this only works on WordPress)

I have removed pretty much all WordPress related code, so feel free to adapt it to whatever you need it for.

Template file

CSS

JS

Media Temple Hosting

There’s probably more solutions on how to achieve all of this, however after I researched extensively, this was the only solution that did the trick for me.
So, take all of this and adapt it to your needs!

I’m a Digital Consultant, Web Designer & Developer, specialized in WordPress.
I’ve been making websites for 17 years and have specialized in WordPress since 2009.
I like to work with PHP/MySQL, HTML5/CSS3/Javascript, Twitter Bootstrap and, of course, WordPress.
I help companies, professionals and startups grow with technology, I hand-pick the perfect team for them, plan projects from the ground-up, develop & deploy websites, online stores and apps.

Privacy Preference Center

Session

Also called a transient cookie, a cookie that is erased when the user closes the Web browser. The session cookie is stored in temporary memory and is not retained after the browser is closed. Session cookies do not collect information from the user s computer.

They are usually used to temporarily keep track of users' preferences (eg. currency, language, items you place in the cart - in case of an e-commerce website, which this website is not) throughout the website. Other times they are used to make sure the user is not a malicious bot trying to take down a website, hence the cookie cannot be disabled for security reasons.

They are usually harmless (or they should be!) and will go away when you leave the website or close the browser.

PHPSESSID,gdpr[allowed_cookies],gdpr[consent_types],uvc,__cfduid,_gh_sess
uvc,__cfduid
_gh_sess

Analytics

Persistent Cookies.

Also called a permanent cookie, or a stored cookie, a cookie that is stored on a user's hard drive, until it expires (persistent cookies are set with expiration dates) or until the user deletes the cookie.

These cookies are meant to profile the website's visitors and let the admins know who visits their website. Your name is not tracked, but your IP, country, browser and device specs, research terms and more, usually is. It helps admins understand what contents their users like best and who is their audience, in order to provide better and more targeted content.

Some of these might be relatively harmelss, since they were meant to first and foremost help admins to manage their site's audience and content, however they might also be used, to be collected and sold to third parties.

You can check a full explanation of a few of the most common ones here

_ga,_gat,_gid

Advertising

Persistent Cookies.

Also called a permanent cookie, or a stored cookie, a cookie that is stored on a user's hard drive, until it expires (persistent cookies are set with expiration dates) or until the user deletes the cookie.

These cookies are meant to collect your browsing preferences (your searches, the websites you visit, things you like or don't like, personal conditions and things you might not want a third party to know about nor to be sold to someone else).

A vast majority of websites, search engines, apps and social networks, will place these cookies in your browsers because they are showing you ads and making money off them. This is not inherently bad, however the ad you see, comes also with these cookies, to help Advertising Networks to show you even more relevant ads, as well as collect a vast amount of data about Internet users, to then be sold or mishandled in ways that could harm society.

This website shows Ads from Google, therefore it places their cookies in your browser (sorry!).
If you don't wish to be tracked, please adjust your privacy settings here.
We also show Facebook Ads, therefore if you don't wish to be tracked by them, please head over here to change your settings.

Also turn this site's consent toggle OFF.

Please understand that not allowing Advertising cookies to be placed in your browser, doesn't mean you will not see ads, you still will, just not really relevant to your interests.

On Chrome, click here, to block all third party cookies (they might all be used for advertising or collect your preference to be sold to the highest bidder, though, but most likely they will be).

fr,DSID,IDE
fr
DSID,IDE