Managing and crosslinking images

[p_hammond]

Hello guys,

I'm currently building my first ProcessWire site and have run into some problems that I'd like to discuss with you. Here're the details:

I'm building a portfolio site with the following tree structure:

Home

- About

- Services

- Portfolio

- Individual project page 1

- Individual project page 2

- and so on...

- Contact

The problems I'm running into have to do with managing my projects' images. Basically, I'm displaying these images in three different places: in a slider in the homepage, in the main portfolio page (/portfolio/), and then each project has its individual page.

The slider in the homepage shows images of the 6 most recent projects. The slider also includes a heading, a brief description of each project and a button pointing to each particular project's url.

The main portfolio page (/portfolio/) shows, again, a list of images of the 6 most recent projects. If you click on any of the links, you'll go straight into that project's individual page.

Now, what I want to do is to have the images and button in the homepage's slider and the images in the main portfolio page link to each project's individual page. I also don't understand how I should approach managing all these images. For example, should I only upload the images to the individual project page and then somehow call them from the other two locations? Is this even possible?

As you can see, I'm in urgent need of some guidance here. If you were building such a system, how would you go about doing it? Could you please shed some light on how I can accomplish what I want to do?

Thank you in advance for your help.

[Wanze]

Hi p_hammond,

This is a simple task in Processwire

Give all your projects the same Template, for example "project". Assign an Image Field to this Template. This way, you can store one or more images in your projects.

To grab the latest 6 projects with image (in your homepage template or portfolio), you can build a query like this:

$projects = $pages->find("template=project, sort=-created, limit=6");

//Output the Images and link to project page
foreach ($projects as $project) {
 //Grab the first image of field "images"
 $img = $project->images->first();
 echo "<img src='{$img->url}' alt=''><br>";
 echo "<a href='{$project->url}'>{$project->title}</a>
}

[p_hammond]

Hi Wanze,

Thank you for your answer. I'm going to try your code and see how it goes. I'll report back tomorrow.

[p_hammond]

I was able to use your code successfully, Wanze, and now everything is working fine. Now, I've been wondering whether I can have an original, unchanged image on an individual project page and then have a thumbnail version of that image displaying in the homepage and the project list page. Does anybody know how I could do this?

Thanks.

[apeisa]

<?php
// Check if there are any images
if ($page->images) {
 // Loop through all the images
 foreach($page->images as $img) {
   $thumb = $img->size(100,100); // Create the thumbnail
   echo "<a href='$img->url'><img src='$thumb->url' alt='$img->description' /></a>"; // Echo <img> with thumbnail, wrapped with link to original image
 }
}

[p_hammond]

Thanks, apeisa, it works. I have another question: is there a way I can control how images are cropped? I've noticed that it basically crops images from the centre outwards, and I would really like to have control over this.

Thank you for your help, guys.

[ryan]

Thanks, apeisa, it works. I have another question: is there a way I can control how images are cropped? I've noticed that it basically crops images from the centre outwards, and I would really like to have control over this.

Since these are API functions, you don't "see" the images, so center cropping is really the only safe way to crop without visual context. If you want to prevent any cropping from the API side, then you would just use the width(x) or height(y) functions rather than size(x,y). I also suggest looking at apeisa's Thumbnails module, which provides interactive cropping capabilities.

[p_hammond]

OK, Ryan, thanks for the clarification. Do you know how I can use apeisa's module in this example?

$projects = $pages->find("template=portfolio-item, sort=-created, limit=6");
foreach ($projects as $project) {
$image = $project->images->first();
$thumb = $image->size(640,370);
echo "<a href='{$project->url}'><img src='{$thumb->url}' alt='{$image->description}'></a>";
}

I assume I have to place the following code, or a modified version of it, somewhere in the previous code block, but have no idea where or how.

echo $page->cropImages->eq(0)->getThumb('thumbnail');

All I'm doing is calling the first image from my project pages into my homepage. Instead, I want to call the thumbnail version of the image. So, I've gone to my project pages and, using apeisa's module, I've created the thumbnails. The thing is, how do I get the thumbnails to display in my homepage? I hope this makes sense.

Thanks a lot.

[apeisa]

$projects = $pages->find("template=portfolio-item, sort=-created, limit=6");
foreach ($projects as $project) {
 $image = $project->images->first();
 echo "<a href='{$project->url}'><img src='". $image->getThumb('thumbnail') ."' alt='{$image->description}'></a>";
}

[p_hammond]

$projects = $pages->find("template=portfolio-item, sort=-created, limit=6");
foreach ($projects as $project) {
$image = $project->images->first();
echo "<a href='{$project->url}'><img src='". $image->getThumb('thumbnail') ."' alt='{$image->description}'></a>";
}

Apeisa, your code works beautifully. Thank you very much for your help, to all of you guys, you've really helped me out.