selectively disable auto-thumbnail creation

mikeO:

I’m going to move this down to the Extensions forums, as it’s a third-party extension. Mark is good about helping people out here. But perhaps some other people have ideas?

-greg

Mark is good about helping people out here. But perhaps some other people have ideas? -greg

Actually does Mark still come into the forums here. The File post is getting quite large now and I don’t think he’s posted in there in quite a while has he?

What I would do though is turn off the thumbnail auto-creation al-together and then use the Image Sizer plugin to do your thumbnail creation for you. You will find that you will have a lot more options open up to you if you do it that way.

Hope that helps.

Best wishes,

Mark

What I would do though is turn off the thumbnail auto-creation al-together and then use the Image Sizer plugin to do your thumbnail creation for you. You will find that you will have a lot more options open up to you if you do it that way.

Mark,

I asked a related question earlier today, but I did it in the “How To” forum… maybe the wrong place. it’s here.

You often recommend the Lumis Image Sizer extension along with the File extension. I cannot figure out how to feed File tags to Image Sizer. My previous above-referenced Forum post probably states my problem well enough, but here’s what I’ve coded that does NOT work:

{exp:weblog:entries weblog="photo_library" limit="20 }
<h3>{title}</h3>
{photo}
{exp:imgsizer:size src={file_thumb_url}" width="100"}
       {sized}
{/exp:imgsizer:size}
{/photo}
{photo_caption}
{/exp:weblog:entries}

In the code above, “{photo}” is the name of my custom File upload field. I’m uploading huge digital camera pics, then scaling a web version at 600 or 700 px; that’s the “thumb” created by the File extension upload (“{file_thumb_url}” according to Huot’s File docs). Then I want to create a much smaller true thumbnail (100px), which is what I’m trying to do with Image Sizer. But the Image Sizer tags don’t get parsed. The above code will give me my title and photo_caption text fields, but no image at all.

I’m creating a custom photo gallery with a Weblog, by the way, because it needs to be searchable and more flexible than the Gallery module. What I’m trying to arrive at with the code above is a typical Gallery overview of small thumbnails. Then I’ll probably do a jQuery lightbox for displaying my 700px “thumbs” created with the File upload.

Can you help with a working syntax example? Beyond that, is this whole strategy the right approach to using these two plug-ins together? Thanks.

This often happens: I submitted the post, went back and hurled myself at it once again, and managed to dope it out – or at least most of it. It seems the act of formally asking a question helps you answer it – sometimes, anyway.

It turns out that you need to do two things I wasn’t doing: surround each call for File extension data with the File custom field name tag inside the Image Sizer tag, and you also need to put the File tags in quotes.

So… this code almost works perfectly:

{exp:weblog:entries weblog="photo_library" limit="20}
<h3>{title}</h3>
{exp:imgsizer:size src="{photo}{file_thumb_url}{/photo}" width="120" alt="{title}" title="{title}" id="{photo}{file_name}{/photo}" class="photo-thumbnail"}
{photo_caption}
{/exp:weblog:entries}

I say “almost” because I do not get my “{photo_caption}” field, which is simply a normal textarea field in my field group (it happens to be formatted with Textile, but I don’t think that makes any difference). It seems that for some fields, Image Sizer kills further processing of the exp:weblog:entries routine. The code above gives me the literal curly-braced name of the field in my HTML, unparsed.

If I remove the Image Sizer line altogether, for testing, I get my properly parsed EE photo_caption field.

But a weirdness: If I leave the Image Sizer line as it is above, but substitute {title} for {photo_caption}, I get a proper rendering of the standard EE title field. It works with title, but not with my own defined textarea called {photo_caption}. I know I’ve got the spelling right; as I say, the caption comes in fine if I take out the Image Sizer line.

Any thoughts?

Does anyone have thoughts on this problem I noted above with the Image Sizer plugin sometimes killing the parsing of custom field names inside an EE entries tag?

I’m getting literals like “{photo_caption}” in my output when the call to Image Sizer is present. Actually, if the custom field is referenced before the Image Sizer call, I don’t even get the literal output.

But as I said above, if I change one of those field names to “{title}” (a standard, not custom, field) it works after the call to Image Sizer, whether above or below the Image Sizer call.

It’s preventing me from including my caption field both in a thumbnail overview of a photo gallery done as a weblog, and in lightbox photo display done with jQuery Lightbox. Thanks.

I’m having the same problem. Did you manage to fix yours, Spacewalk?

Yes, I fixed it, but I’ve been so busy fixing it that I haven’t had time to follow up.

The short answer: The problem is not Image Sizer at all, it’s Mark Huot’s File extension. If you call File using its tag pair, it kills parsing of custom fields. If you call File with its single tag form, it doesn’t kill parsing of custom fields.

The real-world impact is that you can’t use File to create a reduced “thumbnail” size of your upload if you also want custom text fields, because you won’t be able to call that thumbnail with File’s tag pair syntax and still get your custom fields.

Example: Let’s say your custom “File” upload field is named “photo” and you have another custom text field called “photo_caption”. This call to Image Sizer works fine:

{exp:imgsizer:size src="{photo}" width="70" height="70" alt="{title}" title="{photo_caption}"}

But if you had depended upon File to create a smaller version for you, then you would have had to use File’s tag pair syntax to get the thumbnail:

{photo}{file_thumb_url}{/photo}

and that would kill parsing of custom fields on your weblog form, so {photo_caption} would not output its value.

So what’s the actual method? You need to upload your hi-res image with File, and set File to “Do Not Resize”. Then, to get your smaller versions for the site, you need to use either Image Sizer, or a PHP script like phpThumb or Smart Image Resizer.

I prefer Smart Image Resizer over phpThumb, but they both do roughly the same thing. Actually, I prefer the EE plugin Image Sizer over both of them (noticeably faster), but I can’t get Image Sizer’s syntax to work inside the quotes needed for an href attribute of an HTML anchor tag. (Anybody?)

So I’m using Image Sizer for the HTML img tag inside the anchor (the small thumbnail of a photo gallery), and Smart Image Resizer for the href attribute of the anchor itself (the larger image you get when you click the thumbnail).

To wrap it up, if you have a hi-res image that you uploaded with File in a custom field called “photo”, here’s the full code for making a 70-pixel clickable thumbnail that links to a 600-pixel display version of that hi-res image:

<a href="/inc/image.php?width=600&height=600&image={photo}" title="{photo_caption}">{exp:imgsizer:size src="{photo}" width="70" height="70" alt="{title}" title="{photo_caption}"}<span class="caption">{title}</span></a>

You see Image Sizer inside the anchor tag, creating the HTML img tag. For the href attribute, you see “/inc/image.php?” followed by parameters. That’s the call to Smart Image Resizer, which I have sitting in an “inc” directory.

Clear?

Woah. OK I see what you’re saying. I guess you got it working in your way.

After tried and gave up I posted here, then (as so often happens) I gave it another try, and I got this working:

{exp:weblog:entries weblog="{embed:weblog}" limit="1" orderby="page_order" sort="asc"}
    {image_custom_field}

    {exp:imgsizer:size src="{file_url}" width="550" }
        <a href="http://{sized}">_    {/exp:imgsizer:size} __    {exp:imgsizer:size src="{file_url}" width="150" }_        {sized}_    {/exp:imgsizer:size} _    </a>
     {/image_custom_field} 
{/exp:weblog:entries}

Basically even though I was within an {exp:weblog:entries} loop, I put another one in, and it seemed to work. Without it, it fails.

Then used two img sizer tag pairs for the two different sizes of images.

I did get another buy whereby it was showing an image from another custom variable I was using in a loop above it (why? I don’t know) but I removed that problem by using a counter in the loop.

Weirdness.