The all new isotope layout
Permalink 2 users found helpful
Ok i ve been trying to include the new isotope jquery layout into site builds within concrete, but being very new to this sort of thing i m gonna need to ask some very newbie questions.
Firstly do i need to hard code this into the page or can i add it with a block of html text in the edit mode?
Secondly the js library needed for this i've been putting in the themes own js folder same with the css file for this but neither seem to work on concrete?
Any advice on this would be a great help
Here is a link to the isotope layout ( i m looking specifically at the re-layout side of it)
http://isotope.metafizzy.co/
Firstly do i need to hard code this into the page or can i add it with a block of html text in the edit mode?
Secondly the js library needed for this i've been putting in the themes own js folder same with the css file for this but neither seem to work on concrete?
Any advice on this would be a great help
Here is a link to the isotope layout ( i m looking specifically at the re-layout side of it)
http://isotope.metafizzy.co/
A better way to do this is to put the isotope javascript file in your theme's directory, then include a line like this in your theme's <head> (which as Kirk mentioned might be in an elements/header.php file, or might be at the top of all of your templates -- e.g. view.php, left_sidebar.php, etc. -- depending on how the theme was built):
As for what you do after you've included the javascript file... well that's a bit more complicated. You need to figure out what it is exactly that you want to apply that effect to. Do you want it to apply to a specific list of things in one portion of the page, or to everything everywhere on the page?
One approach would be to wrap all of the blocks on the page in a div with a specific class, which you do as follows:
Then in your isotope initialization code (which would also be in the <head> of your templates -- probably just under the line where you reference the javascript file) you would do something like this:
It's going to require a lot of experimenting -- good luck!
<script type="text/javascript" src="<?php echo $this->getThemePath(); ?>/jquery.isotope.min.js"></script>
As for what you do after you've included the javascript file... well that's a bit more complicated. You need to figure out what it is exactly that you want to apply that effect to. Do you want it to apply to a specific list of things in one portion of the page, or to everything everywhere on the page?
One approach would be to wrap all of the blocks on the page in a div with a specific class, which you do as follows:
<div id="isotope-container"> <?php $a = new Area('Main'); $a->setBlockWrapperStart('<div class="isotope-item">'); $a->setBlockWrapperEnd('</div>'); ?> </div>
Then in your isotope initialization code (which would also be in the <head> of your templates -- probably just under the line where you reference the javascript file) you would do something like this:
<script type="text/javascript"> $('#isotope-container').isotope({ // options itemSelector : '.isotope-item', layoutMode : 'fitRows' }); </script>
It's going to require a lot of experimenting -- good luck!
Hey Fre23recruit,
Were you able to use the Isotope package with Concrete5? I was looking into it for a upcoming project as well.
Cheers,
Sh
Were you able to use the Isotope package with Concrete5? I was looking into it for a upcoming project as well.
Cheers,
Sh
I have a very simple solution to this: buy my theme! It's called FlexCRETE: Masonry.
It uses masonry, which is the platform that isotope was built from. Maybe if you buy it, you could extend it to suit your projects.
In fact, when I created the theme, I was originally looking at isotope, too. But, I found that it would be far to complicated for the end-user to use (or even understand).
Not only does my theme have the masonry framework, it is also responsive!! It's only $18 in the marketplace.
Here's the link:
http://www.concrete5.org/marketplace/themes/flexcrete-masonry/...
It uses masonry, which is the platform that isotope was built from. Maybe if you buy it, you could extend it to suit your projects.
In fact, when I created the theme, I was originally looking at isotope, too. But, I found that it would be far to complicated for the end-user to use (or even understand).
Not only does my theme have the masonry framework, it is also responsive!! It's only $18 in the marketplace.
Here's the link:
http://www.concrete5.org/marketplace/themes/flexcrete-masonry/...
I would second this recommendation. I haven't used the FlexCRETE theme, but I have built sites with both Masonry and Isotope before -- and it required *A LOT* of custom development work. Even if his theme doesn't suit your needs perfectly, $18 is a steal just to see how the code can integrate with C5 (even if you decide to do it in a different way later on).
but does it do the cool filtering like isotope does? the demo just shows boxes of things, but I don't see any filtering in your theme. Thanks.
About to use this aswell in a project... anyone got it working in c5?? I have been breaking up the code and filter out all the stuff i didnt need - it was working in normal hmtl... Now when i want to implement it into c5 it wont work!! i have checked all the .js files are loaded etc. still doesnt work :(
I've gotten it to work in C5, but it took a *LOT* of development time (and I am a very experienced developer). I don't think it's something you're going to be able to get a quick answer to on the forums. If you have very specific questions about how a very specific C5 function works with a very specific feature of the isotope JS, that is something you can probably get an answer for -- but just asking "how do I make it work" is most likely not going to be something people can answer.
Yea your right, it was a long shot... Ill try some more and get back if i manage to get it to work - ill happy share my code if anyone is interested after it works.
Would you or anyone be willing to link a page-list block to isotope?
i would be happy to pay for time, and that way the coding would be complete and could even be available to the community either via marketplace etc.
i'm really hoping for a solution that allows me to:
create a page list based on page type that is image based
(square div's with preview)
sortable through a page category menu (via the isotope animation)
and if possible, there could be a category where you could size/style blog posts accordingly.
it could be a variation of the flexcrete theme, or whatever other method people could think of, and i am comfortable making all necessary function + styling adjustments, but when it comes to inserting scripts id rather make sure all the features work first.
thanks in advance
i would be happy to pay for time, and that way the coding would be complete and could even be available to the community either via marketplace etc.
i'm really hoping for a solution that allows me to:
create a page list based on page type that is image based
(square div's with preview)
sortable through a page category menu (via the isotope animation)
and if possible, there could be a category where you could size/style blog posts accordingly.
it could be a variation of the flexcrete theme, or whatever other method people could think of, and i am comfortable making all necessary function + styling adjustments, but when it comes to inserting scripts id rather make sure all the features work first.
thanks in advance
Dojo has a page list variant in the addons that may do something like that. I can't remember just which.
http://www.concrete5.org/profile/-/3945/...
Growthcurve has the Masonry theme in the marketplace that is a bit less regular. Perhaps that could be tweaked with some fixed height css.
There is also a grid based theme that does something along those lines currently in the prb from 55webdesign.http://www.concrete5.org/profile/-/view/9622/...
Also, the core team have a grid on the way for c5.7.
http://www.concrete5.org/profile/-/3945/...
Growthcurve has the Masonry theme in the marketplace that is a bit less regular. Perhaps that could be tweaked with some fixed height css.
There is also a grid based theme that does something along those lines currently in the prb from 55webdesign.http://www.concrete5.org/profile/-/view/9622/...
Also, the core team have a grid on the way for c5.7.
thanks for the response John,
i had already checked out Dojo, and actually just emailed them.
the only thing regarding that plug is being able to have different sized categories inside page list, essentially creating a masonry - style dynamic layout.
also i would like for it to be able to open each post in a lightbox, including being able to view anything in the main content area, like videos/music/text.
if anyone thinks they could modify this add on for me, i would be happy to purchase it + have it customized to do this!
thanks again.
A
i had already checked out Dojo, and actually just emailed them.
the only thing regarding that plug is being able to have different sized categories inside page list, essentially creating a masonry - style dynamic layout.
also i would like for it to be able to open each post in a lightbox, including being able to view anything in the main content area, like videos/music/text.
if anyone thinks they could modify this add on for me, i would be happy to purchase it + have it customized to do this!
thanks again.
A
Your theme probably has an "elements" folder with header.php in it, or something like that. Or maybe not, and you'll have to do it on each page.
Note that the path must be relative to your site root, eg /themes/yourtheme/js/jquery.isotope.min.js
You can include
Make sure it is *after* the 'header-required' include, as jquery must be loaded first!
Then, include your specific jquery calls to activate isotope.
Hope that helps!