Bootwire - Basic Twitter Bootstrap Profile

[OrganizedFellow]

A problem with Redactor is that you need to pay for it, although we (the community) could probably easily raise the 399 dollars needed for a OEM license in behalf of PW if needed. Personally i haven't had too many problems with Tinymce, but that's more or less from a end user perspective.

WHOA, my apologizes, lol, I wasn't aware that it was a commercial product. I must have seen it long ago when it was free or opensource, or maybe I'm just confused (again).

[JeffS]

@OrganizedFellow - Old version of redactor is free and available on github. New version is commercial with yearly fees.  License does not look compatible with ProcessWire.  There is a longer thread about this somewhere here.  

[Joss]

UPDATE

I have updated the Bootwire Starter Profile to version 0.5

This version included a functions.inc file that is included into the head.inc file.

This file has demo functions of various Bootstrap functionality that can either be used immediately, or (more properly) used as a starting point for your own functionality. These versions are kept very basic.

Functions include:

• Carousel
• Collapse (accordion)
• Tabs
• Button Dropdown
• Thumbnails used as a gallery

The functions are fully commented with instructions as to which fields were used or need to be created.

I have also added a bootwire.js file that includes a couple of bits of JQuery to correct some issues with thumbnail and div alignment over multiple rows. Read the instructions to see how to use this code.

Hopefully, this profile is now very functional as a base starting point. Any feedback from testing would be appreciated.

Joss

Note: I have temporarily removed the link to the demo profile while I update it with the new functionality

[Joss]

New Bootwire Demo Profile

This is a demo profile built on the Bootwire Starter Profile

It has a few extra fields and templates, just enough to show some of the functionality in a working situation.

It also comes with the Bootwire Admin theme.

If anyone has got time, I would appreciate any comments, especially some proof reading!

See it here:

http://bootwiredemo.stonywebsites.co.uk/

Download it here:

http://stonywebsites.co.uk/Bootwire-Demo-Profile.zip

[ryan]

Joss, really nice job with this profile! Tested out here and all is working great. Seems like an excellent starting point for people to use ProcessWire and Bootstrap.

Admittedly, I had a little confusion with the other BootWire profile because it was perhaps too minimal to the point where I wasn't sure if it was working, or what to do with it next… perhaps that's because I'm not experienced with Bootstrap. But this new version of the profile is great because someone can literally start using it and populating content and photos immediately. It also looks and flows nicely. 

A couple suggestions:

In /site/templates/includes/functions.inc it looks like some of the indentation was lost, which made it a bit hard to tell where a function starts and ends. Though it's possible it's my editor. 

The front-end could really use an "edit" link of some sort:

if($page->editable()) echo "<a href='{$config->urls->admin}page/edit/?id=$page->id'>Edit this page</a>";

Lastly, this is very minor, but I'm still a little confused by the label "Content Management" in the admin. Wondering if it might better be called "Shared Content" or "Tools" or something... because everything in the admin is content management, isn't it?

Is the version on modules.processwire.com and GitHub up-to-date with this one you've posted here?

[Joss]

Hi Ryan

The one on profiles is the starter one and is up to date with this one. 

The reason the other one is so minimal is that I am assuming that once people know what they want to achieve, they will want to start with a blank canvas - so that is blank canvas with Bootstrap attached, but a few bits in there just as helpers

This demo one is more aimed at someone who is less familiar with the entire setup, but is possibly a little bit familiar with Bootstrap, so is more of a demonstration than anything else. You can use it and get on with site design, but I was thinking that most people probably wouldn't want to ... may be that is just me!

Yep, I can change the Content Management bits to tools.

I tend to call it Content Management in my own setups basically because I have things like Blocks, News Ariticles and everything else that is not directly being displayed in the main menu. So it is not just tools in my case. But I agree, possibly confusing in this context.

I forgot about the edit link!

I will look at the indentation.

[ryan]

Yep, I can change the Content Management bits to tools.

You don't need to change it of course, but I just was confused by the label so wanted to mention it. 

I was getting the profiles mixed up. I thought the one you posted was an upgrade to the last, but now I see it's something different. Might be good to see this one on modules.processwire.com too, because I think your new one is more in line with what people look for in site profiles. Though both are obviously useful for different reasons. 

[Joss]

Oh, I love keeping you on your toes!

Yeah, I think with these Framework Profiles, there should always be two - one which is basically just the framework ready to go with maybe some helper functions to be used as snippets, and a second (based on the first) which actually gives a starting point.

I am putting an identical one together based on Foundation 4, by the way, though I am not going to attempt a Foundation admin!!!

[k07n]

Hi!

"Caret" added to 1st level menu if it has a submenu.

https://github.com/jsanglier/Bootwire-Starter-Profile/pull/1

Hope this will be usefull to someone.

[cstevensjr]

Good Day,

I wanted to express my greatest appreciation for the fine work you put into creating the Bootwire basic framework and demo profiles.  I've tried both and they installed without any problem.

I myself also come from the Joomla world to ProcessWire and had been extremely happy to have found my way here.  My only problem had been understanding the relationship between ProcessWire and markup.  In the Joomla world, working with markup is totally different.  I was struggling to make the connection and it didn't help that there are only a few profiles to look at.  It was your helpful explanations regarding how Twitter Bootstrap integrated with ProcessWire that cleared up my confusion regarding this.  I was able to look at both profiles and now the lights are finally coming on inside my mind. 

I am enjoying using ProcessWire once again.  Thank You.

Best Regards,

Charles

[Joss]

Yes, I have used Joomla for years and am abandoning it.

My first sites were made with the Geocities site builder (1998 ish?), then hand coding, and eventually Dreamweaver.

What disappointed me most about moving to things like Joomla and Wordpress was the loss of the design control I had with Dreamweaver, but I wanted the overall site management I got with the CMS.

The joy of ProcessWire for me is that I can move back to to that Dreamweaver/raw coding design control (which is so much faster) while still retaining the power of a CMS. I dont have to design while worrying whether I can actually make this work in Joomla.

Once you think of it in that direction, once you realise that PW is not restricting your basic layouts, then it all becomes much, much easier!

[Luis]

The cow is not a relative.

okay

Nice work Joss, looks a bit like vanilla wordpress installation. Which might be good for users living in this world. 

[asosking]

Hi Joss and all supporters, THANK YOU for all your great work!
I use the "bootwire demo profile" to learn PW.

Can you tell me  how can I extend the gallery with a lightbox? 

Thanks andreas

[Joss]

Hi Andreas

That is really easy.

Basically, it just boils down to choosing a JQuery lightbox of some description and using their instructions.

I use colorbox since, unlike Fancybox 2, you can use it on commercial sites and Jack Moore is a really nice bloke and very helpful:

http://www.jacklmoore.com/colorbox/

Download it and add the colorbox JS file to your js directory and the css file to your css directory.

Make sure you call up the js and the css in your footer/header (after the jquery call) 

Now, to your foot (or in an external js file) add the following:

$(document).ready(function() {

jQuery('a.colorbox').colorbox({ 
  opacity:0.3 ,
  speed: 500,
  transition: "elastic",
  slideshow: false, 
  rel:'group',
  previous:"<span class='colorboxnav'><</span>",
  next:"<span class='colorboxnav'>></span>",
  close:"<span class='colorboxnav'>X</span>",
  maxHeight: "90%"
  
  })
});

There are other options you can play around with - see the colorbox site.

To create a light box on any image (including the bootstrap gallery) it is a question of just adding a couple of attributes to the <a> tag round the image in the functions file.

$out .= "<a href='{$galleryimage->url}' title='{$galleryimage->description}' class='colorbox' ref='group'>";

You can also use a bit of jquery to add this to any image that you have added via TinyMCE where you have clicked "link to larger image"

Assuming your posts are wrapped in a div called "post" then add this JQuery:

$('.post img').closest("a").addClass("colorbox ").attr('rel', 'group');

That will add the class and rel to the <a> tag round the image, but only within the .post div.  

That should do it. All lightboxes work in similar ways, so just vary the above to suit whichever lightbox you choose.

Joss

[asosking]

Thanks Joss, i will follow your instructions 

[Blaster]

Hi all,

inside includes/function.inc

bootwireCarousel()

$slides = wire("page")->images;

Changed with

$slides = wire("pages")->get("parent=/slideshow/, template=slidefeat, limit=3, sort=-date")->images;
 

 My problem is, the carousel only show image from my first child page.
I got no idea how to fix this...

Thanks for nice theme anyway.

[Hani]

I think the problem you have is that you're using ->get() instead of ->find().

Try this:

$slides = wire("pages")->find("parent=/slideshow/, template=slidefeat, limit=3, sort=-date")->images; 

Edit: A little more info since it seems like you're just getting started. Using ->get() will always return only 1 result (if any matches are found).  Using ->find() will return all the pages that match your selector.

Edit 2: Actually, I just really looked at your code a little more rather than just glancing at it. You can't really return the images from multiple pages like that.  You're going to have to loop through the matching pages and pull the images from each page independently.  For example:

$slide_pages = wire("pages")->find("parent=/slideshow/, template=slidefeat, limit=3, sort=-date");
foreach ($slide_pages as $slide_page){
   $slides = $slide_page->images;
   // do something with the slides
}

Without seeing more of your code or a little more information about the page template/structure, that's my best guess at what you're trying to do.

[Blaster]

Thanks for reply Hanni,

Yeah i am new to PW, right now still struggling to get pages slides...

you can see full code

https://github.com/jsanglier/bootwire/blob/master/templates/includes/functions.inc
 

this is my version but right now it doesnt show and no error shown.

function bootwireCarousel(){

// We will need to treat the first image separately

    $slides = wire("pages")->find("parent=/slideshow/, template=slidefeat, limit=3, sort=-date");
    
    $firstImage = $slides->first();

    $out =" ";

// The indicators
    $out .="<ol class='carousel-indicators'>";

// the carousel indicators need to start at 0
    $count = -1;

    foreach($slides as $slide) {
    $activeClass = ($slide === $firstImage ? 'active' : '');
    $count++;

      $out .="<li data-target='#myCarousel' data-slide-to='{$count}' class='{$activeClass}'></li>";
 }
    $out .="</ol>";

// Carousel Items

     $out .="<div class='carousel-inner'>";

    foreach($slides as $slide) {
    $activeClass = ($slide === $firstImage ? 'active' : '');

    $out .="<div class='{$activeClass} item'>";
    $out .="<img src='{$slide->images->url}' />";
    $out .="<div class='container'>";
    $out .="<div class='carousel-caption'><h1>{$slide->title}</h1><p class='lead'>{$slide->body}</p></div>";
    $out .="</div>"; // /container
    $out .="</div>";

     }

      $out .="</div>"; // /carousel inner

  // Carousel optional nav - you can remove these if you dont want the side arrows

      $out .="<a class='carousel-control left' href='#myCarousel' data-slide='prev'>‹</a>";
      $out .="<a class='carousel-control right' href='#myCarousel' data-slide='next'>›</a>";

    if($firstImage) {
          echo "<section id='myCarousel' class='carousel slide'>{$out}</section>";
    }
}

 

[Hani]

I really don't see anything wrong with your code.  Do you happen to have a live example that I can see what the result looks like?  (Feel free to PM me with the URL if you don't want to share it publicly.)

[Blaster]

Thanks for the reply hani,

unfortunately the site is still on my pc localhost.

Will let all know when the code work out.

[Blaster]

Fortunately...  After reading and searching article on this site. This is working code.

function bootwireCarousel(){

// We will need to treat the first image separately

    $slides = wire("pages")->get("/slideshow/")->children('template=slidefeat, limit=3,sort=-date, include=hidden');
    
    $firstImage = wire("pages")->get("/slideshow/")->child;

    $out =" ";

// The indicators
    $out .="<ol class='carousel-indicators'>";

// the carousel indicators need to start at 0
    $count = -1;

    foreach($slides as $slide) {
    $activeClass = ($slide === $firstImage ? 'active' : '');
    $count++;

      $out .="<li data-target='#myCarousel' data-slide-to='{$count}' class='{$activeClass}'></li>";
 }
    $out .="</ol>";

// Carousel Items

     $out .="<div class='carousel-inner'>";

    foreach($slides as $slide) {
	
    $activeClass = ($slide === $firstImage ? 'active' : '');

    $out .="<div class='{$activeClass} item'>";
    $out .="<img src='{$slide->images->url}{$slide->images}' />";
    $out .="<div class='container'>";
    $out .="<div class='carousel-caption'><h1>{$slide->title}</h1><p class='lead'>{$slide->body}</p></div>";
    $out .="</div>"; // /container
    $out .="</div>";

     }

      $out .="</div>"; // /carousel inner

  // Carousel optional nav - you can remove these if you dont want the side arrows

      $out .="<a class='carousel-control left' href='#myCarousel' data-slide='prev'>‹</a>";
      $out .="<a class='carousel-control right' href='#myCarousel' data-slide='next'>›</a>";

    if($firstImage) {
          echo "<section id='myCarousel' class='carousel slide'>{$out}</section>";
    }
}

Thanks for you all...