confusion with block creation
Permalink
Hi everyone,
Unfortunately I'm pretty new to php and Concrete5 and I've been reading all over the place trying to find what to do in creating a new custom block. I've been busy converting my work's website from its existing cms to concrete, and have managed to get most of it done pretty successfully I think, but now I need a custom block to do one section of it, and struggling woefully.
The existing page is athttp://wallbrink.com.au/index/index/page/portfolio...
The logic structure I've worked out for the block (I've called it Portfolio) is essentially this:
Add Portfolio block to page
display Add.php
Enter "project" name
Enter "client" name
Enter "... other project details"
click "Hide" button for any unwanted fields (or if nothing is entered, that field is not displayed on final page)
select fileset for photo thumbnails
select fileset for full photos (maybe not needed???)
click "Add" button to add project to Portfolio
Enter second project details or click "Save" to finish and exit
When editing the Portfolio block
select existing project from drop-down list
click "Edit" to change project details
click "Save" to finish editing
Enter new project details
Click "Add" to add new project to Portfolio
click "Save" to finish and exit
I've been looking at the core slideshow php files as an example, but I'm not getting very far with it.
I don't think I'll have much problem styling the output with css, but if someone could give me a few basic pointers as to what I need to do, particularly with managing the data side of things and hooking in the existing js that drives the navigation arrows and text area scrolling, that would be great.
Unfortunately I'm pretty new to php and Concrete5 and I've been reading all over the place trying to find what to do in creating a new custom block. I've been busy converting my work's website from its existing cms to concrete, and have managed to get most of it done pretty successfully I think, but now I need a custom block to do one section of it, and struggling woefully.
The existing page is athttp://wallbrink.com.au/index/index/page/portfolio...
The logic structure I've worked out for the block (I've called it Portfolio) is essentially this:
Add Portfolio block to page
display Add.php
Enter "project" name
Enter "client" name
Enter "... other project details"
click "Hide" button for any unwanted fields (or if nothing is entered, that field is not displayed on final page)
select fileset for photo thumbnails
select fileset for full photos (maybe not needed???)
click "Add" button to add project to Portfolio
Enter second project details or click "Save" to finish and exit
When editing the Portfolio block
select existing project from drop-down list
click "Edit" to change project details
click "Save" to finish editing
Enter new project details
Click "Add" to add new project to Portfolio
click "Save" to finish and exit
I've been looking at the core slideshow php files as an example, but I'm not getting very far with it.
I don't think I'll have much problem styling the output with css, but if someone could give me a few basic pointers as to what I need to do, particularly with managing the data side of things and hooking in the existing js that drives the navigation arrows and text area scrolling, that would be great.
EDIT: Oops, sorry I responded to the wrong message here. See real reply below.
Depending on how your information is set up, it might be easier to make a custom template for the page list block, and for each slide your users would add a new page under that slideshow page. Use custom attributes on those pages for the various pieces of data and pull those attributes in on the page list template.
But if that won't work, then you might want to try using the Designer Content addon to get you started with this custom block:
http://www.concrete5.org/marketplace/addons/designer-content...
Don't worry about making the edit interface too complex with showing/hiding things -- just have fields for everything and depending on whether the user has filled them out or not, that determines what you display on the front-end.
Designer Content doesn't include anything for file sets, so you'll have to add those yourself. Here is a forum thread where I posted a very basic image gallery addon that might be useful for you (to look at the code and see how it's done -- it's WAY simpler than the built-in slideshow block):
http://www.concrete5.org/community/forums/customizing_c5/jquery-sli...
Also see this thread for a more general discussion of the different ways to approach these kinds of problems (may or may not be useful to you):
http://www.concrete5.org/community/forums/customizing_c5/custom-int...
Good luck!
-Jordan
But if that won't work, then you might want to try using the Designer Content addon to get you started with this custom block:
http://www.concrete5.org/marketplace/addons/designer-content...
Don't worry about making the edit interface too complex with showing/hiding things -- just have fields for everything and depending on whether the user has filled them out or not, that determines what you display on the front-end.
Designer Content doesn't include anything for file sets, so you'll have to add those yourself. Here is a forum thread where I posted a very basic image gallery addon that might be useful for you (to look at the code and see how it's done -- it's WAY simpler than the built-in slideshow block):
http://www.concrete5.org/community/forums/customizing_c5/jquery-sli...
Also see this thread for a more general discussion of the different ways to approach these kinds of problems (may or may not be useful to you):
http://www.concrete5.org/community/forums/customizing_c5/custom-int...
Good luck!
-Jordan
I've had a look at your basic image gallery, and yes I think it does help somewhat. I don't think a custom template would be easier at this point, but I'll continue to ponder that method.
When I looked at the Designer Content addon previously, it didn't appear flexible enough to do what I wanted, but maybe I didn't look close enough.
Another level of complexity is that I need more than one fileset in the block - how do I include/name this, as "fsID2" and so on? I need to have two filesets displaying side by side which are essentially cropped "thumbnails" displaying at the same resolution as the full size image. The user clicks on the thumbnail to get the corresponding full size image in a light box. Can I use the lightbox js to parse the filename of the thumbnail and add something like "-full" to get the filename of the full size image?
I have attached two files to show you where I'm at currently. The "form_setup_html.php" is called directly by an include in edit.php and add.php
Also, could you give a brief explanation of what the if/else functions in the view() function do, also the reason for the add and edit functions (sorry my brain cant make sense of them at the moment!)
When I looked at the Designer Content addon previously, it didn't appear flexible enough to do what I wanted, but maybe I didn't look close enough.
Another level of complexity is that I need more than one fileset in the block - how do I include/name this, as "fsID2" and so on? I need to have two filesets displaying side by side which are essentially cropped "thumbnails" displaying at the same resolution as the full size image. The user clicks on the thumbnail to get the corresponding full size image in a light box. Can I use the lightbox js to parse the filename of the thumbnail and add something like "-full" to get the filename of the full size image?
I have attached two files to show you where I'm at currently. The "form_setup_html.php" is called directly by an include in edit.php and add.php
Also, could you give a brief explanation of what the if/else functions in the view() function do, also the reason for the add and edit functions (sorry my brain cant make sense of them at the moment!)
Just make another field for the other file set (and give it a different name, like fsID2 as you suggest). Note that in your attached file you're missing a closing php tag:
before your <div id="ccm-portfolioBlock-fsRow" class="ccm-portfolioBlock-fsRow" > line.
To get thumbnails in concrete5 you need to generate them using the image helper. Check out the free "Simple Image Gallery" addon in the marketplace for an example of how to do this (and the lightbox).
?>before your <div id="ccm-portfolioBlock-fsRow" class="ccm-portfolioBlock-fsRow" > line.
To get thumbnails in concrete5 you need to generate them using the image helper. Check out the free "Simple Image Gallery" addon in the marketplace for an example of how to do this (and the lightbox).
Thanks for the pickup with the tag.
Unfortunately I need to pre-generate the thumbnails so they're cropped to the correct area of the full image - ie not an automatic crop of a certain distance from each edge.
Is there no means of nominating a set of images as the thumbnails for another set?
Unfortunately I need to pre-generate the thumbnails so they're cropped to the correct area of the full image - ie not an automatic crop of a certain distance from each edge.
Is there no means of nominating a set of images as the thumbnails for another set?
No, unfortunately there is no way to do this easily. There are 3 options I can think of:
1) Have 2 filesets and match up the images there. For example, the first image of Fileset2 is the thumbnail for the first image in Fileset1; second image in Fileset2 is thumbnail for second image in Fileset1; etc. This is the easiest to program, but is not the best for your end-users because now two filesets need to be maintained in parallel (and if you change one image you have to remember to change it in the other fileset too).
2) Don't use filesets but instead just choose a bunch of individual images. This is more difficult to program because you need to figure out how to manage the edit interface -- basically make it look like the slideshow block's edit interface, which is very messy and complex. Also if there are tons of images involved it is going to be more difficult for the user to manage than file sets.
3) Create a custom attribute for files that is of the "File/Image" type (go to Dashboard -> File Manager -> Attributes). This will be fairly easy to program, but is going to be kind of inefficient for end-users to manage because they need to click on each image in the file manager and choose "properties" in the popup menu and then set the cropped thumbnail there.
Hope that helps.
-Jordan
1) Have 2 filesets and match up the images there. For example, the first image of Fileset2 is the thumbnail for the first image in Fileset1; second image in Fileset2 is thumbnail for second image in Fileset1; etc. This is the easiest to program, but is not the best for your end-users because now two filesets need to be maintained in parallel (and if you change one image you have to remember to change it in the other fileset too).
2) Don't use filesets but instead just choose a bunch of individual images. This is more difficult to program because you need to figure out how to manage the edit interface -- basically make it look like the slideshow block's edit interface, which is very messy and complex. Also if there are tons of images involved it is going to be more difficult for the user to manage than file sets.
3) Create a custom attribute for files that is of the "File/Image" type (go to Dashboard -> File Manager -> Attributes). This will be fairly easy to program, but is going to be kind of inefficient for end-users to manage because they need to click on each image in the file manager and choose "properties" in the popup menu and then set the cropped thumbnail there.
Hope that helps.
-Jordan
Yes I think option 1 is the way to go, and will not be too hard for the end user (it will only be my boss and I doing it anyway). But as mentioned in my pm to you, I still need help getting the block completed, there is too much that I just don't know.
This is the mockup I've come up with - it's a bit simpler.
