Block Building Advice
Permalink 1 user found helpful
So, I've just started with concrete5. I'm building my first site with it now, and I'm really digging it so far. As part of this experiment, I want to try building a block/add-on myself, just to get under the hood a bit. I was hoping you guys could offer some advice as to how I might proceed, or where I might start.
The basic idea is that I have a large content area on my home page that is meant to be a jquery image rotater. All the functionality is built, but I'd like to try to make it a block/add-on in concrete5. There are several ways I could see this working, but I'm obviously new to concrete5 specifically, and more generally new to the MVC framework as a whole. I'm hoping to get some feedback from more experienced c5 folks about how I might proceed.
One way would be to simply have one parameter in the block's add/edit popup, call it "tags." The Model could then go into the uploaded files in the database and pass attributes like url, description, etc for all uploaded images with the specified tags into an array. The Controller could then iterate through the array, passing HTML for each image to the View. This way I could control all the layout from css, but each time I add a new image with the specified tag, it would automatically add that image to the rotater.
It seems like that would be relatively simple to accomplish, but again I'm new to the whole thing, and I don't know if I'm even thinking about it in the right way. Obviously there could be more complexity added, like being able to specify height and width, surrounding <div> id, having the ability to add and delete files from a list held in the add/edit popup, etc.
There may well be add-ons in the marketplace that accomplish this exact thing, but for my purposes I'd like to get under the hood and see how these things are accomplished with c5. Any advice as to where to start or how to approach the thing would be greatly appreciated.
Philip
The basic idea is that I have a large content area on my home page that is meant to be a jquery image rotater. All the functionality is built, but I'd like to try to make it a block/add-on in concrete5. There are several ways I could see this working, but I'm obviously new to concrete5 specifically, and more generally new to the MVC framework as a whole. I'm hoping to get some feedback from more experienced c5 folks about how I might proceed.
One way would be to simply have one parameter in the block's add/edit popup, call it "tags." The Model could then go into the uploaded files in the database and pass attributes like url, description, etc for all uploaded images with the specified tags into an array. The Controller could then iterate through the array, passing HTML for each image to the View. This way I could control all the layout from css, but each time I add a new image with the specified tag, it would automatically add that image to the rotater.
It seems like that would be relatively simple to accomplish, but again I'm new to the whole thing, and I don't know if I'm even thinking about it in the right way. Obviously there could be more complexity added, like being able to specify height and width, surrounding <div> id, having the ability to add and delete files from a list held in the add/edit popup, etc.
There may well be add-ons in the marketplace that accomplish this exact thing, but for my purposes I'd like to get under the hood and see how these things are accomplished with c5. Any advice as to where to start or how to approach the thing would be greatly appreciated.
Philip
Oh boy do I have the perfect blog post for you:
http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/...
You'll need to replace the stuff about FlexSlider with your own front-end code, but all the back-end C5 integration is covered.
Good luck.
-Jordan
http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/...
You'll need to replace the stuff about FlexSlider with your own front-end code, but all the back-end C5 integration is covered.
Good luck.
-Jordan
Awesome. I'll check it out this morning and let everybody know how it goes.
Okay, so I got this going. Big-time props to Jordan for spending the time to write everything up! This is without a doubt the most comprehensive and helpful tutorial I've come across since I started playing with c5 a couple weeks ago.
I am, however, a bit disappointed with flexslider. It seemed easiest just to go with that, since that's how Jordan wrote it up. No problems getting things to come up or function off the top, but once you click on the navigation, the animation pauses permanently. I guess that's the intended functionality but it seems to me that the timer should reset and the animation resume after you're finished hovering/clicking with the navigation.
Any thoughts on this, Jordan or others? I may end up going back to my initial slider implementation, not sure yet.
I am, however, a bit disappointed with flexslider. It seemed easiest just to go with that, since that's how Jordan wrote it up. No problems getting things to come up or function off the top, but once you click on the navigation, the animation pauses permanently. I guess that's the intended functionality but it seems to me that the timer should reset and the animation resume after you're finished hovering/clicking with the navigation.
Any thoughts on this, Jordan or others? I may end up going back to my initial slider implementation, not sure yet.
I would absolutely go with your original slider implementation. The point of that tutorial was to show how to integrate any front-end slider with the C5 editing interface. I just used FlexSlider as an example.
FlexSlider (as with every javascript slider I've used) requires a decent amount of CSS tweaking to make it look right on a site. This is not something I could really do a tutorial on as it is so different from one design to another.
FlexSlider (as with every javascript slider I've used) requires a decent amount of CSS tweaking to make it look right on a site. This is not something I could really do a tutorial on as it is so different from one design to another.
Yeah, that makes sense. FlexSlider looked like a decent plugin so I thought I'd give it a shot. My implementation is custom jQuery from scratch. There's no support for it, nor plans of any great features being added, but it does exactly what I want it to do :-)
Thanks again for the tutorial. Got any more planned in the near future?
Thanks again for the tutorial. Got any more planned in the near future?
I've got nothing but plans! We'll see if I can actually get stuff done though :)
(So yes, hopefully sooner than later, but no firm schedule).
(So yes, hopefully sooner than later, but no firm schedule).
Can't to see what you cook up! Like I said, this block-building tutorial has done more to help me understand what goes on under the hood of c5 than anything else so far, so thanks a TON for that, Jordan.
And just so you know, I went back to my original slider implementation in just a couple minutes. Only had to change a bit of jQuery and the view.php, really.
And just so you know, I went back to my original slider implementation in just a couple minutes. Only had to change a bit of jQuery and the view.php, really.
Thanks for the nice feedback -- knowing it's actually helpful to people is very motivating.
And I'm glad to hear you got your original slider working.
And I'm glad to hear you got your original slider working.
Concrete blocks are an economical and adaptable material for many home do-it-yourself projects. They're expedient to work with, since they're frivolous enough for most adults to lift easily and large enough to stack without needing mortar to hold them together.Block manufacturers create the product in a controlled environment, so you can count on it to perform as you expect. If a concrete block foundation does happen to crack, it cracks in a predictable manner that a mason can easily repair. Finally, concrete block construction is one of the most affordable building options around, with prices staying pretty stable over time
http://www.rmscaff.com/
http://www.rmscaff.com/
This is the best blogspam ever.
Could be a short screenplay called "When Robots Misunderstand Metaphors"
Could be a short screenplay called "When Robots Misunderstand Metaphors"
nice that you show interest in building blocks for c5. i just started to do this some months ago and I would see it is easy to learn because there are many examples provided in the marketplace (addons) where you can get inspiration and source code examples. After you understand the parts of the block like view.php, db.xml file and the controller, it's not a big thing to create your addon i think.
First theoretical start point would be the developer docs:
http://www.concrete5.org/documentation/developers/blocks/understand...
The addon DesignerContent is a nice way to understand what a complete block contains. Additionally it contains some best practise things. Just generate a block in the dashboard and look at the generated source code in your "blocks"-folder:
http://www.concrete5.org/marketplace/addons/designer-content/...
The developer docs will also provide you with methods you could use for your tag-search:
http://www.concrete5.org/documentation/developers/files/searching-a...
I learned a lot from looking at similiar packages, e.g. if you want to do a jquery image slideshow/rotator, look for similiar addons and how they solved it.
Good Luck & Have fun!