Jump to content
siulynot

How can i integrate HTML Kickstarter with processwire?

Recommended Posts

Hi, 

First of all, is there a way to enhance the html experience in the body of the pages? It seems that it doesnt render html code as it is supposed. 

Second, HTML Kickstarter is a nice way to get html snippets, but i dont know how to implement it in PW. If anyone knows let me know :D

Share this post


Link to post
Share on other sites

I think there are several obstacles here, and none of this is intended to cause offense, so please don't take it as such:

  1. It sounds like you are a bit confused as to the page's body field and template files themselves. Are you trying to put your HTML inside the body field on a page? Your actual site template files are in the /site/templates folder - head.inc and foot.inc contain header and footer HTML for the dfefault template, and the other files in there are for the various page templates and relate to the templates in the ProcessWire admin area itself. You don't have to use the head or foot files (they're for code that's on every page) but this tutorial will definitely help you out: http://wiki.processwire.com/index.php/Small_Project_Walkthrough
  2. See above with regards to implementing elements of HTML Kickstarter into your templates - the tutorial will help you understand the layout of template files and how to output ProcessWire data in your templates.
  3. You should have some knowledge of HTML, related tags and how it works and preferably a little of PHP before continuing - PHP knowledge is less essential in theory as things like the tutorials can help you get started there.

I think in short you need to step back from what you're trying to do and follow one of the tutorials to see how things work first. Once you know that, you'll see the endless possibilities, but I think you need to get a clearer picture of how it all fits together first.

Sorry, didn't mean to mention tutorials so much there - they aren't always the easiest to find as the following page doesn't show up in search results (oddly), but here's another page with some useful links: http://processwire.com/tutorials/

Hope that helps :)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks a lot! Im new here and eventhough i have a simple knowledge of html and php i still need to figure out how it is implemented in PW. I hope i dont annoy people in the forum, but im sure other people that come to PW will have similar doubts :D

  • Like 1

Share this post


Link to post
Share on other sites

To start, get a fresh copy of ProcessWire and install it (with the included basic profile). Then get a fresh copy of HTML Kickstart and unzip it. You'll want to take these dirs/files from HTML Kickstart (below), and move them to the root of your ProcessWire installation (where ProcessWire's /index.php file is located): 

  • /css/
  • /js/
  • /style.css

I've taken the example.html that comes with KickStart and converted it into starter ProcessWire templates for you:

html-kickstart-processwire.zip

Unzip the attached file to replace the files in your ProcessWire's /site/templates/ directory. This includes these files:

  • head.inc
  • foot.inc
  • basic-page.php
  • home.php

Now view your site. You should see HTML Kickstart's example.html file powering your ProcessWire site. Navigation should be using HTML Kickstart's horizontal menu and both bodycopy and sidebar should populate. I've left several static elements from the HTML Kickstart example.html as well, so you've got more to experiment with here. 

Let me know how it goes and if it makes sense. 

This thread is also related. 

  • Like 12

Share this post


Link to post
Share on other sites

I wish that I had seen this earlier to respond. Awesome explanation and example Ryan! @siulynot - thanks for using HTML KickStart. Hope it saves you some time. 

  • Like 2

Share this post


Link to post
Share on other sites

Joshua, I'd actually like to do a full HTML Kickstart profile for ProcessWire, if that'd be alright with you. Maybe we could collaborate on it sometime?

  • Like 5

Share this post


Link to post
Share on other sites

Thanks for the instructions! They are very complete! I hope you get to fit the HTML Kickstarter theme on PW, it would be nice! 

i got to play around with the code you gave me and it was great, eventhough i could not achieve what i wanted. Doesnt matter, im a newbe here though and im experimenting with the possibilities here in PW. 

i got to create this blog:http://ktspr.com/blog/ , its basically the default blog profile. But i love the feeling it has, i dont know if it makes sense. Here is where i wanted to add a featured articles tab or slideshow in the homepage... could not achieve this for now... :/

The other project i have is a small food delivery service which im working on the dummy. Here i would like to have orders taken from the website so that they can be delivered, here is the demo: http://ktspr.com/elsistemad/ 

here i will be asking for some tips on how to best organize and make possible a checkout and things like that...

thanks for the tips!!!! 

Share this post


Link to post
Share on other sites
Joshua, I'd actually like to do a full HTML Kickstart profile for ProcessWire, if that'd be alright with you. Maybe we could collaborate on it sometime?

Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website. :P 

@siulynot - Keep up the good work! I am excited to see your projects evolve. 

  • Like 1

Share this post


Link to post
Share on other sites

Joshuag

You might want to look at what I have done (er, am doing) with a bootstrap profile

http://processwire.com/talk/topic/2411-bootwire-basic-twitter-bootstrap-profile/

Basically I am creating two - one that has bootstrap installed and then demonstration pages showing how some of the bootstrap elements work in this environment (which is actually straight out of the box, but it is nice to show it anyway)

Then the second is the same things with just about everything removed - almost no fields, only a couple of template files, no content, just ready to go and put together so that more up-to-date bootstrap versions can be just dropped in place. The only extras in there is the standard Bootstrap menu system wired into PW and basic demo carousel and accordion files to save people having to mess around with these.

So, that is the profile that is really useful to people - the first is just a reference.

Joss

  • Like 3

Share this post


Link to post
Share on other sites
Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website.

I was originally thinking it would be something fairly simple where you could just swap out the files from the default profile with new files, and have it ready to go. And that would be plenty useful. But it would probably be better to go further and try to account for most of the elements. At least, I think this would be more useful to people that want to literally use it to build a site from. So it would be nice to have more than what's currently with the default profile... like a template that uses the slideshow (or ability for any template to use it), a contact form, ability to use the various list styles and menus/button bars, tables, captions with images, icons, etc. (we'll need Soma's expertise with configuring TinyMCE for some of this). All the while keeping the layout and look simple and generic enough that someone could also easily build from it as a base.

How about you handle the front end and I'll handle the back end? Let me know if that's of interest, or if you have other ideas? Perhaps some of this overlaps with your plans for HTML KickStart too? If we were to collaborate on this, it seems like it would be not just another profile but more likely one to replace the default profile included with ProcessWire (which is in need of replacement). Though I do think it's important that the next default profile be a little more mobile-friendly than the current one is. Anything that takes the default profile further also means we should include a second "blank" profile with PW (which we don't currently do, but I think we should).

I was also excited to hear about your plans for HTML KickStart. Thanks for the shoutout too. :)

  • Like 5

Share this post


Link to post
Share on other sites

If I get time next week, I will have a dig through it and see if I can get some starting point somewhere, A little like I am doing with Bootstrap and my Bootwire stuff.

Kickwire?

Share this post


Link to post
Share on other sites

Okay, just knocking together the very beginnings of the Kickwire profile.

It will be very rough round the edges!

At the moment, I have bashed around the menu Soma did for me for Bootstrap, so that works (but will need cleaning up a bit more), and I have a gallery function working.

erm,,,

About it so far

Joss

  • Like 4

Share this post


Link to post
Share on other sites

Wow, that would be really awesome Joss, +1 for the Kickwire profile, can't wait to have it and try it ;)

Share this post


Link to post
Share on other sites

Well, its part done, but Joshua is currently working through some major updates with Kickstart, so I am waiting to see what he comes up with.

I have currently done a sort of proof of concept, but I have changed a couple of his JQuery utilities - changing fancybox1 for colorbox and bxslider for flexslider and his tabs script - so that it is compatible with JQuery 1.9.1 - But I think he is trying to address some of those issues anyway, so I dont want to get too far ahead of him.

The approach I am taking with this (and I am redoing my bootstrap in the same way) is a function file with some of the main components demo'd using basic fields.

That means to get them working you can just do <?php loadKickwireTabs(); ?> in your template file and you will have tabs, assuming you have done your fields the same way.

Most people will then edit it like crazy to put their own fields into play, but at least they have the basic markup done rather than have to start from scratch.

Obviously, that is only for a few things like carousel, the rest will be up to the user!

Joss

Share this post


Link to post
Share on other sites

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now. :)

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

  • Like 2

Share this post


Link to post
Share on other sites

Great work Joshua,

I would love to see it using Flexslider instead of BXSlider, as Joss commented above, Is there any reason for not using it?

Thanks

Share this post


Link to post
Share on other sites

On my testbed version I have got flexslider working in three modes - slide show, carousel strip on its own, gallery with fade-slideshow and carousel synced together. Just with different css classes.

Works quite sweetly.

Share this post


Link to post
Share on other sites

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now. :)

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

Your copyright notice at the bottom is a bit far into the future ;)

Share this post


Link to post
Share on other sites

Has anyone used Ryan's converted example.html (http://processwire.com/talk/topic/2731-how-can-i-integrate-html-kickstarter-with-processwire/?p=26612)? I thought I'd give kickstart a go for a new project, but none of the new responsive goodness works properly.

I'll have a play and sort it out, but thought if someone else might have already sorted this out :)

Share this post


Link to post
Share on other sites

The best way is to just go and get Kickstart from the kickstart website

http://www.99lime.com/elements/

Then just add it to your templates folder as if you were doing a normal static site.

I think he has now updated it to run with JQuery 1.9.1 - though I am not too sure.

I was messing around with it and I changed a couple of things for myself - I replaced bxslider with flexslider and use Jack Moore's colorbox and a couple of other things. But I need to spend some time to see what Joshua has been up to really.

It is on my growing todo list!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By DooM
      Hey guys,
      I'm using Form builder module by Ryan and I'm trying to render HTML success message after form is sent using value from this field:

      but it renders exactly as it is written in the field, not as HTML. To render it I just use echo
      <?= $successMessage ?> What am I missing?
       
      Thanks for any help. 🧒
    • By Marcel
      Hey, 
      - we made a page as admins
      - as admins each  <img> tag is loaded and images are displayed
      - we tested the page as a pre-definded test user which is "guest" (Admin Theme: Reno)
      - as test user each <img> is missing and so no image is displayed
      I checked this in dev-mode on firefox and chrome. Does anyone have an idea or has had similar issues?
       
      Thank you in advance.
       
      Marcel
    • By Lemoratoire
      Hi guys, 
      For a school work, I need to be able to write my own HTML code in the editor, but when it comes to "complexe" code such as a .DIV or a SRC, the "source" page doesn't recognize it. 
      So my question is the following: Is there a possiblity for me to enable the fact that I could work on a page by using my own html, without touching the .php doc?
    • By snobjorn
      I'd like to see HTML5 attributes for hyperlinks, such as download, media and ping, when editing links in ProcessWire (with CKEditor) . Download is the one I'm using myself, but I'm mentioning the other ones as well. More information at New HTML5 Attributes for Hyperlinks: download, media, and ping.
×
×
  • Create New...