Display Custom Image Field in Template

[ShaneFoster]

Hi All,

I have what I'm sure is a simple question for an experienced Processwire user. I am simply trying to render a custom image field in my template. For example, I have a page and template titled "work" that is querying data from a child template titled, "web_work" I have created. This "web_work" template contains two different custom image fields. One titled, "work_thumb", and the other being, "work_full". These simply display a thumbnail and full-size version of two images. For the general "Work" page and template I simply want to render the thumbnails of my Web work. A pretty standard request for an online portfolio. I can't seem to figure out how to query the full path of the image field.

As of right now I have the below:

$work = $pages->find("template=work_web, sort=-date");
foreach($work as $web_work) {
    $image = $web_work->work_thumb;
    echo '<pre>';
    echo print_r(array_keys($image));
    echo '</pre>';
    echo "<li><a title='{$web_work->title}' href='{$image->url}'><img src='{$image->url}' alt='{$web_work->title}'></a></li>";
}

The $image->url query only seems to display the folder containing the image file, not the actual image file name. It seems I need to somehow append the basename or filename to this query.

I may be way off in my approach. I've tried to find a solution in the API and in the forums. I can't seem to figure it out.

Hopefully I have explained this well enough. Let me know if more information is needed. Thanks in advance for any help anyone can provide!

[Soma]

Not sure, the code looks right. I'm using similar code right in front of me. $child->imagefield->url which returns url of image.

On a side note:

You could also use only one full image field and create various sizes on the fly like:

$child->image->size(0,150)->url // max height 150, but keep ratio

But maybe you already know that and want to have the possibility to have a different thumb picture than the full.

[ryan]

Shane, it sounds like you have a multiple-images field rather than a single image field. Two ways you can solve it. First would be to convert to a single image field. Go in Setup > Fields, and edit your work_thumb (and work_full) fields. On the 'details' tab of each, enter "1" for "maximum files allowed". That will make your field dereference in the manner your code is written, making your code example work how you'd expect.

The other solution is for you to change the first line in your foreach() to this:

$image = $web_work->work_thumb->first(); 

You may also want to add a check to deal with pages that don't yet have an image attached, i.e.

if(!$image) continue; 

[ShaneFoster]

Thank you to both of you for the responses.

I updated my code, based on your response, Ryan. I double-checked that I changed the "Maximum Files Allowed" for both image fields (work_thumb, work_full) to be one.

My new code looks like the below (I didn't add the if statement to check for image as suggested yet, but I will):

<?php

$work = $pages->find("template=work_web, sort=-date");

foreach($work as $web_work) {

    $image = $web_work->work_thumb->first();

    echo "<li><a title='{$web_work->title}' href='{$image->url}'><img src='{$image->url}' alt='{$web_work->title}'></a></li>";

}

?>

Running this returns the following error (in DEBUG mode):

Fatal error: Call to a member function first() on a non-object in /home2/showtim1/public_html/beta/site/templates/work.php on line 15

I made calls to a few other field types in this template to test, like "work_date", title and body. These all return the correct data. It seems to be the custom image fields that I can't query correctly.

Any other ideas?

[ryan]

It sounds like you've now got both the first() added and the single image fields. You want one or the other, not both. The first() was just to grab the first image from an image array. If you have the field set to contain a max of 1 image, then it's just going to have that image, and no array. So if you are going to keep the "first()" in there, then change it to a multi-image field (set the max to 0 or greater than 1).  If you want to keep it a single image field, then get rid of the "->first()".

If it still doesn't work, we need to take a closer look because the error message you posted sounds like work_thumb may not be a variable on the page (or there may be no image attached). One thing you can do is:

var_dump($web_work->work_thumb); 

Just to see what it is. I'm guessing it's null, and it's coming from a page with no image attached.

Another thing you might want to do is place some more limits on your $pages->find(). Right now it's pulling all pages with the work_web template, no matter where they are. There's no problem with that, but it might be pulling a page you've forgotten about somewhere else in the tree. I would suggest something more specific:

$work = $pages->find("parent=/work/projects/, template=work_web, sort=-date"); 

Or:

$work = $pages->get("/work/projects/")->children(); // assuming all children use work_web template

Or:

$work = $pages->get("/work/")->find("template=work_web, sort=-date"); 

[ShaneFoster]

Hi Ryan,

I added more parameters to my find() method to make it more specific. That did the trick! I now use:

$work = $pages->find("parent=/work/web/ ,template=work_web, sort=-date");

Everything now works as expected. Thanks for much for taking the time to help me out on this. I really do appreciate it.

Quick random question; do you guys have an account for "Donations" for Processwire? I'd hope that people would be willing to donate to a project with this much promise. I know I would.

[ryan]

Shane, glad that did the trick!

Thank you for your inquiry about donations, that's very nice of you. We don't have anything like that at present, but maybe will set it up someday. I certainly don't expect people to donate anything. But if they are wanting to, time donations are always appreciated. Time can mean anything, whether blogging about PW, sending the occasional tweet, helping out others on the forum, linking to processwire.com, writing PW modules/templates/code to share, helping to find and nail bugs, getting involved in the code, etc. So I guess that translates to anything you are interested in towards improving the project or sharing it with others. But of course, nothing is expected or required.