23 replies to this topic

[Alex]

Hi,

I'm starting to put together my first processwire site, it will be a portfolio style site for a friend of mine.

I'm following the head.inc  > page-template.php > footer.inc  structure.

I'm going to have a portfolio-page.php for each project. Sometimes there will be multiple images per project, and i want a piece of text attached to each image to display. I'm happy for the page to just scroll down when theres multiple images. The images will be on the large side.

What is the best approach?

– Is it best to create 'sub pages' under each project for each additional image?  So there would be a template for individual images?

– Or is there a way to add extra images with text straight to the main portfolio-page.php template?

I have used the 'images' field but it doesn't display the description. I would prefer to wrap each image and text in a div.

I'm not sure where to start in the API for this information?, I guess i am looking for examples of the code so I can understand it better.

thanks,
Alex

[formmailer]

You could do something like this to display all images:

<?php 
//Display images if available
if(count($page->images)) {
	echo '<div id="gallery">';
	$n = 0; 
	foreach($page->images as $image) {
	$resized_image = $image->size(236,225);
	echo "<p><img class='photo' src='{$resized_image->url}' alt='{$image->description}' width='236' height='225' />";
	echo "<br />{$image->description}</p>";
	$n++;
	}
	echo "</div>";
	}

More examples are available here: http://processwire.c...k-start/images/

This is also a useful forum topic: http://processwire.c...topic,97.0.html

[Marty Walker]

Hooray, Another Australian! I was starting to feel like I was the only one here.

I've done a couple of artist portfolio sites (example: http://illo.clientsite.net.au) and almost never use the image description field. I usually put each artwork on its own page. You don't really need a template file for each image so long as you have the fields you want set up.

There's a few ways to display images as I've discovered with PW. It all depends on the design.

Cheers
Marty

[Alex]

Yes i'm down in Melbourne, surely i'm not the second Australian to be using processwire... there must be more out there.

Thanks for the replies.

I tried Formmailer's code, got it to display description but not images, Have tried some code from the quickstart/images link which works for images and i added in the description field to this.

See both bits of code below on my portfolio-page.php:

<?php 

/**
 * Page template
 *
 */

include("./head.inc"); 

echo $page->body;

	
	//Display images if available
if(count($page->portfolio_images)) {
	echo '<div id="gallery">';
	$n = 0; 
	foreach($page->portfolio_images as $image) {
	echo "<p><img class='photo' src='{$image->size(200,200)}' alt='{$image->description}' width='200' height='200' />";
	echo "<br />{$image->description}</p>";
	$n++;
	}
	echo "</div>";
	}
	
	
	//Display images if available	
if ($page->portfolio_images) {
	foreach($page->portfolio_images as $image) {
	$thumbnail = $image->size(200,200);
	echo "<p><a href='{$image->url}'><img class='photo' src='{$thumbnail->url}' alt='{$image->description}' /></a>";
	echo "<br />{$image->description}</p>";
            }
    }

include("./foot.inc"); 

and link to the live page:
http://www.alexcreed...portfolio-page/

You can see where those images are not rendering there's just a double description. Does anyone know why?
Also in Formailer's code what do these bits do: $n = 0;    $n++;
I am starting to understand the other parts .

Thanks,
Alex

[apeisa]

Hmm.. Might be .htaccess issue of some kind, since html in your image tags is this:

<img class="photo" src="4571168461_44f687f4e4_b.200x200.jpg" alt="Image one description" width="200" height="200">

src should be something like this:  /site/assets/files/1001/4571168461_44f687f4e4_b.200x200.jpg

[Marty Walker]

Hi Alex,

I think your image src line needs a "->url":

src='{$image->size(200,200)->url}

That way it'll pick up the path to the smaller image.

Regards
Marty

[formmailer]

I think your image src line needs a "->url":

src='{$image->size(200,200)->url}

My mistake, sorry! I updated my example.

Now it seems to work on your site.
$n is just a counter, which is zero before we begin. $n++ is just increasing it with one.
You actually don't need it, but it can be nice if you want to echo the picture number, something like this:

<?php
echo "Image $n: {$image->description}";

Which would result in:
Image 1: Description of image 1
Image 2: Description of image 2

etc.

/Jasper

[Alex]

Hi Marty & Jasper,

Yes that did it thanks, and the $n could be useful at some point too.

cheers,
Alex

[diogo]

Nice works, by the way

[Alex]

the images aren't actually mine I just dragged them in from my 'cool images from the web' folder.

eventually i will turn this site into a portfolio for an illustrator/artist who does really fantastic stuff.

alex

[ryan]

More examples are available here: http://processwire.c...k-start/images/

I'd forgotten those tutorials were there. The only way to get to them is through the search engine (I think). These were written by my brother-in-law back when PW 2.0 was new (nearly a year ago). He never was able to finish them because he got a new job that takes all his time. These tutorials may not be totally applicable anymore (I haven't read them all yet). But I'd be interested to hear if you guys think they are helpful and if we should update and finish them. Now that they've turned up again, I'm going to read through them in more detail here.

[Pete]

I was having a look through them last month in relation to updating them - whilst I didn't get very far on the docs ryan, these still looked pretty relevant with maybe just some minor tweaking required.

I've actually got some time tomorrow evening to look at this if you don't get time before then

[Alex]

Those tutorials are really useful for my level, where i'm learning the basics.

That kind of quick tutorial on different topics would be great to expand on.

thanks,
Alex

[formmailer]

I do think that these tutorials are very useful for new users. And sometimes even for somewhat more experienced users. It's definitely worth to update them where needed. And even add some more that cover other areas.
I especially liked the idea of showing how to combine several things, like in the image tutorial: show how to display images, show how to make thumbnails and to finally an example on combining these things into something that is useful for many.

/Jasper

[ryan]

Thanks for all of your feedback on these. Glad that you find them to be pretty good. I know Jim spent a lot of time on them. But I don't think he'll ever get back to them because I think they are keeping him super busy at his new job. Since it sounds like they are going in the right direction, we'll keep updating and adding to these. If anyone is interested in working on them just let me know. One of the main things about these is that they were written a year ago, back when PW was brand new and before version 2.1. The other thing is that you'll see some of the Quick Start tutorials in there are just notes he had made to himself– some aren't finished and some aren't started. So  one of the things we need to do is determine if the unfinished ones should be deleted or finished.

I've actually got some time tomorrow evening to look at this if you don't get time before then

Thanks, that would be great if you have time to take a look. If you find anything that you don't think is right, feel free to change it too.

Thanks,
Ryan

[Alex]

Regarding image sizing in the template

$image->size(200,200)

can you define the width but allow the height to be in ratio for each individual image, if that makes sense...

thanks
Alex

[Soma]

You can by using 0 for the side you want to auto scale. I think I've seen another way with using null.
Also you can use ->width(100) or ->height(n) respectively doing the same as keeping the ration either on width or height

While at it, Ryan how is the compression setting when using API to scale? Is there way to set it?

[apeisa]

Or are you after width(200)?

[Alex]

thanks - that works great I made the width a bit bigger:

$image->size(400,0)

[ryan]

While at it, Ryan how is the compression setting when using API to scale? Is there way to set it?

The /wire/core/ImageSizer class accepts a quality setting, but the Image fieldtype doesn't use it at present, so it just defaults to a quality setting of 90 (out of 100). My experience has been that that's ideal for most cases. But this would be one good future improvement to make this configurable.