Jump to content

Module: Blog


kongondo

Recommended Posts

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.

  • Like 2
Link to comment
Share on other sites

@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()?

  • Like 1
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

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
post-894-0-79294700-1413848937_thumb.png
 
Float right
post-894-0-03144500-1413848940_thumb.png
 
Top, no float
post-894-0-87608500-1413848942_thumb.png
Edited by kongondo
  • Like 3
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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?  O0
  2. No  :P......Here's why... :-[  ;) {also see the G thing...}

post-894-0-98235300-1413929474_thumb.png

  • Like 2
Link to comment
Share on other sites

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

post-894-0-86242200-1413934637_thumb.png

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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>
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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... :-)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

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()
 

Link to comment
Share on other sites

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

 

 

 

 

Link to comment
Share on other sites

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!!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.
      https://github.com/techcnet/ProcessFileManager

      Warning
      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      Dragscroll
      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
       
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

       
    • By tcnet
      Session Viewer is a module for ProcessWire to list session files and display session data. This module is helpful to display the session data of a specific session or to kick out a logged in user by simply delete his session file. After installation the module is available in the Setup menu.

      The following conditions must be met for the module to work properly:
      Session files
      Session data must be stored in session files, which is the default way in ProcessWire. Sessions stored in the database are not supported by this module. The path to the directory where the session files are stored must be declared in the ProcessWire configuration which is by default: site/assets/sessions.
      Serialize handler
      In order to transform session data easier back to a PHP array, the session data is stored serialized. PHP offers a way to declare a custom serialize handler. This module supports only the default serialize handlers: php, php_binary and php_serialize. WDDX was dropped in PHP 7.4.0 and is therefore not supported by this module as well as any other custom serialize handler. Which serialize handler is actually used you can find out in the module configuration which is available under Modules=>Configure=>SessionViewer.

      Session data
      The session data can be displayed in two different ways. PHP's default output for arrays print_r() or by default for this module nice_r() offered on github: https://github.com/uuf6429/nice_r. There is a setting in the module configuration if someone prefers print_r(). Apart from the better handling and overview of the folded session data the output of nice_r() looks indeed nicer.

      Links
      ProcessWire module directory
      github.com
    • By Robin S
      Repeater Easy Sort
      Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.
      The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.
      Screencasts
      A Repeater field

      A Repeater Matrix field with custom header colours

      Easy-sort mode
      Each Repeater/Matrix item gets an double-arrow icon in the item header. Click this icon to enter easy-sort mode.
      While in easy-sort mode:
      The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. The item that you clicked the icon for is shown with a black background. This makes it easier to find the item you want to move in easy-sort mode. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration
      In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.
      In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.
      Exclusions
      The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.
       
      https://github.com/Toutouwai/RepeaterEasySort
      https://processwire.com/modules/repeater-easy-sort/
×
×
  • Create New...