Problem with thumbnails

[thingstodo]

Hi,

I'm new to Process Wire, I like the look of it and am checking it out.

I'm working through the "Simple News System" tutorial having done the "Basic Website Tutorial"

When I get to the part that uses the Thumbnails module I am having problems.

I've worked through the tutorial on two different servers and get the same problem 

When I try to upload an images I get an error messages like: There is no thumb called: listingimage

But the images are actually getting uploaded, resized and renamed.

However I did get it to work briefly on one occasion when I left the thumbnail setting at it's default value of:

thumbnail,100,100

Instead of the tutorial settings of:

thumbnail,360,280 
listingImage,280,170

However when I changed the settings it broke it again and setting it back to the defaults didn't repair it.

I'm using the latest version of ProcessWire and CropImage module.

Any ideas?

Thanks 

Mike

PS. I thought I posted this last night but I couldn't find it today, so apologies if appears twice.

[Joss]

Mike, can you post this over to the thumbnails module forum thread?
 

http://processwire.com/talk/topic/643-release-thumbnails/

Apeisa, who maintains the module, is more likely to see the post there.

However, just to double check you have got the most recent version, go to:

https://github.com/apeisa/Thumbnails

And replace you FieldtypeCropImage.module in your site/modules/ directory, with the one from Github. 

We thought this issue had been conquered, but obviously you are still getting problems.

In the mean time, you may want to use the normal images field.  You will need to do a couple of small changes to the functions:

On the newsLIst() function, where on the line for the image, change it to

$out .="<img class='align_left' src='{$newspost->article_newsimage->size(280,170)->url}'>";

That will create the thumbnail when the page is accessed and cache it. Obviously, you cannot recrop the image (which is the huge advantage for the cropimage module), but for the purposes of the tutorial it will keep you going!

You need to do a similar change on newsDisplay(), but I will leave you to work that out!!

Joss

[thingstodo]

Hi Joss,

Thanks for responding.

OK, i will copy the post to the thumbnails thread too.

Yes I tried the most recent version of Thumbnails downloaded from Github last night.

Thanks. I completed your tutorial with those suggestions, thanks.

Ignoring the Thumbnails problem for now what I'd like to try next in my learning process is recreate two things I saw on the "Process Wire 2 Overview" video.

1) At about 4:58 in the video Ryan highlights some text in a rich text editor, clicks the link icon, and gets a pop up where he can choose a page from the site to link to.

2) At about 5:22 he resizes an image in the rich text editor, saying that the image will be re-sampled from the original.

That's brilliant! But how is it done?

Can you point me in the right direction, modules, tutorials, etc?

Thanks

Mike

[Joss]

The link side is just hitting the link button in the TinyMCE editor that comes automatically with the Body field or can be added to any textarea field (under the details tab).

With images, when you click on the image button on TinyMCE it will open a popup that will list any images you have in images fields for that page.

NOTE: If you are going to allow users to insert images into the TinyMCE editor, probably ought to make sure there is an images field in that template! (You can also insert images from other pages on the popup).

When you select an image by clicking on it, you can select alignment, select whether you want it to be linked to a larger version (the original) of the image, and select the size.

PW will create a cached version of that image size automatically. 

There are some extra tricks you can do.

If you are using a lightbox system like Colorbox (as I use on the Simple Gallery Tutorial) you can add a little bit of JQuery to insert the right classes into the image you have inserted into TinyMCE.

The html produced will be something like:

<div "myarticlecontainer">

<p> blah blah blah </p>
<a href="/path/to/image.jpg">
   <img src="/path/to/image-300x200.jpg">
</a>

</div>

This is the result of you returning your textarea/TinyMCE field inside a container of some sort.

So, if you add some JQuery to your page that looks for that sort of construction, then you can add the correct class and any other attributes for your lightbox. 

$('.myarticlecontainer img').closest("a").addClass("colorbox ").attr('rel', 'group');

This looks for image fields within your <div> and then adds a class and rel="group" to the <a> tag that surrounds it. By keeping it within a specific container, it stops it adding it to strange places!

Obviously, you must have JQuery and Colorbox installed in your tempates, but I cover that in the gallery tutorial.

[thingstodo]

Great! Thanks Joss, plenty to get my teeth stuck into there, my explorations continue ...

Mike

[ryan]

2) At about 5:22 he resizes an image in the rich text editor, saying that the image will be re-sampled from the original.

Previously this worked in Firefox and IE, but not in Chrome/Webkit. However, if you are using the latest Chrome and the latest PW (dev), it now works there too (thanks to a recent update from Soma).