CE Image not populating 'made' folder

Question

I'm struggling to get CE Image to work on my install. I'm on a Windows server and have made the 'images/made' and 'images/remote' folders and given full control to everyone to make them writable.

However, when I include the tag pair in my template, it's as if CE Image isn't doing anything. Here's my template code:

<?php
            if("{cf_recipes_size}" == "tiny" or "{cf_beers_size}" == "tiny")
            {
                $imgWidth   = "270";
                $imgHeight  = "270";
            }
            else if("{cf_recipes_size}" == "vert" or "{cf_beers_size}" == "vert")
            {
                $imgWidth   = "270";
                $imgHeight  = "540";
            }
            else if("{cf_recipes_size}" == "hori" or "{cf_beers_size}" == "hori")
            {
                $imgWidth   = "540";
                $imgHeight  = "270";
            }
            else if("{cf_recipes_size}" == "big" or "{cf_beers_size}" == "big")
            {
                $imgWidth   = "540";
                $imgHeight  = "540";
            }

            ?>



            {exp:ce_img:pair src="{cf_recipes_image}"}
                    <img src="{made}" alt="" width="<?php echo $imgWidth; ?>px"              height="<?php echo $imgHeight; ?>px" />
            {/exp:ce_img:pair}

I've turned on template debugging but there's nothing there to suggest that the directories can't be created. the URL generated from the {made} tag is just the source URL of the uploaded image (via a standard EE file control for a custom field).

The output is

<img src="/assets/desserts/orange.png" alt="" width="540px" height="540px" />

Any ideas why this isn't working?

Answer 1

Looking at your CE_Img tags you haven't told it what size to make your image and you have a weird mix of PHP and EE tags going on. This is most likely the problem.

You also don't need to be echoing out the width and height using PHP. CE_Img will create variables for both of these values. Just tell it what size you want your image using width, height, max_width, max_height parameters in the CE_Img tag pair.

Try this for starters...

{exp:ce_img:pair src="{cf_recipes_image}" allow_scale_larger="yes" max_width="540"}
    <img src="{made}" alt="" width="{width}" height="{height}" />
{/exp:ce_img:pair}

This will tell CE_Img to make a new image that has a maximum width of 540px (and implicitly, any height).

Taking your example I can deduce you wan't a different sized image based on some field values. The easiest way to do this would be with conditionals (using regular if:else EE tags or using something like Switchee)

{if "{cf_recipes_size}" == "tiny" or "{cf_beers_size}" == "tiny"}

    {exp:ce_img:pair src="{cf_recipes_image}" width="270" height="270"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}

{if:elseif "{cf_recipes_size}" == "vert" or "{cf_beers_size}" == "vert"}

    {exp:ce_img:pair src="{cf_recipes_image}" width="270" height="540"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}

{if:elseif "{cf_recipes_size}" == "hori" or "{cf_beers_size}" == "hori"}

    {exp:ce_img:pair src="{cf_recipes_image}" width="540" height="270"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}

{if:elseif "{cf_recipes_size}" == "big" or "{cf_beers_size}" == "big"}
    {exp:ce_img:pair src="{cf_recipes_image}" width="540" height="540"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}
{/if}

You may also find the crop parameter useful.

Answer 2

Step 1: Make sure you are passing parameters to CE Image

If no parameters are passed into CE Image, it will simply return the original image.

foamcow is right. You would want to make sure you are passing the desired width and height into CE Image, not simply outputting them in the HTML. Assuming your PHP Parsing Stage is set to "Input", this should work:

{exp:ce_img:pair src="{cf_recipes_image}" width="<?php echo $imgWidth; ?>" height="<?php echo $imgHeight; ?>"}
   <img src="{made}" width="{width}" height="{height}" alt="" />
{/exp:ce_img:pair}

or simply use the more succinct 'single' (as opposed to 'pair') syntax:

{exp:ce_img:single src="{cf_recipes_image}" width="<?php echo $imgWidth; ?>" height="<?php echo $imgHeight; ?>"}

Not that there is no reason to pass in 'px' in width or height attributes. That applies to both CE Image and the HTML img element.

Step 2: Check the template debugger for debug messages

CE Image outputs debug messages that detail what is happening when it runs. See the Debugging documentation for more information on how to utilize the debug messages.