I've used the Core Concepts - Gallery tutorial to create a page to upload images with three
thumbnail sizes:

- Main image (960px height)
- Thumbnail (150x150px, enforce_max='1')
- Big thumbnail (960x960px)
- Small thumbnail (480x480px)

The reason for this is to have the option available to sort of 'crop' the main image to a square version and have the ability to recenter the cropped version without losing the main one.
The images I'd like to show on the frontend are the big & small thumbnail versions.

I'd like to have the image upload on a seperate page because this is such an easy way to upload, preview and categorize images.

When I'm on a different page with an editable type='image' on it and try to select one of the uploaded images by 'browse server' only the main image is visible in KCFinder. Is there a setting in KCFinder available to show all images including the thumbnail versions -960x960.jpg and -480x480.jpg when browsing the server?

[KK]

Hi Gizmo,

KCFinder ignores all thumbnails in its listing - that, I'm afraid, is hardcoded and is not configurable.

I've managed to create a workaround by using dynamic='opt_values'
It's 90% what I want but without image preview and alt-tag.

This is how I did it:

First I created a photo_uploader.php file, nothing special just like the Core Concepts - Gallery tutorial with two extra editable type='thumbnails' added. As already said this is the nicest and easiest way to upload all your images and have them stored in one place.

Then I created a new page with a group called Photo Collage and in it four editable regions like so

Code: Select all

    <cms:editable name='photocollage' label='Photo Collage' type='group' />
        <cms:editable
            name='collage_image_1'
            group='photocollage'
            label='Photo 1'
            opt_values='image_select_big.html'
            dynamic='opt_values'
            type='dropdown'
        />
        <cms:editable
            name='collage_image_2'
            group='photocollage'
            label='Photo 2'
            opt_values='image_select_small.html'
            dynamic='opt_values'
            type='dropdown'
        />
        <cms:editable
            name='collage_image_3'
            group='photocollage'
            label='Photo 3'
            opt_values='image_select_small.html'
            dynamic='opt_values'
            type='dropdown'
        />
        <cms:editable
            name='collage_image_4'
            group='photocollage'
            label='Photo 4'
            opt_values='image_select_small.html'
            dynamic='opt_values'
            type='dropdown'
        />

Next I created two files image_select_big.html

Code: Select all

Select your image =-
<cms:pages masterpage='photo_uploader.php' orderby='page_name' order='asc'>
   | <cms:show k_page_title  />=<cms:show gg_image_big  />
</cms:pages>

and image_select_small.html

Code: Select all

Select your image =-
<cms:pages masterpage='photo_uploader.php' orderby='page_name' order='asc'>
   | <cms:show k_page_title  />=<cms:show gg_image_small  />
</cms:pages>

...and saved them into the snippets folder.
The only thing left to do was to add the variables to the frontend

Code: Select all

<div class="align-center">
   <div class="col-lg-12 col-md-12 col-sm-12 no-padding">
      <div class="col-lg-6 col-md-6 col-sm-12 no-padding">
         <img class="about-half-img" src="<cms:show collage_image_1 />" alt=""/>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 no-padding">
         <div class="col-lg-6 col-md-6 col-sm-12 no-padding about-image-block">
            <div class="table">
               <div class="table-cell lead">
                  This works just beautiful!
               </div>
            </div>
         </div>
         <div  class="col-lg-6 col-md-6 col-sm-12 no-padding">
            <img id="img_id" class="about-one-forth-img" src="<cms:show collage_image_2 />" alt=""/>
         </div>
         <div class="col-lg-12 col-md-12 col-sm-12 no-padding">
            <div  class="col-lg-6 col-md-6 col-sm-12 no-padding">
               <img id="img_id" class="about-one-forth-img" src="<cms:show collage_image_3 />" alt=""/>
            </div>
            <div  class="col-lg-6 col-md-6 col-sm-12 no-padding">
               <img id="img_id" class="about-one-forth-img" src="<cms:show collage_image_4 />" alt=""/>
            </div>
         </div>
      </div>
   </div>
</div>

It would be much appreciated if someone can come up with a solution to show a preview image instead of the Title and a way to add an alt-tag to the image (f.i. the k_page_title of the image).