Image for featured items

[Jon E]

Hi,

Sorry for the very basic question, I have looked here and tried to find an answer but I had no luck.

Basically I would like to output the first image for each 'item' featured (they all have an image field titled 'images' in the standard way).

So, my code so far is:

<?php
$features = $pages->find("featured=1, limit=5, sort=-date");
foreach($features as $feature) {
  echo "<li>" .
    "<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
    "<em>{$feature->date}</em>" .
    "<p>{$feature->intro}</p>" .
    "</li>";

}
?>

Would anybody be able to help me to ouput the first image from the images field for each of these?

Again, sorry for such a basic question.

I am so impressed with Processwire, I have used it for 4 sites now and would return again and again. There's nothing that comes close out there.

Thanks,

Jon

[Pete]

No probs - no such thing as a bad question.

You'll want $feature->images->first()->url and if you want the description too then same as this but description instea of url

[Jon E]

Thanks very much, that works a treat.

If I wanted to then resize the image to a square how could I include this?

So my code is:

<?php
$features = $pages->find("featured=1, limit=5, sort=-date");
foreach($features as $feature) {
  echo "<li>" .
 "<img src='{$feature->images->first()->url }' width='180px'>" .
    "<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
    "<em>{$feature->date}</em>" .
    "<p>{$feature->intro}</p>" .
    "</li>";

}
?>

...and I want to include a function like:

   $thumb = $image->size(325,325);

Again, thank-you so much - answers to questions like these make it so easy to pick things up.

[Pete]

Just after your foreach I would do $thumb = $feature->images->first()->size(325,325); and then you can output $thumb->url and description as normal.

[Jon E]

Hi,

I've put the code:

<?php
$features = $pages->find("featured=1, limit=6, sort=-date");
foreach($features as $feature) {
$thumb = $feature->images->first()->size(100,100);
  echo "<li>" .
 "<a href='{$feature->url}'><div id='explore_thumb'><img src='{$feature->images->first()->url }'></div></a>" .
    "<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
    "<em>{$feature->date}</em>" .
    "<p>{$feature->intro}</p>" .
    "</li>";

}
?>

Seems not to work though?

Thanks I really appreciate this.

[Soma]

It should be then $thumb->url;

[Jon E]

It should be then $thumb->url;

In what context?

[interrobang]

I updated your code:

<?php
$features = $pages->find("featured=1, limit=6, sort=-date");
foreach($features as $feature) {
$thumb = $feature->images->first()->size(100,100);
  echo "<li>" .
 "<a href='{$feature->url}'><div id='explore_thumb'><img src='{$thumb->url}'></div></a>" .
	"<h3><a href='{$feature->url}'>{$feature->title}</a></h3>" .
	"<em>{$feature->date}</em>" .
	"<p>{$feature->intro}</p>" .
	"</li>";

}
?>

[Pete]

Yup, what they said

[Jon E]

Thank-you so much! So useful. Very easy solution, too!

[mike77]

Finally I can start doing something with PW and learn it from the scratch.

I also have a (very) basic question. I couldn't find it in the API and on the forum but I need it straight just to get along with the work.

The case is very simple.

I added a image field called 'image' and put it into the template. Then, in template code, I added this (just like in case of other fields, textArea for example):

<?php echo $page->image;?>

but it doesn't work - the photo won't show only the name of the file.

I also tried:

<img src="<?=$page->image?>" alt="" />

with now result.

What is the syntax for adding a single image field? I used the foreach loop with the $page->image and it worked find.

[Soma]

If it's a single image field you do simply:

echo $page->image->url;

If the field allows for multiple you have to loop the field or directly access one through index.

$page->image->first()->url;

You find some API infos here http://processwire.com/api/cheatsheet/#files

And also in the Docs http://processwire.com/api/fieldtypes/images/

[mike77]

If it's a single image field you do simply:

echo $page->image->url;

Well, I have tried this previously but the output I get is just an URL like: /../site/assets/files/1016/gk.jpg - instead of photo I see that URL.

The folder assets/file/1016 contains the file gk.jpg so it should show but it doesn't.

I also checked all image field setting but found nothing that could interact that issue.

Could it be that I don't have something installed correctly?

[Soma]

Well you'd have to insert it into a image tag to see an image of course.

echo $page->image->url only returns the url and not an image tag. You have to create your markup, PW doesn't generally generate markup.

So that might look like this. Depends on how you need the image be rendered.

$imgurl = $page->image->url;
echo "<img src='$imgurl'/>";

That's all also shown in the images documentation with examples:

[mike77]

Thanks Soma, I should try to insert it into markup the way you did instead of taking a shortcut like:

echo "<img src='<?=$page->image?>'/>"

Anyway the PW variable should always be as a value of a standard variable (like $imgurl in that case) because the code above or

echo "<img src='<?php $page->image->url ?>'/>"

don't work either.

First lesson learnt

[diogo]

echo "<img src='<?php $page->image->url ?>'/>"

inside phop you can do:

echo "<img src='{$page->image->url}'/>";

and outside php:

<img src='<?php echo $page->image->url ?>'/>

[mike77]

Additionally I could remind that for single image field the "Maximum files allowed" setting (in the "Details" section in admin panel) should be changed from 0 to 1. Otherwise the PW will seek for an array and not exact file (the $page->image->url output will be a folder not a file name) and you won't see the photo you added through the admin panel.