0

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} 
  • Could you post an example of exactly how you are replacing the <img> tag with the CE Image tag? I believe CE Image can be used as a single tag or as a tag pair.. – jrothafer Aug 10 '15 at 1:01
  • That is the problem. I don't know what to do. You can do a tag pair but I do not know how to set it up. with this code. – seeingis Aug 10 '15 at 16:19
0
+100

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}
| improve this answer | |
  • I need to size the {grid_gallery:pop_up_photo} and the {grid_gallery:small_photo}. Its a Fancybox lightbox gallery. Also I don't understand the {made}. – seeingis Aug 10 '15 at 16:55
  • @seeingis I've updated my answer. – jrothafer Aug 10 '15 at 17:09
  • awww no bounty :( – jrothafer Aug 11 '15 at 11:50
  • Seriously, it's fine if you feel I don't deserve the bounty, but what are you trying to say by the previous code comment? I can try and help if you're saying it's not working... – jrothafer Aug 12 '15 at 12:07
  • Heeelllloooooooo? – jrothafer Aug 13 '15 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.