How can I cloak the image url, here is the source code I use to display image:

Code: Select all

<cms:if k_is_list >
            <div class="row box">
                <cms:pages folder=k_folder_name include_subfolders='0' limit='12' paginate='1' >
                    <div><a class="fancybox-thumbs fancybox-button" rel="fancybox" href="<cms:show gg_image />" title="<cms:show k_page_title />"><div class="thumbnailwrap sameheight2">
                        <div>
                            <img src="<cms:show grid_thumb />" class="img-responsive" alt="<cms:show k_page_title /> - <cms:show k_folder_title/>">
                        </div>
                        <span class="rollover" ></span>
                        <span class="text"><cms:show k_page_title /></span>
                    </div></a>
            </div>
                        
            <cms:paginator prev_text='previous' next_text='next' />
            
            </cms:pages>
      </div>
        
        <cms:else /><!-- k_is_page -->   
            <div class="text-center">
                 <img alt="<cms:show k_page_title /> - <cms:show k_folder_title/> " src="<cms:show gg_image />"  class="img-responsive" style="max-height:500px; width:auto; margin:0 auto;" />
                 <br>
                    <h1><cms:show k_page_title /> | <a href="<cms:show k_page_folderlink/>">view all <cms:show k_page_foldertitle/> products</a></h1>
                 
            </div> 
         
        </cms:if>

[KK]

You are seeing the link you specified with the <A> tag

Code: Select all

<a href="<cms:show gg_image />" >

Since that points to the physical image, we get to see its path. This is expected and normal behavior.

If we were to change the href to the page instead as follows, we'll see the page's URL instead.

Code: Select all

<a href="<cms:show k_page_link />" >

That said, I see that you are using fancybox so I'm not sure how that would behave with a page's URL as href instead of an image.

Would the cloak_url tag work for your purposes?
http://docs.couchcms.com/concepts/cloaked-links.html

Code: Select all

href="<cms:cloak_url link="<cms:show gg_image />" />"

@tim,

I tried cloak url, but it won't work, the links all mess up..

[trendoman]

That said, I see that you are using fancybox so I'm not sure how that would behave with a page's URL as href instead of an image.

This is something I solved today. I am showing an image with securefile in Lightbox-Fancybox

Code: Select all

<cms:show_securefile 'ref_image' >

  <img src="<cms:cloak_url link=file_id   />" alt="<cms:show file_name />"/>
  <div class="caption-overflow">
      <span>
          <a href="<cms:cloak_url link=file_id  />" data-popup="lightbox" 
             class="btn border-white text-white btn-flat btn-icon btn-rounded">

            <i class="icon-plus3"></i>
          </a>
          <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded ml-5"><i class="icon-link2"></i></a>
      </span>
  </div>
</cms:show_securefile>

The trick was to let fancybox know beforehand, that we are going to serve image.
A small change should have been introduced to corresponding JS, initiating the fancy-plugin. That solves it.

$(function() {

// Initialize lightbox
$('[data-popup="lightbox"]').fancybox({
padding: 3,
type:"image"
});

});

Some people suggested to add a filename to the end, but it didn't help me without the above solution. If you need it though, it can be constructed like this for securefile:

href="<cms:cloak_url link=file_id />&filename=<cms:show file_name />"