First site, first problem

[thomassausen]

Hi there,

I'm coming from ExpressionEngine and giving PW a try. So far I'm very excited and PW could be my next main cms.

I'm rebuilding my portfolio-site with PW at the moment.

So I have these pages: 

Home

--- Portfolio

------Portfolio item #1

------Portfolio item #2

------Portfolio item #3

On Portfolio, I want to list all latest Portfolio items. 

I did it with:

<?php 
$latest_portfolio = $pages->get("/portfolio")->children();
foreach($latest_portfolio as $item) {
echo "<div class='span3'><article><a href='{$item->url}'>{$item->title}</a></article></div>";}
?>

So it list all my titles. But each item has a "portfolio_image"-field with one big image. So how do I output these image as an thumbnail in my code?

 

Further I tried to code a detail-view for each item. But my big image is not gonna to display:

 

<h1><?php echo $page->title; ?></h1>

<?php if ($page->portfolio_image) {
$image = $page->portfolio_image; 
echo "<img src='{$image->url}' alt='{$image->description}' />";
}
?>

Title is fine but not the right image-url. It output " site/assets/files/1014/ " and not "site/assets/files/1014/image.jpg"

What did I wrong? 

 

 

 

 

[Nico Knoll]

Hey,

you should try:

$image = $page->portfolio_image->first(); 

If I'm not completely wrong, the problem was that  $page->portfolio_image points to the image field, not the first image. So $page->portfolio_image->url gives you the url of the folder where the files of this image field are saved.

If you use $page->portfolio_image->first() you will get the first (and probably only) image in this field. And so $page->portfolio_image->first()->url gives you the right url.

And if you want to add a real thumbnail you can do it with $image->size($width, $height, $options). More about this here: http://processwire.com/api/cheatsheet/#files

[Pete]

Yes, like diogo said. By default an image field can accept more than one image so unless you specifically restrict it in the settings to allow only 1 field it will be an array.

As for sizes, you could do:

$image = $page->portfolio_image->first()->size(160);  // <-- This sets width to 160px and creates a thumbnail for you.

There are more image settings and the best resource to see everything (well, almost everything) is the Cheatsheet under Image Methods.

[thomassausen]

Thanks. I would never have occurred to me (->first ). 

And yeah the cheatsheet is my new friend. 

[Pete]

Yup - it's just because it can take any number of images by default, so if you change the field settings to only allow 1 image then be sure to remove ->first() from your code.

[Nico Knoll]

Yup - it's just because it can take any number of images by default, so if you change the field settings to only allow 1 image then be sure to remove ->first() from your code.

Isn't ->first() still working if I change it to allow only 1, is it?

[Pete]

I honestly can't remember now... I have a feeling it used to be that if you set it to 1 then it wouldn't but there was a conversation where I think maybe ryan said in 2.3 and up it would now still work with ->first()

[diogo]

Yes, like diogo said.

Great! I'm participating on discussions without even knowing

[Pete]

I meant Nico

<sings badly>Oh oh, diogo, Nico, whoah, don't go</sings badly>

[apeisa]

What is that weird singing stuff Pete? Are you ok?

[Adam Kiss]

Also, since you are on /portfolio/, you might switch the call for portiolio items:

  $portfolio_items = $pages->get("/portfolio")->children(); //this is your call
  $portfolio_items = $page->children(); //you have '$page' from PW - current page

Since in template you have always access to current page in $page variable, if you visit /portfolio/, $page is already there for you

Note: if you are not using the page array in any other way later in code, you can as well do this:

  foreach($page->children() as $item){
    // items' code
  }

[ryan]

Isn't ->first() still working if I change it to allow only 1, is it?

No, if portfolio_image is referencing a single image, then accessing ->first() would likely produce an error unless the page has output formatting turned off. That output formatting state (ON by default on the front-end of your site) is what makes an image field with a "1" max images behave as a single image rather than an array of them. This is supposed to be for convenience, but has been a common point of confusion. I'll probably add a setting in there that literally says "Do you want it to behave as an image or an array from the API?"

<?php if ($page->portfolio_image) {
$image = $page->portfolio_image->first(); 

The above code example was in one of the previous messages, but is not correct. If it's an image field that can contain multiple images, then $page->portfolio_image is always going to be an array (WireArray). Meaning "if($page->portfolio_image)" would always return true, even if there were no images in it. This is just the way PHP works. As a result, you'd want to code it instead as:

<?php if(count($page->portfolio_image)) {
$image = $page->portfolio_image->first(); 

[thomassausen]

Well, I need more practice to get into this PHP/PW-thing. For the last couple of years I wrote only EE-tags. 

So there is my Portfolio with all Items displayed as thumbnail-image.

And I did some mistakes... 

<?php 
$latest_portfolio = $pages->get("/portfolio")->children();
foreach($latest_portfolio as $item) {
$thumb = $page->portfolio_image->first()->size(160);
echo '<a href="' . $thumb->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '" </a>';

} ?>

[Nico Knoll]

<?php 
$latest_portfolio = $pages->get("/portfolio")->children();
foreach($latest_portfolio as $item) {
$thumb = $page->portfolio_image->first()->size(160);
echo '<a href="' . $thumb->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '">
</a>';

} ?>

Should be fine.

[Luis]

On Portfolio, I want to list all latest Portfolio items

Maybe you wanna take a look at sort and limit too.

Whith your snippet You show all your items.

To sort and limit try somerhing like this

children("sort=created,limit=5"

[thomassausen]

My snippet doesn't work. 

<?php 
$latest_portfolio = $pages->get("/referenzen")->children();
foreach($latest_portfolio as $item) {
$thumb = $page->portfolio_image->size(160);
echo '<a href="' . $thumb->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '" </a>';

} ?>

Returned: Error Call to a member function size() on a non-object (line 26)
Line26 is: $thumb = $page->portfolio_image->size(160);

Even if I try:

<?php 
$latest_portfolio = $pages->get("/referenzen")->children();
foreach($latest_portfolio as $item) {
$thumb = $page->portfolio_image;
echo '<a href="' . $thumb->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '" </a>';

} ?>

I only received empty html-tags (img src etc)

[apeisa]

<?php 
$latest_portfolio = $pages->get("/referenzen")->children();
foreach($latest_portfolio as $item) {
$thumb = $item->portfolio_image->size(160);
echo '<a href="' . $thumb->url . '"> 
<img src="' . $thumb->url . '" alt="' . $thumb->description . '" </a>';

} ?>

Change $page => $item

[thomassausen]

Great. Thanks. Now it's working fine. 

[Wanze]

There's a mistake in the foreach:

You have to replace "$page" with "$item".

<?php 
$latest_portfolio = $pages->get("/referenzen/")->children();
foreach($latest_portfolio as $item) {
  $thumb = $item->portfolio_image; //Note the change from $page to $item
  echo '<a href="' . $item->url . '"> //Note the change from $thumb to $item... or do you want to link to the image?
  <img src="' . $thumb->url . '" alt="' . $thumb->description . '" </a>';
} ?>

Also you want to check if there's really an image before outputting the img tag, as ryan mentioned above.

[thomassausen]

I want to display my services which I provided on each portfolio item. 

I did it this way and it is working

<?php if ($page->portfolio_services) {
echo "<h3>Services</h3><ul>";

foreach ($page->portfolio_services as $service) {
echo "<li>$service->title</li>";
}

echo "</ul>";
}?>

But "services" should only display, if at least one service is selected. How can I do that?

Because it's a array and multiselect, something like

<?php if ($page->portfolio_services) { ... } ?>

would not work. Any ideas?

[Soma]

If(count($page->portfolio_services))..

[diogo]

i'm on mobile and will not even try to write code. but look for the count method on the cheatsheet, and you should get there.

edit: soma was faster

[Adam Kiss]

edit: soma was faster

that's surprising.

[thomassausen]

Next question is about Slider.

A normal slider is not a big deal I think, because you can use Repeater-module or something like that. But how do I manage animated Sliders like http://dimsemenov.com/plugins/royal-slider/animated-blocks/ or http://www.sequencejs.com ?

With WordPress no problem, because there are several plugins out there. With ExpressionEngine no problem, because you would do a own  content-channel (slider), then adding some custom fields to it. Own field would be a matrix-field (http://pixelandtonic.com/matrix : repeater-deluxe.

[Soma]

With ProcessWire no problem. Just use a repeater or child pages for the content data you need. Then some foreach to output data in the format your slider js plugin needs it. 

There's no module for PW because it's so easy to implement those things. With a module you're limited at best and would have to change things at the end anyway. 

I don't understand the difference between a normal slider and an animated slider.