Monitor Reply

Support

Edit block to continually add more <li> to ULs?

Permalink Browser Info Environment October 07, 2011 at 3:34 PM

I want to create a filterable portfolio as you see in the link below. This is created by just an Unordered List. In order for the client to be able to add to the Portfolio, however, he would need to be able to edit the block and add an additional <li> to the <ul>... I can't figure out if there's a way to do this or not with a Designer Content block... I know that you can EDIT what's there already, but is it possible to ADD additional bits of content to a previously created block?

Thanks!

Here's the portfolio:
http://www.newmediacampaigns.com/portfolio...

Type:	Discussion
Status:	New

jordanlev replied on Oct 7, 2011 at 3:45 pm Permalink Reply

Not sure I totally understand what the problem is...

First of all, though, I probably would try to implement this as a custom template for the Page List block. But it looks like you've already got it fairly developed so let's assume having individual blocks for each item is a requirement.

So you know you can add "Static HTML" fields when creating the block in Designer Content to add wrapping HTML, correct? So you could put a "static html" field in the beginning that contains "<li>", and another one at the end containing "</li>". If you've already created the block and so going back to the Designer Content dashboard isn't an option, you can easily add this to the already-created block by editing the block's view.php file and inserting html wherever you need it to go (this is all that the static html field does anyway).

Another option is in your page type template, when you have the code to display the area, you can use the setBlockWrapperStart and setBlockWrapperEnd functions to put markup around every block in the area, for example:

<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<li>');
$a->setBlockWrapperEnd('</li>');
$a->display($c);
?>

Or... maybe there's something I'm missing about your specific situation here?

PS - really nice site, looks great!

jordanlev replied on Oct 7, 2011 at 3:51 pm Permalink Reply

Hmm... I just looked at the source of that page, and it looks like it's not a C5 site at all, but using the HiFi CMS (which has really amazing developers behind it, and is probably a delight to code for but from what I can tell their admin UI is still old-school back-end dashboard style and hence not as user-friendly as C5).

So if you're re-building this site, then I'd go with the page list option -- because that way the user doesn't have to do double entry of data -- they just add a new portfolio page and it will automatically appear in the list there.

zoinks replied on Oct 7, 2011 at 4:02 pm Permalink Reply

Thanks.

It would be cool if you do an update of the block to add the option to ADD stuff as opposed to just EDITING stuff. Not sure if this is possible, but it would be cool. I'm sure some brainiac could figure it out.

jordanlev replied on Oct 7, 2011 at 4:33 pm Permalink Reply

Not sure what you mean by this -- you can just add another block to your page.

zoinks replied on Oct 7, 2011 at 4:49 pm Permalink Reply

It's pretty simple:

Currently, the Designer Content block allows you to create the fields that the client can input once and only once. They can add several of those blocks and they can edit the blocks once they are created, but they can not ADD to the blocks. You can't add another image, for example; you can just swap out the image you have in that place. In this case, the option I was hoping to figure out was just adding another <li> the the <ul>.

I hate page lists. To you, it might seem easier and natural, but to me, it's not. Those things are a freggin nightmare to customize.

jordanlev replied on Oct 7, 2011 at 5:08 pm Permalink Reply

I see -- you want to modify the block type after it's already been generated with Designer Content. Yeah that would be cool but it's an unbelievable amount of work and complication (it's not just double the effort but squared or cubed), so I don't think it will ever happen. But in the case of adding an <li> tag, that is *really* simple to do -- just edit the view.php file of the block as I described above.

And I understand your hatred of Page Lists. Have you tried using the custom template I linked to? If that is also confusing to you I'd love to hear your feedback on that as I'm trying to get it included in C5 core and want it to be as easy as possible for designers to work with.
The Page List block is the foundation of Concrete5 sites in my opinion, and it's a total shame that it's so difficult to work with because to me it's the most powerful aspect of the system -- hence my efforts to improved it.

Thanks.

zoinks replied on Oct 7, 2011 at 4:06 pm Permalink Reply

<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<li>');
$a->setBlockWrapperEnd('</li>');
$a->display($c);
?>

^ this looks very intersting... perhaps I can use that somehow.

Yes, I didn't mean to imply it was a C5 site at all. IT's someone else's site and I just want to use their Portfolio script. THey offer it as a free download. I have found that your Designer Blocks allow me to use pretty much any old script easily. Just can't add to them... and in this particular instance, adding to the portfolio is a necessary option.

jordanlev replied on Oct 7, 2011 at 4:32 pm Permalink Reply

I think they're just using the jquery quicksand plugin:
http://razorjack.net/quicksand/...

Page List is the way to go here in my opinion. This makes customizing the page list template a lot easier:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/pag...

zoinks replied on Oct 12, 2011 at 3:32 pm Permalink Reply

Well, I did end up using PageList as per your recommendation.

I had to create a thumbnail image attribute for each page and a custom template for the pagelist to display that thumbnail.

Now the tricky part is... how would I use that jquery quicksand plugin? I don't see any way I could create multiple categories in order for them to slide around and disappear and whatnot.

jordanlev replied on Oct 12, 2011 at 5:10 pm Permalink Reply

What is the category -- where does it come from?
How were you going to do that before (with the non-page-list solution)?

zoinks replied on Oct 12, 2011 at 5:56 pm Permalink Reply

Thanks, I appreciate it.

Now that I am using PageLists, I have 4 parent pages:
Commercial, Residential, Signature and Build.

These Parents are acting as my categories.
Each parent has several children.

So, on a separate page, I have 4 PageList blocks which grab the subpages beneath one of the 4 Parent pages.

Now, I just have to figure out how I can hide the different pagelists one at a time as per the Quicksand jquery plugin. According to the documentation, I need to be able to apply id's to the ULs... but as I'm looking at the PageList templates, they don't have ANY ULs.

Here's that documentation I'm talking about.
http://razorjack.net/quicksand/docs-and-demos.html#examples...

It seems impossible to work this in with PageLists, actually. I don't think it's going to work with C5.

jordanlev replied on Oct 12, 2011 at 7:45 pm Permalink Best Answer Reply

Interesting... well anything is possible.
You might want to consider making this a single_page instead of a block. Then you can use the PageList model in code 4 different times (one for each section), treat the category page id's as the "category" for purposes of the quicksand code, and output the various <ul>'s that way.

For example:

<?php
//Retrieve page structure...
$topLevelPage = Page::getByPath('/path/to/top/page');
$subPageIDs = $topLevelPage->getCollectionChildrenArray(true); //pass true to restrict children to only one level
$categoryNames = array();
$categoryPageLists = array();
Loader::model('page_list');
foreach ($subPageIDs as $spID) {
    $categoryNames[$spID] = Page::getByID($spID)->getCollectionName();
   $pl = new PageList();
   $pl->sortByDisplayOrder();
   $pl->filterByParentID($spID);
   $categoryPageLists[$spID] = $pl->get();
}
//Output categories...

Viewing 15 lines of 29 lines. View entire code block.

 
<?php
//Retrieve page structure...
$topLevelPage = Page::getByPath('/path/to/top/page');
$subPageIDs = $topLevelPage->getCollectionChildrenArray(true); //pass true to restrict children to only one level
$categoryNames = array();
$categoryPageLists = array();
Loader::model('page_list');
foreach ($subPageIDs as $spID) {
    $categoryNames[$spID] = Page::getByID($spID)->getCollectionName();
   $pl = new PageList();
   $pl->sortByDisplayOrder();
   $pl->filterByParentID($spID);
   $categoryPageLists[$spID] = $pl->get();
}
 
//Output categories...
foreach ($categoryNames as $cID => $cName) { ?>
    <label><input type="radio" name="type" value="<?php echo $cID; ?>" /><?php echo $cName; ?></label>
<? }
 
//Output list
?>
<ul id="applications" class="image-grid">
    <?php foreach ($categoryPageLists as $parentID => $pl): ?>
        <?php foreach ($pl as $page): ?>
            <li data-id="id-<?php echo $page->getCollectionID(); ?>" data-type="<?php echo $parentID; ?>">
                <a href="<?php echo View::url($page->getCollectionPath()); ?>"><?php echo $page->getCollectionName(); ?></a>
            </li>
        <?php endforeach; ?>
    <?php endforeach; ?>
</ul>

(I'm outputting the sample markup from this page:http://razorjack.net/quicksand/demos/one-set-clone.html... -- you will need to figure out how to make the javascript work).

zoinks replied on Oct 13, 2011 at 12:54 pm Permalink Reply

thank you very much! I will play around with this idea and see if I can get it to work.

Hopefully, you enjoy figuring this kind of thing out... otherwise, I apologize for bending your ear for so long!

jordanlev replied on Oct 13, 2011 at 12:58 pm Permalink Reply

You're welcome! And yeah, I do enjoy this kind of stuff (otherwise I wouldn't be in the forums at all :)

This is actually something I do very often with my own projects so I had most of the code already (not the quicksand part, but the stuff about querying page lists).

zoinks replied on Oct 7, 2011 at 4:52 pm Permalink Reply

Yes, I think this is the way to go:

<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<li>');
$a->setBlockWrapperEnd('</li>');
$a->display($c);
?>

Thanks so much!

Designer Content

Support

Edit block to continually add more <li> to ULs?

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post