Blog Module Post Thumbnails

[Matt_P]

Hi everyone,

I am having difficulties using the blog module and was wondering whether someone could enlighten me. 

I have got a grid which has all my posts on (which I will refer to as post menu, for lack of a better description) and I would like to attach and image to each (like a thumbnail) with the post title as an overlay. Where the blue rectangle is on the attached image.

I have attached and image to each post and I'm trying to call them. However I have since realised from receiving a blank result that I need to call them from another page (from the post to the post menu). 

You'll have to excuse my lack of knowledge for PHP and the PW calls, but I have found it really difficult to understand how this module is set up. I also apologise if I've posted this in the wrong category.

Does anyone what I need to produce this?

I have tried some of the below but doesn't bring back what I am after.

Thanks, 

Matt

<!-- Attempt 1 -->
<?php
echo "
<script>
    $(document).ready(function(){
            $(\".post-headline\").css(\"background-image\", 
            \"url('"; echo $image; echo "')\");
    });
</script>";
?>

<!-- Attempt 2 -->
<style>
.post-headline {
    background: url("<?php foreach($page->blog_images as $image){ echo "{$image->url}"; } ?>");
}
</style>

<!-- Attempt 3 -->
<div style='background-image: url( <?php foreach($page->blog_images as $image){ echo "$image->url"; } ?> )'><div>

 

[Robin S]

I'm not familiar with the blog module, but I assume that "blog_images" is an images field in the blog post template. If so, you don't want to iterate over the images in that field but rather you want to iterate over the PageArray of blog post pages.

So something like:

<?php 
$posts = $pages->find("template=blog_post");
foreach($posts as $post): 
?>
    <div class="blog-post">
        <div class="post-thumbnail" style="background-image:url(<?= $post->blog_images->first->url ?>);">
            <h3><?= $post->title ?></h3>
        </div>
        Other summary content here...
    </div>
<?php endforeach; ?>

 

2 hours ago, Matt_P said:

You'll have to excuse my lack of knowledge for PHP and the PW calls, but I have found it really difficult to understand how this module is set up.

No doubt the blog module has some cool features, but it's not difficult to build blog functionality into your website using the basic PW fields and no module. Give it a go!

That way you'll know exactly what's going on behind the scenes, learn about several different field types, and buzz-out when you see how easy PW makes it to build whatever is in your head.

[Matt_P]

Hi Robin S,

12 hours ago, Robin S said:

I'm not familiar with the blog module, but I assume that "blog_images" is an images field in the blog post template. If so, you don't want to iterate over the images in that field but rather you want to iterate over the PageArray of blog post pages.

Yes "blog_images" is a field attached to the template "blog-post". I've attached an image of where it is in PW, its labelled "images".

This is the blog module: http://modules.processwire.com/modules/process-blog/

12 hours ago, Robin S said:

No doubt the blog module has some cool features, but it's not difficult to build blog functionality into your website using the basic PW fields and no module. Give it a go!

That way you'll know exactly what's going on behind the scenes, learn about several different field types, and buzz-out when you see how easy PW makes it to build whatever is in your head.

I would have happily done this blog from the ground up, but I've taken this project over from a colleague and it was his choice to include the module, which I am reluctant to undo his work.

The issue here is that I cannot see in the code what is producing what. Therefore I do not know how to implement your code. Below I have attached the code from the file "blog-main.inc" (this comes with the module) which I assume based on the inspecting the page is the 'post-menu', which is also attached. "h4.post-headline is where I would like the image to go.

Do you know what it is I need to do?

<?php
include("./head.inc");
?>
<?php
/**
 * Blog Demo main markup include
 * Demo template file include
 *
 */
    /*
        we need to get topNav items by their templates in order to adapt to different blog styles (1-4)
        of course, in your blog install, you would use a different method since you would know the blog style you selected!
    */
    /*$templates = array('blog-categories','blog-tags', 'blog-comments', 'blog-authors', 'blog-archives');
    foreach ($templates as $t) {
        $p = $pages->get("template=$t");
        if($p->id)  $topNavItems[] = $p;

    }
    $topNav = $blog->renderNav('', $topNavItems, $page);*/
?>
        <body>
            <div id="wrapper" class="block-group"> <!-- #wrapper -->
                <!-- LEFT COLUMN - NAV -->
            	<div id ="nav" class="block"><!-- #nav -->
                    <div id="top-nav"><?php echo $topNav;?></div><!-- #top-nav -->
                    <?php
						$noSubNav = array('blog-comments','blog-posts', 'blog-tag', 'blog-tags');
                        if (!in_array($page->template->name, $noSubNav)) {
						      //subnav only on certain pages and if not empty
                              if(!empty($subNav)) echo '<div id="sub-nav">' . $subNav  . '</div><!-- #sub-nav -->';
                        }
                    ?>
                </div><!-- end #nav -->
                <!-- CENTRE COLUMN - MAIN -->
                <?php
                        //if 'post author widget' is disabled, we want to style the end of the post using the css class 'no-author' (see further below in CENTRE COLUMN output)
                        //only applies to 'blog-post' pages
                        $noAuthor = $pages->get('template=blog-widget-basic, name=post-author, include=all')->is(Page::statusUnpublished) ? ' no-author' : '';
                 ?>

                <div id="main" class="block<?php echo $noAuthor?>"><?php echo $content?></div> <!-- #main -->
            	<!-- RIGHT COLUMN - SIDEBAR -->
            	<div id="sidebar" class="block"><?php include_once("blog-side-bar.inc"); ?></div><!-- #sidebar -->
            </div><!-- end #wrapper -->
<?php
    include("./foot.inc");

Thanks,

Matt

[Robin S]

Looks like the markup for post-headline is set here: https://github.com/kongondo/Blog/blob/master/MarkupBlog.module#L916

This should work I think:

$out .= "<$h class='post-headline' style='background-image:url({$page->blog_images->first->url});'><a href='{$page->url}'>{$page->title}</a></$h>";

You may want to resize the image - see the API methods for this.

There is a support thread for the blog module. I believe @kongondo is away at the moment but if you post questions there other users of the module may have advice.

[Matt_P]

Hi Robin S,

Thank you very much, that has fixed my issue. 

If only I had known that's where all the code was!

I wish I could like your post twice.

Thanks,

Matt