Displaying images... how to

[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.com/tutorials/quick-start/images/

This is also a useful forum topic: http://processwire.com/talk/index.php/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.alexcreedy.com/cog/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.com/tutorials/quick-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.

[Soma]

That would be great to have such an option when resizing images.

BTW shouldn't we put that image stuff in the cheatsheet for reference?

[ryan]

Yeah I think we probably should. Here they are. I've tried to tailor them for cheatsheet format and included an @advanced tag where applicable. I understand the sentences of text don't fit in the cheatsheet, so wasn't sure how you'd want to handle those (or leave them out), but put them here in case helpful.

FieldtypeFile or FieldtypeImage can be configured to hold a single file or multiple files. When configured to hold multiple files, it is a WireArray (called Pagefiles or Pageimages) with these additions:

<?php
$files->path; // Returns the full server disk path where files are stored
$files->url; // Returns the URL where files are stored
$files->page; // Returns the $page that contains this set of files
$files->delete($file); // Removes the file and deletes from disk when page is saved (alias of remove)
$files->deleteAll(); // Removes all items and deletes them from disk when page is saved @advanced

Each item in the WireArray is a $file or $image (called Pagefile or Pageimage). Likewise, when FieldtypeFile or FieldtypeImage is configured to hold a single file, it is just the $file or $image with the following properties and methods:

$file properties

<?php
$file->url; // URL to the file on the server
$file->filename; // full disk path to the file on the server
$file->name; // Returns the filename without the path (basename)
$file->description; // value of the file's description field (text). Note you can set this property directly.
$file->ext; // file's extension (i.e. last 3 or so characters)
$file->filesize; // file size, number of bytes
$file->filesizeStr; // file size as a formatted string
$file->pagefiles; // the $files array that contains this file @advanced
$file->page; // the $page that contains this file @advanced
(string) $file; // returns the file's name (no path)

$file methods

<?php
$file->rename($name); // Rename this file to the given name (no path). Returns true on success, false on failure.
$file->getNext(); // Returns the next file in a multi-file field, or NULL if at the end @advanced
$file->getPrev(); // Returns the previous file in a multi-file field, or NULL if at the beginning @advanced

When dealing an $image, it is the same as a $file, but with the following additions:

$image properties (in addition to those in $file):

<?php
$image->width; // Width of image, in pixels
$image->height; // Height of image, in pixels
$image->original; // Reference to original $image, if this is a resized version. @advanced

$image methods (in addition to those in $file):

<?php
$image->size($width, $height); // Return a new $image with the given dimensions (proportional, center crop)
$image->width($width); // Return a new $image with the given width (proportional height, center crop)
$image->height($height); // Return a new $image with the given height (proportional width, center crop)
$image->getVariations(); // Returns a WireArray (Pageimages) of all size variations of this image. @advanced
$image->removeVariations(); // Deletes all size variations of this image (be careful) @advanced

[Pete]

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.

(Got sidetracked porting 3 sites to PW, but they're all nearly done now so I'm hoping to find time to look at this again this week).

[onjegolders]

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.

This was very useful, I think a few more like this would help out newcomers like me!