Module: Blog

[Craig]

Any plans to pull in a users Gravatar based on their email address? Just like these forums do?

I built some very basic Gravatar functionality into a bigger (site-specific) module recently - please feel to use it: Gravatar.module gist on Github

[kongondo]

Actually FieldtypeComments already has built in support for Gravatar. Never tried it though and don't know how to use it. I have looked at the code but can't figure this out. I also don't have a Gravatar account so can't test anyway. Anybody knows how to use this and willing to help us out with this? Hopefully Ryan will also see this. Thanks.

[dazzyweb]

@kongondo Thanks for the module. Great work.

Having a look I noticed there is no featured image option for the posts.

It is quite common to add a featured photo at the top of a post and to have it on the side or top of each post listed on the blogs home page.

Is that something you are looking to add or is there a way to add it to renderPosts()?

[kongondo]

@Dazzyweb,

Thanks for reminding me about this. Actually the feature had previously been requested by Adrian but I never got round to it . I was not sure how best to implement it but taking up your renderPosts() suggestion and coupled with Adrian's ideas, I have now come up with a workable solution. I will post an updated Blog version in its GitHub dev branch in the next couple of hours for testing, suggestions, etc.

[kongondo]

Upcoming update: Blog version 2.1.0. (dev)

Summary of Changes: Added 'Small' Posts Featured Image setting

EDIT: Note that the implementation of this feature has slightly changed. See this update:

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

As requested, Blog version 2.1.0 now includes a 'featured image' setting that can optionally be used when displaying a summary of posts (i.e. small/summarised/truncated posts). I haved added this to the dev branch for testing and comments, thanks.

It is implemented by including a third argument/parameter to renderPosts(),i.e.

renderPosts($posts, $small = false, Array $featuredImage = null)

Only if $small = true and $featuredImage is also specified, does the setting kick in. $featuredImage must be an array of options to apply to the featured image as described below:

• First, renderPosts() will look for the first image with the default or specified tag (see below) in the post's blog_images field
• If no image found, it will then look for the first image embedded in blog_body (i.e. the body of the post). Here it uses PHP's DOMDocument class.
• if we find an image, we output it in ,<div class=post-body> just before the truncated post text (see screens below). The image is given the class <img class='post-small-featured-image'>
• If no image found, nothing is output and we move to the next post...etc...

The above means that you can mix and match where your featured image will come from...

The default image options are:

//default featured image options
$defaultOptions = array(
			'width' => '',//no width manipulation if this blank
			'height' => '',//no height manipulation if this blank. Note, if size is true and both width and height > 0, use size() instead
			'alt' => 'description',//defaults to $image->description. Otherwise other stated field on the page, e.g. = 'title'
			'tag' => $this->_('featured'),//string: image tag to look for in blog_images			
			//size: image will be resized to exact dimensions -> $img = $image->size($x, $y)
			//where $x = 'width' and $y = 'height'
			'size' => false,//if 'size' = true AND both width and height > 0, this kicks in
);

Above are self-explanatory but let me clarify a few things regarding the order of implementation.

You don't have to specify any/all options if you are happy with the defaults, so you can do...

//render a limited number of summarised posts + show featured image
$featured = array('tag'=>'thumb', 'width'=>350, 'alt'=>'title');

$content = $blog->renderPosts("limit=5", true, $featured);
echo $content;

For featured blog_images

In descending order, the order of image dimension manipulations for a featured image coming from blog_images as set in your $featuredImage options will be processed as follows (note: only one manipulation takes place! i.e., if, elseif, else...)

(see what these mean in the Images docs)

• size = true AND width > 0 AND height > 0: $thumb = $image->size($x, $y);//where $x=stated width and $y=stated height
• width > 0: $thumb = $image->width($x);//where $x=stated width
• height > 0: $thumb = $image->height($y);//where $y=stated height
• No height AND no width stated: $thumb = $image;/i.e. original image output at original dimensions

Also:

• alt: defaults to '$image->description'. If anything else is specified, then alt = $page->field where field is the given value in alt. e.g. if 'alt'=>'title', alt=$post->title
• tag: defaults to 'featured' but will take any string you specify in 'tag'=>'mytag'.

 

For embedded images

• These are not subject to ProcessWire image methods. So there are no width, height manipulations
• If height and/or width > 0 is specified in $featuredImage options, these will be output in the img tag.

 

In both cases, of course, you can still use CSS to control image dimensions and position.

 

Some examples

 

If you pass the following options to $featured in renderPosts("limit=5", true, $featured);

 

/*will get first blog_images with tag='thumb'. Image width will be resized to 350, height proportionately calculated and post->title will be alt (i.e., post page's title). No size() applied since not specified so also height ignored. So no need to specify it here!*/
$featured = array('tag'=>'thumb', 'height' => 300, 'width'=>350, 'alt'=>'title');

/*same as above except image height resized to 300 and width auto calculated*/
$featured = array('tag'=>'thumb', 'height' => 300, 'alt'=>'title');

/*$image->size($x, $y) applied*/
$featured = array('tag'=>'thumb', size=>true, 'height' => 300, 'width'=>350, 'alt'=>'title');

/*no manipulations; original image output since no height and width specified with size. alt=$post->caption. So no need to specify size here!*/
$featured = array('tag'=>'thumb', size=>true, 'alt'=>'caption');

/*output first embedded image giving it height and width dimensions - In this case will only work if blog_images does not contain an image tagged 'featured'*/
$featured = array('height' => 300, 'width'=>350, 'alt'=>'title');

/*output first embedded image. In this case, doesn't matter if you tagged your blog_images or not*/
$featured = array('tag' => '');

Note:

If you will be using blog_images to hold your featured image, you will have to enable use 'tags' in the field's settings (Detail's tab). I have decided not to enable this setting by default when Blog is installed since 'featured image' is an optional thing.

This will not work with images embedded using Hanna Code since such will be output when page is rendered. To make things as light as possible, DOMDocument above looks in the blog_body html string retrieved from the database. If anybody has other thoughts please let me know, thanks.

 

 

I will update Blog docs when this is committed to master.

 

Thanks for testing.

 

Screens (with custom CSS styles applied to img.post-small-featured-image)

 

Float left

 

Float right

 

Top, no float

Edited October 28, 2014 by kongondo

[Peter Knight]

Thanks Kongondo. Blog module is just getting better and better.

BTW I've had the issue in the past where I've needed a "featured image" with each post.
Using your older Blog Module, I've just told editors that the first image in the images field will be the featured one and it's worked perfectly.

They know they can reorder images as required so have very few probs that way.

[dazzyweb]

I just tested it and it works fine thanks.

I wanted the featured image above the headline so I am just wondering what the best way is to customise the output / markup a little more.

For example I would like the featured image to be above post-headline and maybe the post-byline below the post-body.

I know I could go in and change the renderPosts() method but would prefer not to change the plugin to do this.

[kongondo]

Featured image above post-headline

I'll mull over this one but can probably add a position=>above//below in $featuredImage options. Just to be sure, you mean something like this or this or this yes?

post-byline below the post-body

This one I am not sure about whether I want to change the current behaviour..

[dazzyweb]

@kongondo Yes something like those examples

[Chris White]

Just a heads up. 

I installed the blog module and it looks and worked great.

ONE HUGE ISSUE HOWEVER...

- as this module adds a few fields to the users interface screen (display name, bio etc) when I fill in an actual display name and save it and then log out and try and log back in the admin area I'm unable to. Unable to reset password by any means.

No clue why this would happen but I've tested it twice. I'm running version 2.5.2

Luckily I had recent backups of my dbase to recover or else this would have left me high and dry.

Has anyone else seen this issue as its a big one in my eyes

[Peter Knight]

Shouldn't layout be left to devs template preferences? I like my modules not to assume any layout prefs.

Also, any plans to email admins for new comments?

[adrian]

Chris,

This is a total stab in the dark here, but any chance you also had either the AutoName or PageRenameOptions module installed?

There was a bug in both that allowed for system template names to be changed - would only happen to the user template if the title field was added (it's not there by default, but it is added with this module).

The bug has been fixed on both modules as of today, so if that was the issue, make sure you update those modules and everything should be fine.

The good thing to know is that it would have just been a matter of opening up PHPMyAdmin to see the name of the user in the database - log in with that and you'd have been fine.

So very sorry if it was one of those modules that caused the problem, but glad you managed to restore things ok.

If not, I'll defer to kongondo.

[kongondo]

Just a heads up. 

I installed the blog module and it looks and worked great.

ONE HUGE ISSUE HOWEVER...

- as this module adds a few fields to the users interface screen (display name, bio etc) when I fill in an actual display name and save it and then log out and try and log back in the admin area I'm unable to. Unable to reset password by any means.

No clue why this would happen but I've tested it twice. I'm running version 2.5.2

Luckily I had recent backups of my dbase to recover or else this would have left me high and dry.

Has anyone else seen this issue as its a big one in my eyes

@Chris,

Sorry about your troubles. This is very strange. It has not been reported before nor have I experienced it. Blog does not touch your PW 'user' credentials at all. Please clarify a few things:

1. Can you confirm what version of Blog you are running?
2. It may sound silly, but confirm when you are trying to log back in, are you using your username or Blog's display name?
3. Do you get any error messages when you try to log back in? What are those messages?
4. Are you logging back in as an Admin?

[kongondo]

Shouldn't layout be left to devs template preferences? I like my modules not to assume any layout prefs.

Also, any plans to email admins for new comments?

1. Yes ; isn't that what this module is already doing? 
2. No  ......Here's why...    {also see the G thing...}

[kongondo]

Upcoming Update: Blog version 2.1.1 (dev)

Update as per request to allow user to control position of featured image  - either above post-headline or below post-body. Default is, if present, output featured image below post-body.

To output a featured image above the post-headline, include the 'key'=>'value' pair 'position'=>'above' in the $featuredImage options array, .e.g.

$featured = array('tag'=>'thumb', 'width'=>550, 'position'=>'above');
echo $blog->renderPosts("limit=5", true, $featured); 

For new readers, also refer to the original Blog 2.1.0 post above. Feature available in the dev branch for testing, thanks.

Screenshot

[kongondo]

OK, I have had a rethink in respect of the second request here (post-by line below post body) and the first issue here... . Similar to renderComments() where you can customise comments' visibility status texts, I am working on making the currently hard-coded 'posted by', 'posts 1 to 1 of 20', 'view more', etc (including their visibility and position where applicable) customisable.

The 3rd argument of renderPosts() will now be Array $options and will cater for various aspects of the rendered post. If you have any requests please post them here and I will consider them, thanks.

[remove]

@kongondo

I have installed 2.0.2 and am working on the frontpage of my site. The two latest news items are shown like this.

<div class="block-group">
	<div class="block width100">
		<?php
			$blog = $modules->get("MarkupBlog");
			echo $blog->renderPosts("limit=2", true);
		?>
	</div>
</div> 

 Is it possible to print them next to each other. Perhaps call items twice? Call 1st item, then skip 1st and call 2nd item

<div class="block-group">
	<div class="block width50">
		<?php
			$blog = $modules->get("MarkupBlog");
			echo $blog->renderPosts("limit=1", true);
		?>
	</div>
	<div class="block width50">
		<?php
			$blog = $modules->get("MarkupBlog");
			echo $blog->renderPosts("limit=1", true);
		?>
	</div>
</div>

[kongondo]

@toothpaste,
 
Yes, it is technically possible to call items twice but wholly unnecessary . Btw, if you did that, there is no need to call $modules->get('MarkupBlog') twice. Calling it once is enough on the same template file. Anyway, back to the issue. You can easily achieve what you asked - having two posts (or 3 or 10 or whatever) side by side by just using CSS. All blog posts are wrapped in divs as follows:

 <div class="posts">
    <div class="post">Post number 1</div>
    <div class="post">Post number 2</div>
    <div class="post">Post number 3</div><!-- etc, etc. -->
</div><!-- end parent div.posts--> 

  
What you want to do is to target the div.post with CSS to make them float side by side. Now, directly targeting div.post in your CSS may obviously affect other instances of div.post elsewhere (e.g. in blog-post). So, what you want to do is probably to wrap div.posts in your custom div like so:

<div id="wrapper">
  <div class="posts">
    <div class="post">Post number 1</div>
    <div class="post">Post number 2</div>
  </div><!-- end parent div.posts-->
</div><!-- end parent div#wrapper-->

You can then easily target each div.post with your CSS.

[dazzyweb]

@kongondo Thanks for all your work on the blog module and responsiveness to any requests.

It would be great to be able to customise and control the output of the posts a bit more since there are many possibilities of how a post could be displayed or certain elements of a post displayed somewhere else on the page.

For example I might want to put the post headline at the top of the page on a featured banner photo then have the actual post shown lower down in the main body of the page. At the moment this doesn't seem possible.(this was one option I was thinking about for a blog I am making now)

Another thing I have been thinking about is how I would be able to add for example social media like buttons to each post when several posts are listed on a page or how I could put like buttons somewhere on a post other than at the very top or bottom of a single post shown.

[kongondo]

@dazzyweb,

I don't follow: 

For example I might want to put the post headline at the top of the page on a featured banner photo then have the actual post shown lower down in the main body of the page. At the moment this doesn't seem possible.(this was one option I was thinking about for a blog I am making now)

Are you talking about a full post as output e.g. in blog-post.php or are you talking about summary of posts, e.g. on blog-posts.php? If the latter, I have already implemented that as per your request yesterday. What is a featured banner photo in this case? Where is it coming from? Can you show me some examples/illustrations please?

Another thing I have been thinking about is how I would be able to add for example social media like buttons to each post when several posts are listed on a page or how I could put like buttons somewhere on a post other than at the very top or bottom of a single post shown.

Without jQuery or similar you can't at the moment. Again, are you talking truncated ($small) posts or full posts or full listed posts (e.g. on blog.php)? I'd like to see some illustrations/examples though...

[dazzyweb]

Are you talking about a full post as output e.g. in blog-post.php or are you talking about summary of posts, e.g. on blog-posts.php? If the latter, I have already implemented that as per your request yesterday. What is a featured banner photo in this case? Where is it coming from? Can you show me some examples/illustrations please?

I mean as in blog-post.php whereby the post headline for the post can be extracted and inserted into a main photo  but removed from the rest of the post something like these examples shown here. https://www.heartinternet.uk/blog/article/were-sponsoring-confconf-2015 or here http://wplift.com/best-free-wordpress-themes-oct-2014 This can also be seen to work on small posts like here: http://wplift.com/

Without jQuery or similar you can't at the moment. Again, are you talking truncated ($small) posts or full posts or full listed posts (e.g. on blog.php)? I'd like to see some illustrations/examples though...

I was talking about both in a way. With small posts something like this: https://www.heartinternet.uk/blog and full listed posts something like this http://wplift.com/best-free-wordpress-themes-oct-2014

[kongondo]

The problem with a module like this is that it is unlike WP with its many themes which have different layouts ..

For #1: I think you can easily pull that off with CSS. What I will need to add however, is the option to also output a featured image for a full single post [blog-post.php] (currently I have implemented this for $small posts only). Same as the current implementation, one will have the choice for that to be output either above the post-headline or below the post-body. In your case you'd probably go for 'above' post-headline and using CSS you can place your headline on top of the featured image. I'll try show you example CSS on how to do it...

For #2: I will need to think about how those can be implemented (forum any/all ideas welcome, thanks!). I think it is an important feature. This will probably have to be implemented on the GUI side. It will have to be configurable, i.e. what social media sites to show, their icons, etc...This feature may have to wait for a while though...I want to get it right...

Thanks for the ideas.

[dazzyweb]

I am not sure if this is possible and maybe a bit of work to implement but I imagine a 2 textareas where the markup can be customised for the post or posts.
One for full posts (blog-post.php) and one for truncated posts ($small).

In each of these textareas html and short codes or variables could be entered which represent different parts of the post such as [featured] and [post-headline] etc...

Then this is output with renderPosts()
 

[Chris White]

kongondo, to answer some of your questions in regards to the blog changing username...

1. Can you confirm what version of Blog you are running? - ANSWER: 2.0.2
2. It may sound silly, but confirm when you are trying to log back in, are you using your username or Blog's display name? ANSWER - YES USING PROPER USERNAME NOT BLOG DISPLLAY NAMES
3. Do you get any error messages when you try to log back in? What are those messages? ANSWER - NO ERRORS
4. Are you logging back in as an Admin? ANSWER - YES

Here's what I found doing more research...

 

When I go and edit a user after installing the blog the Display Name is now required field which is fine. When you add a name ie. John Doe it actually changes the actual name field (the actual username field).

 

So as an example I had a user whos username was 'test555' I changed their Display Name (required by the blog) to be Jane Doe and low and behold it changes the actual Name (username) to jane-doe so it's actually renaming the username.

 

I saw a mention of this item: AutoName or PageRenameOptions module installed which they are so I'll try updating those and report back to see if that fixed anything

 

 

 

 

[Chris White]

happy to report that by upgrading to latest Page Rename Options that this bug has been fixed for me. It was a bit scary when actual usernames were being modified when you added/edited your display name and I couldn't gain access but this update to version 0.1.4 seems to fix it. This would have been a serious issues for my clients to say the least.

Thanks for that insight Adrian, appreciate it!!