Jump to content
Matt_P

Blog Module Post Thumbnails

Recommended Posts

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>

 

blog_grid.png

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

ins.png

blog-pw.png

Share this post


Link to post
Share on other sites

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.

  • Like 4

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
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 BitPoet
      Here's a small new module that started as a spinoff of a memcache proof-of-concept. Cache your strings and partials in-memory using Redis as a backend.
      CacheRedis
      All you need is a running Redis database. The module supports connection through regular TCP, over TLS and via unix domain sockets. Host and port are configurable, and authentication is supported too. Here's a screenshot of the module configuration options:

      I'll not go into too many details about the usage, you can see everything explained in the README on GitHub, and just highlight the most important points.
      When the module is active, you'll have a wired $redis variable, which means you can reach the module as $redis, wire("redis") or within Wire classes / modules as $this->redis.
      CacheRedis is strongly influenced by WireCache, and its usage is (hopefully) straight forward.
      // Store an entry in the cache under the given key name with the given value: $redis->store("cached_value_number_one", $expire, $value); // Retrieve a value from the cache $value = $redis->fetch($key); // Delete a cache entry $redis->delete("my_other_cached_value"); // Clear the whole cache $redis->flush(); // Retrieve a value from the cache, and if not found, create it through the given function // and store it with a lifetime of 5 minutes (300 seconds) $value = $redis->fetch($key, 300, function() use($page) { return "Page last changed on " . strftime('%m/%d/%Y %H:%M', $page->modified | $page->created); }); // Render a file using wireRenderFile and store it in the cache. // We'll pass a selector as the expiry value so this cache gets // emptied every time a page matching the selector is saved. $news = $redis->renderFile("partials/news.php", 'template=blog-post', ["page" => $page]); The module is still very crude work in progress, but I hope some of you feel daring, try it out and let me know in case anything breaks.
      Have fun!
    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="optin" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="optin" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="optin" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: PrivacyWire Git Repo
      Download as .zip
      I would love to hear your feedback 🙂
      CHANGELOG
      0.0.5 Multi-language support included completely (also in TextFormatter). Added possibility to async load other assets (e.g. <img type="optin" data-category="marketing" data-src="https://via.placeholder.com/300x300">) 0.0.4 Added possibility to add an imprint link to the banner 0.0.3 Multi-language support for module config (still in development) 0.0.2 First release 0.0.1 Early development
    • By MoritzLost
      This is a new module that provides a simple solution to clearing all your cache layers at once, and an extensible interface to perform various cache-related actions.
      The simple motivation behind this module was that I was tired of manually clearing caches in several places after deploying a change on a live site. The basic purpose of this module is a simple Clear all caches link in the Setup menu which clears out all caches, no matter where they hide. You can customize what exactly the module does through it's configuration menu:
      Expire or delete all cache entries in the database, or selectively clear caches by namespace ($cache API) Clear the the template render cache. Clear out specific folders inside your site's cache directory (/site/assets/cache) Refresh version strings for static assets to bust client-side browser caches (this requires some setup, see the full documentation for details). This is the basic function of the module. However, you can also add different cache management action through the API and execute them through the module's interface. For this advanced usage, the module provides:
      An interface to see all available cache actions and execute them. A system log and logging output on the module page to see verify what the module is doing. A CacheControlTools class with utility functions to clear out different caches. An API to add cache actions, execute them programmatically and even modify the default action. Permission management, allowing you granular control over which user roles can execute which actions. The complete documentation can be found in the module's README.
      Beta release
      Note that I consider this a Beta release. Since the module is relatively aggressive in deleting some caches, I would advise you to install in on a test environment before using it on a live site.
      Let me know if you're getting any errors, have trouble using the module or if you have suggestions for improvement!
      In particular, can someone let me know if this module causes any problems with the ProCache module? I don't own or use it, so I can't check. As far as I can tell, ProCache uses a folder inside the cache directory to cache static pages, so my module should be able to clear the ProCache site cache as well, I'd appreciate it if someone can test that for me.
      Future plans
      If there is some interest in this, I plan to expand this to a more general cache management solution. I particular, I would like to add additional cache actions. Some ideas that came to mind:
      Warming up the template render cache for publicly accessible pages. Removing all active user sessions. Let me know if you have more suggestions!
      Links
      https://github.com/MoritzLost/ProcessCacheControl ProcessCacheControl in the Module directory

    • By David Karich
      Admin Page Tree Multiple Sorting
      ClassName: ProcessPageListMultipleSorting
      Extend the ordinary sort of children of a template in the admin page tree with multiple properties. For each template, you can define your own rule. Write each template (template-name) in a row, followed by a colon and then the additional field names for sorting.
      Example: All children of the template "blog" to be sorted in descending order according to the date of creation, then descending by modification date, and then by title. Type:
      blog: -created, -modified, title  Installation
      Copy the files for this module to /site/modules/ProcessPageListMultipleSorting/ In admin: Modules > Check for new modules. Install Module "Admin Page Tree Multible Sorting". Alternative in ProcessWire 2.4+
      Login to ProcessWire backend and go to Modules Click tab "New" and enter Module Class Name: "ProcessPageListMultipleSorting" Click "Download and Install"   Compatibility   I have currently tested the module only under PW 2.6+, but think that it works on older versions too. Maybe someone can give a feedback.     Download   PW-Repo: http://modules.processwire.com/modules/process-page-list-multiple-sorting/ GitHub: https://github.com/FlipZoomMedia/Processwire-ProcessPageListMultipleSorting     I hope someone can use the module. Have fun and best regards, David
×
×
  • Create New...