Hi,

I am facing a problem on creating photo gallery.

<cms:editable
name="gg_image"
label="Image"
desc="Upload your main image here"
width="500"
show_preview='1'
preview_height='200'
type="image"
/>

<cms:editable
name="gg_thumb"
assoc_field="gg_image"
label="Image Thumbnail"
desc="Thumbnail of image above"
enforce_max='1'
type="thumbnail"
/>

I pasted the code above, but for the thumbnail part, I have deleted width and height. If I set the width and height, my photo gallery won't be responsive anymore. If I set the width and height more than 115px, the admin panel's preview thumbnail image will be cropped.

ex, if I set width and height 115px, at the admin panel, I can see a perfect full picture of preview image. But the front-end thumbnail image also will be cropped to exact 115px, it does not suit for responsive design. Even if I set the image to fit 100%, the image will be enlarged to fit the space, image become really blur.

If I set 480px, the preview image in admin panel will be cropped. But the front-end thumbnail image fit for responsive layout.

I want to view a full picture of preview thumbnail image and get the image fit for front-end responsive thumbnail. Any solution for this?

hello nsy,

in the docs it says

The thumbnail region gg_thumb is used by Couch for displaying the image thumbnails in the admin panel as such it is not advised to modify the dimensions of it. You can always create another associated thumbnail region if you wish to use thumbnails of other dimensions.

So what I do for my galleries (lightbox with preview grid of square thumbnails) and I believe you need to as well is to create another associated thumbnail

Code: Select all

<cms:editable name="grid_thumb" assoc_field="gg_image" label="Thumbnail for display on grid on the Gallery page" desc="If necessary you can re-crop using the Recreate button below" width='275' height='275' type="thumbnail"  order='20'/>

The width/height will take care of the maximum possible size and give the correct dimensions. It will be responsive if you leave off the width/height in the HTML

Code: Select all

<img src="<cms:show grid_thumb />" alt=<cms:show k_page_foldertitle />

But if I set width and height 275px, in admin panel, the preview image will be cropped, right?
I am developing a responsive website right now, the thumbnail image are set to be 480 x302px. If I set the width and height with that value, in the admin panel, it only show part of the image, which has been cropped till I can't recognize what is the product in that picture.

Is it possible to make preview_height like couch did in gg_image.

<cms:editable
name="gg_image"
label="Image"
desc="Upload your main image here"
width="500"
show_preview='1'
preview_height='200'
type="image"
/>

[cheesypoof]

@nsy, I don't think you quite understood the implications of the documentation section which @potato quoted above.

The gg_thumb thumbnail region need only be used by the admin panel. Beyond defining it per the documentation recommendations, you can ignore it entirely in regards to what you are trying to accomplish on the front end. You are free to define as many thumbnail regions as you wish...

Your gg_image region is just fine -

Code: Select all

<cms:editable
    name           = 'gg_image'
    label          = 'Image'
    desc           = 'Upload your main image here'
    width          = '500'
    show_preview   = '1'
    preview_height = '200'
    type           = 'image'
/>

Define the gg_thumb region as the documentation suggests, so that you can see the full uncropped picture in the admin panel -

Code: Select all

<cms:editable
    name        = 'gg_thumb'
    assoc_field = 'gg_image'
    label       = 'CMS Thumbnail Image'
    desc        = 'Only used within the admin panel'
    width       = '115'
    height      = '115'
    enforce_max = '1'
    type        = 'thumbnail'
/>

Now you define the thumbnail region that will actually be used on the front end -

Code: Select all

<cms:editable
    name        = 'grid_thumb'
    assoc_field = 'gg_image'
    label       = 'Grid Thumbnail Image'
    desc        = 'Used on the front end'
    width       = '480'
    height      = '302'
    crop        = '1'
    type        = 'thumbnail'
/>

If I am correct in assuming that the markup you posted in another thread is related to this, then use grid_thumb instead of gg_thumb -

Code: Select all

<cms:pages>
    <li>
        <a class="titan-lb" data-titan-group="gallery-misc" href="#inline<cms:show k_page_id />" title="<cms:show k_page_title />"><img src="<cms:show grid_thumb />" /></a>
        <div class="pop-up" id="inline<cms:show k_page_id />" style="display:none;">
            <div class="pop-up-image"><img src="<cms:show gg_image />"></div>
            <div class="pop-up-description">description</div>
        </div>
    </li>
</cms:pages>

Right, just tested it. It worked. I guess I just really confused about this "gg_thumb" variable.

Thanks for anyone who replied. I am so new to this CMS, really appreciated your help. Thanks.