Jump to content
thomassausen

First site, first problem

Recommended Posts

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? 

 
 
 
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

And yeah the cheatsheet is my new friend. 

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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()

Share this post


Link to post
Share on other sites
Yes, like diogo said.

Great! I'm participating on discussions without even knowing :)

  • Like 4

Share this post


Link to post
Share on other sites

I meant Nico :P

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

  • Like 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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
  }
  • Like 1

Share this post


Link to post
Share on other sites
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(); 

Share this post


Link to post
Share on other sites

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>';

} ?>

Share this post


Link to post
Share on other sites
<?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.

Share this post


Link to post
Share on other sites
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"

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites
<?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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

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.

×
×
  • Create New...