Blog Profile

[ryan]

Thanks Pete, good to know about the difference there. That definitely explains why Cufon goes soft on the retina screen (iPhone at least). I will make a point to avoid Cufon.

[jacmaes]

One small correction: Cufón does not generate PNG images. It generates canvas text.

This is the code Cufón outputs for

<h1>Find a degree in Spain</h1>

<h1><cufon class="cufon cufon-canvas" alt="Find " style="width: 47px; height: 19px; "><canvas width="60" height="20" style="width: 60px; height: 20px; top: 0px; left: -1px; "></canvas><cufontext>Find </cufontext></cufon><cufon class="cufon cufon-canvas" alt="a " style="width: 18px; height: 19px; "><canvas width="31" height="20" style="width: 31px; height: 20px; top: 0px; left: -1px; "></canvas><cufontext>a </cufontext></cufon><cufon class="cufon cufon-canvas" alt="degree " style="width: 74px; height: 19px; "><canvas width="87" height="20" style="width: 87px; height: 20px; top: 0px; left: -1px; "></canvas><cufontext>degree </cufontext></cufon><cufon class="cufon cufon-canvas" alt="in " style="width: 24px; height: 19px; "><canvas width="37" height="20" style="width: 37px; height: 20px; top: 0px; left: -1px; "></canvas><cufontext>in </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Spain" style="width: 53px; height: 19px; "><canvas width="58" height="20" style="width: 58px; height: 20px; top: 0px; left: -1px; "></canvas><cufontext>Spain</cufontext></cufon></h1>

For use of ease, I suggest using Google Web fonts which are super easy to implement: http://www.google.com/webfonts/

[Soma]

One small correction: Cufon Canvas,VML depending on the browser from which it generates a base64 encoded png image for each word. In Firefox right click will show it's an image. Enter code in address bar and you'll see the image:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAYCAYAAAB3JpoiAAAC8UlEQVRoge3YTYhWVRwG8J/mR5rCjJMiuREH+xBxmMEQwTAxKwulMDPUhW2EsI9dujIQVAx3GlIILcJFC1uFRbsChZyFCxPFolBqUyqlZCmlLv5n6PrOez/ed+Z1kO4D/8U55znP/Z/nnns+LjVq1KhRo0aNEaELy7ESsyvwp+NJPI1FmNzQvhCLSzQWoS9TfhhL0FPQZ1biPJRyXlIxpmf0y3gdxWR8gBu4neIW3svhr8DnuJnh38Z1HMnwBvF7ybO/w7lMeUvS2lTQ543EWYwXGnIoimUZ/by4jjklOY8Yh/BnGkgv5uE1bGzgjcPBlNgF7MIzGMCL2I2jGf69MHwmVjfEJVxsUt8tzGysX429STNvko0aJuBvHKjAfV8kdRhTK/DvheHN8AvOVshvCA/gNH7Cgy30awuTxPLxSQlvIPE+EzO9Cu4Xw99Mei+10GdE+Ar/YEMBZ2gp6W1B934wvAdX8GVF/qhgDk6IQXyBZw2fxd/i+xZ1B8Xe8HJBXDS2hh8Sm/9jFfmjhvF4BSfFYE6hP9N+Dsdb1BxU7fQwVob3iS97XwVuR7EO18RyMCvVHccPLeoM4irmFsR5Y2f414k7rQK349goBvV2Ku9P5Udb0GhnDd+cnrOloM9bidOf017F8A1Jo/HoO2boEQntT+XHxed3TByjqqAdw59Kzy36zIc28Edy2ssMnyr2jm9KcusI5hl+JYdVYlBbM3XvprpPMaOCdjuGT8Sv4vLS7MbXiz9wpkCzzPBdYvL0FXA6hrXibe8Rm+Ya7BRHpTOY0sDfKZK9JGbaenHVXydumh9luO0Yzn/Lys94B0vFtXw7fsO/4naYhyLD5+IvcdHZlhMDJTmPCN34MCUxdGq4Ko5LXTl9+vExLrv7tHEer2d47RoOr+JHw080ZxWbTbHhR5poNsaOEv1RwQQ8ITbFiS30mymWpWZ/2LrF37kidMtfnsZhAZ7Hc5hfMaeeAs0ukXNRVPltUaNGjRo1/ie4A4uSB/OfVG5sAAAAAElFTkSuQmCC

When you scale a website with cufon for text, you'll see the pixels.

[Pete]

One small correction: Cufon Canvas,VML depending on the browser from which it generates a base64 encoded png image for each word. In Firefox right click will show it's an image.

That's where I was getting PNG from jacmaes, although it's not obvious unless you know where to look. You can also save the resulting image as a PNG if you wanted to.

I remember back in the good old days where I auto-generated PNG article titles using PHP and custom fonts before any other options were available - those were the days

[jacmaes]

Soma, Pete, I stand corrected

In any case, it's clear that Cufón is not a good option anymore now that @font-face support is broad enough. Apart from the inability to select text, enlarge it without pixelating, Cufón is slow to render and routinely suffers from FOUT (Flash of Unstyled Content) without resorting to hacks.

[celfred]

Hello to all,

I keep testing ProcessWire on my 'amateur' side (compared to what you all do) and I'm really impressed by the work.

And this blog profile sounds excellent to me. I can't wait to see the distribution version!

I was trying to build a personal site from scratches, but I do have to admit that it is difficult for non-professional programmers to think of everything and profiles like this one is a great help for us (at least, for me...). So thanks in advance !

My post doesn't help for anything... but I just wanted to let you know that I am interested and... happy to use PW ;-)

[ryan]

Here is the first release version of the Blog Profile! http://modules.proce...s/blog-profile/

It is now up on GitHub as well: https://github.com/r...ign/BlogProfile

Below is a lot more talk about this blog profile and how it works, but if you just want to install the profile and test it, it's not necessary to read anything further unless you want to.

I've simplified this a lot from where it's been. It does all the same stuff on the front-end, but the code behind the site is no longer a huge departure from the basic profile. I've rebuilt this profile 3 times trying to find the right balance between making it as flexible as possible and making it as easy to understand as possible. I think it's got a better balance now than before. It's now at a point where it does everything it always has, but the template code behind it should be a lot more accessible and easy to understand. There is no longer a separate module or API variable. Everything here just happens in /site/templates/ files.

Consistent with making it simpler, I've also removed the drag-n-drop theme support. While it was cool to have, it always felt a little dirty introducing some kind of proprietary theme support that was so different from the way I'd build any other site. This thing is pretty darn simple to theme as it is (just edit a CSS file). Maybe we'll take it further in the future, but we don't have many PW site profiles out there right now (1 or 2?) and so I decided this profile needed to stay more accessible on the back-end.

How the template files work

In ProcessWire there are any number of ways you can use your template files. In this case, we are using our template files (in /site/templates/) to populate 3 variables ($content, $headline and $subnav) and then including an HTML file (main.inc) to output them in the right places.

The $content variable represents the center (body) column, the $headline variable represents the text headline of the page, and the $subnav variable represents the navigation that appears in the left sidebar.

Once one or more of these variables is populated, the template file includes the /site/templates/main.inc file. That main.inc file is just a big HTML file that outputs the $content, $headline and $subnav variables in the right places.

We've made an attempt here to separate most of the logic used in the template files from the output. Most of the markup is generated from files in /site/templates/markup/. These files are included from the template files to output specific things like a blog post, comment, etc.

Because a lot of output needs are similar among the various template files, we've created a file called /site/templates/blog.inc that has a few shared functions in it. If you look in any of the template files, you'll see that most of them include blog.inc as the first thing. This blog.inc file also initializes our $content, $headline and $subnav variables, mentioned earlier.

Outline of /site/templates/ with this profile

/site/templates/blog.inc

Shared blog-specific functions included by most site templates.

/site/templates/main.inc

The main HTML markup file through which everything is output.

/site/templates/markup/

Contains PHP files that generate markup for specific things like posts, comments, etc. This is separated from the site templates to make it simpler for you to modify the markup if you want to. This is primarily used by the blog.inc functions, but also included by a couple templates as well.

/site/templates/skeleton/

This is the Skeleton CSS framework. It is identical to the one they distribute except we added a wider viewport to it. You probably wouldn't have much need to edit anything in here.

/site/templates/styles/

Stylesheets used by the blog profile. The most useful one in here would probably be theme.css, which contains all the color definitions for the profile.

/site/templates/scripts/

Javascript files used by the blog profile. Not much is happening in here at present.

[Pete]

Downloading now - very excited about this!

[Martijn Geerts]

Agree with Pete. Love this blog Ryan, not that I think I will need a blog soon, but the templates explain a lot of stuff I don't understand yet. This blog wil be very good reference, Thanks!

[Soma]

So cool what you have done here. I'll for sure check it out a little closer soon. This is actually nice food for the community to learn and checkout, but also a very nice blog system. And even responsive! Keep up the good work, thanks!

[Pete]

I don't know about anyone else but I'll definitely be using some of this code to improve my own sites.

[SiNNuT]

I don't know about anyone else but I'll definitely be using some of this code to improve my own sites.

Definitely! So much great stuff in there.

@Ryan, if one thinks he has found an issue do we put it in this thread or via GitHub issues?

[ryan]

@SiNNuT either here or GitHub is fine. But since we're here, might as well just submit it here. I did commit a few updates this morning, including a fix for the /site/profile/ vs. /site/templates/ typo. I honestly have no idea where I got /site/profile/ from… I need to get more sleep.

[arjen]

I don't know about anyone else but I'll definitely be using some of this code to improve my own sites.

Definitely! So much great stuff in there.

This opens up a new door. I have to study...

[biotech]

A huge milestone for PW, thank you for releasing this to public. Agreed on comments above, very handy study material.

[biotech]

How difficult would it be to make the categories and comments nested? Has anyone expanded on this profile? From what I can see we are limited to flat categories and comments.

Thank you.

[MarcC]

This is perfect--I set it up for a colleague today and was really grateful to see Skeleton in use. We don't seem to be able to manipulate comments, though--we can find & click on a single comment (admin side) but nothing happens. Any advice?

[biotech]

MarcC have your seen the nifty comments mgr module?

[ryan]

we can find & click on a single comment (admin side) but nothing happens. Any advice?

i agree that you should install the comments manager module. But want to make sure I understand what's not working, as you should be able to edit comments from the page editor. Double check that you are running a newish version (2.2.7?) and maybe check your JS console to see if any JS errors are occurring? Let me know if you think there's a bug in there... I have tweaked a few things in the comments recently.

[digitex]

I got excited when I saw this and then even more when i read the post from Ryan that this will eventually be an installable module for an existing site because i was just gearing up to build a "blog" for someone using processwire and this would be so powerful and beautiful to use because the site in question already exists using pw, they just want a blog added.

Is there an ETA on this? I don't mind downloading the profile as is and grabbing what I need to work it into the current site if it's not just around the corner.

[ryan]

Not yet an ETA on this. I'm not sure how well this translates to an installable module on top of an existing site. It's something I'd like to do, but it might have to be something entirely different than this. Instead, I think this profile is better as a starting point for a site that needs a blog. If I had an existing site that needed a blog, I'd be more inclined to build it the regular way so that you can remain consistent with the way you are building your templates, etc. Blogs are very easy to build in ProcessWire, so the blog profile is good as a ready-to-go site, a starting point, or an example. But not as useful for something to bolt onto an existing site. However, you may find it still worthwhile to look at the way that it's setup and see if any of the ideas in there might be worth carrying over into your own.

[digitex]

That's the goal. I think I understand enough to build a basic blog-like functionality into an existing site (I've done news publishing type things and this is similar) but the blog profile you built is so much more feature rich than anything I could figure out on my own. to have that right out of the box would save me so many tears. So I will study the profile and see if I can make it work. Thanks.

[cmscritic]

Just a quick note to say that I'm going to attempt to set up my "online visibility / seo" business site (thatcriticguy.com) using this profile / processwire. I'll likely be back offering my suggestions soon. Might even slap up a review on CMS Critic while i'm at it.

[cmscritic]

I'm stuck on one thing in the blog profile (otherwise, it's been fantastic so far and I'm enjoying using it.)

I added a summary field to the blog posts but can't figure out how to make it so that the home page only shows the summary and not the complete body of my posts? I'm looking to use the summary field for excerpts for instance..

I added the field "summary" to the "post" template and everything shows up fine there and I went to modify the template for "home" assuming that I'd be able to find the answer but removing "body" doesn't seem to do anything. Can someone point me to which template I should be modifying so that it just shows the summary?

[WillyC]

/site/templates/home.php

cha.nge

$content = $page->body . renderPosts("limit={$page->quantity}");

to

$content = $page->body . renderPosts("limit={$page->quantity}", true);

see.more in /site/templates/blog.inc too