The power of Blocks

[Joss]

This is the third of my demos using ProcessWire, attempting to both show the flexibility of the system to local clients and to demonstrate a range of basic site approaches

http://pwdemo3.stonywebsites.co.uk/

This one takes the idea of using blocks to an extreme. It allows you to create a large library of blocks with some standard customisations:

You can

• Choose to display a title or not
• Choose to link the title to another page
• Additionally, link the image to another page
• Choose to display an image or not
• Display the image above or below the text
• Add a video to the text box
• Choose an icon from a list (and turn it off and on)
• Select a colour theme for the block from a pre-designed set

Each page has tools to select and arrange blocks from the library - only the footer blocks are controlled globally.

I have used a fairly artistic approach for this particular version, but to be honest it could be used for anything

Note to self: 

When dealing with lots of lorem ipsum, don't hit the spell-check button.

[josedigital]

very nice, Joss. i need to look into using blocks as you are doing. i'm starting a build-out of our intranet using  processwire. it is currently a drupal site but i want to simplify things for everyone (devs and content providers) and  i really do think processwire is the way to go. but since our external site is drupal, everyone is kinda stuck on it because that's what they know. although everyone complains constantly about using it. 

anyhow, great work. if you've got any insight to share, i'd love to take a look at a schematic of your structure or anything like that.

[Joss]

Well, like anything ProcessWire shaped, the way you decide to do this will more reflect on how you want to use it rather than anything else. In this case it is for a bootstrap based site and I wanted to create a very set way for every block.

So,

I create a block template with the following fields:

• Title
• Show title (checkbox)
• Link title (page select)
• Use Link (checkbox)
• Text (a tinymce field with only bold, italic and link)
• Image field (with some dimension restrictions)
• Image below (checkbox - by default the image is above the text, tick to move it below the text)
• Link image (checkbox - uses the above link for the image as well)
• Block theme (page select - from a list of themes that are in my css - just background-color and color plus link color)
• Use theme (checkbox - so you can switch the theme off without forgetting which one you used)

The block pages are created under a hidden page.

The themes are pages also created under a hidden page with just two fields - title, to describe the theme, and a text box to put the actual style name in.

Each page template that I want to use blocks in has a repeater field with two fields in it:

• Block_select (page field so you can choose a single block from where ever in your page tree you store them)
• Span (text box/integer with a max value of 12 for defining the bootstrap span width for horizontal rows.)

If I didn't need the span, I could just use a page field set to multiple and the amsSelect type so that I can rearrange the order. 

So, now I can create a library of blocks with images (or not) text (or not) and call them into specific parts of my site related to specific pages. However I want to do them.

For instance, in my footer.inc file I have a row for blocks that are shown throughout the site. I created a special hidden page just for selecting which blocks go into the footer.

I have created a separate include file with all the layout for the blocks, and then I include this in various other template files, and just pass a variable ($theseblocks) from the parent template file which is the actual repeater field being used for that particular page.

Just for interest, here is the blocks file with all the code to either show or not show various bits and so on:

 <?php if(count($theseblocks) > 0){ ?>
<div id="myboxes" class="row-fluid">
 <?php foreach($theseblocks as $thisblock) { ?>
    <div class="block-padding <?php if($thisblock->block_span) { echo "span".$thisblock->block_span; } ?> blockcontainer <?php if($thisblock->block_select->block_show_theme) {echo $thisblock->block_select->block_theme_select->block_class;} ?>" >
    <?php if($thisblock->block_select->block_show_icon) { ?> 
    <div class="row-fluid">
    <div class="span3 blockicon"><img src="<?php echo $thisblock->block_select->block_select_icon->icons->url; ?>" /></div>
                <!-- Title with Icon -->
    <div class="span9 blockicontitle">
                    <?php if($thisblock->block_select->block_show_title){ 
                            if($thisblock->block_select->blocks_enable_link) { echo "<a href='" . $thisblock->block_select->block_link_title->url . "'>";  } 

                                echo $thisblock->block_select->title;  
                            if($thisblock->block_select->blocks_enable_link) { echo "</a>";  } 
                        } ?>
                </div>

    </div>
    <?php } else { ?>
    <?php if($thisblock->block_select->block_show_title){ ?>
    <div class="row-fluid">
                <!-- Title, no icon -->
    <div class="span12 blocktitle">
                    <?php if($thisblock->block_select->block_show_title){ 
                            if($thisblock->block_select->blocks_enable_link) { echo "<a href='" . $thisblock->block_select->block_link_title->url . "'>";  } 

                                echo $thisblock->block_select->title; 

                            if($thisblock->block_select->blocks_enable_link) { echo "</a>";  } 
                        } ?>
                </div>

    </div>
    <?php } ?>
    <?php } ?>
     
        <!-- Image Below Text -->
        <?php if($thisblock->block_select->block_image_below) { ?>
        <?php if($thisblock->block_select->block_tinymce_body) { ?>
        <div class="blockbody">
        <?php echo $thisblock->block_select->block_tinymce_body; ?>
        </div>
        <?php } ?>
       <?php if($thisblock->block_select->block_image) {  ?>
       <div class="blockimage">
       <?php if($thisblock->block_select->block_link_image) { echo "<a href='" . $thisblock->block_select->block_link_title->url . "'>";  } ?>
        <img src="<?php echo $thisblock->block_select->block_image->url; ?>" />
        <?php if($thisblock->block_select->block_link_image) { echo "</a>";  } ?> 
       </div>
       <?php } ?>
        <?php } else { ?> 

            <!-- Image Above Text -->
       <?php if($thisblock->block_select->block_image) {  ?>
       <div class="blockimage">
             <?php if($thisblock->block_select->block_link_image) { echo "<a href='" . $thisblock->block_select->block_link_title->url . "'>";  } ?>  
       
        <img src="<?php echo $thisblock->block_select->block_image->url; ?>" />

       <?php if($thisblock->block_select->block_link_image) { echo "</a>";  } ?>



       </div>
       <?php } ?>
           <?php if($thisblock->block_select->block_tinymce_body) { ?>    
                <div class="blockbody">
              <?php echo $thisblock->block_select->block_tinymce_body; ?>
                </div>
                <?php } ?>
            <?Php } ?>

    </div>
<?php } ?>
</div>
<?php } ?>

Yes, I know it needs tidying up - I haven't had time yet!

 

[josedigital]

wow! thanks, Joss!! this is extremely detailed and most helpful. much appreciated, my good man.

[WinnieB]

Joss - these demo sites you're posting are great, very inspiring for a beginner like me.

Also, I'm glad I wasn't drinking anything when I read the following or I would have snarfed:

"When life is coming at you thick and fast and you have no where else to go, sit down and stick your chin in your hands."

[Joss]

ha - glad it cheered you up. That is daughter number two on one of her cheerier days.

I am hoping they might be a little inspiring for one or two local companies too and that they give me some work!