CE Images and Grid with Fancybox

Question

I want to add CE Image to this gallery, its a fancybox light box gallery. The code below works fine, but every time I try to add CE Images, it breaks. How do I but CE image in this code?

This code works fine, how do I integrate {exp:ce_img:single src="{grid_gallery:pop_up_photo}" width="600" crop="yes"}

There is two instances of photos.

  {exp:channel:entries channel="photo_gallery" }
  <div class="span12">
  <h2 class="title-divider"><span>{title}</span></h2>
  </div>

    <!-- Photo Gallery -->

        {grid_gallery}

        <div class="span3 gallery img-portfolio">   
        <a href="{grid_gallery:pop_up_photo}" class="thumbnail img-hover" rel="image" title="{grid_gallery:caption}" >
        <img class="img-responsive zoom-image" src="{grid_gallery:small_photo}"> </a>
        </div>

         {/grid_gallery}

         {/exp:channel:entries} 

Answer 1

Here is an example from the CE Image user guide (http://www.causingeffect.com/software/expressionengine/ce-image/user-guide):

<a href="{grid_gallery:pop_up_photo}" class="thumbnail img-hover" rel="image" title="{grid_gallery:caption}" >
    {exp:ce_img:pair src="{grid_gallery:small_photo}" max="100"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}
</a>

This example would convert your image to have a maximum width and maximum height of 100 pixels. CE Image also caches files (I believe), so it wouldn't do the image resize every time, just whenever the image changes. If you are having issues getting this plugin to work, first verify that it is installed. Visit this page in your Control Panel:

Your Website -> CP Home -> Add-ons -> Plugins

And make sure you see CE Image listed there. You also need to make sure some paths are created and have the correct permissions to use this plugin:

http://www.causingeffect.com/software/expressionengine/ce-image/user-guide/installation

That link will guide you if you're still having issues. Lastly, your best option to figuring out this plugin, is to play with it! Create a template that only SuperAdmins can see, and test it out! Try something like this:

{exp:ce_img:pair src="https://ellislab.com/asset/css/img/logo.png" width="200" height"400"}
    <img src="{made}" alt="" width="{width}" height="{height}" />
{/exp:ce_img:pair}

Edit You don't need two images anymore! Just one!

<a href="{grid_gallery:pop_up_photo}" class="thumbnail img-hover" rel="image" title="{grid_gallery:caption}" >
    {exp:ce_img:pair src="{grid_gallery:pop_up_photo}" max="100"}
        <img src="{made}" alt="" width="{width}" height="{height}" />
    {/exp:ce_img:pair}
</a>

Assuming {grid_gallery:pop_up_photo} is your full sized image, what the previous code block does is link to your full size image (the anchor tag), and puts a thumbnail img tag inside that anchor. The {made} tag is a link to the new, converted, and in this case, shrunken image. The {width} and {height} tags come from whatever you set them as (in this case, since we set a max parameter, CE Image will scale it down until neither width or height is above 100 pixels).

If you wanted to generate guaranteed width and height thumbnails, you would just set those parameters instead of max:

{exp:ce_img:pair src="{grid_gallery:pop_up_photo}" height="128" width="64"}
    <img src="{made}" alt="" width="{width}" height="{height}" />
{/exp:ce_img:pair}