theme How to change album page to have unique image URLs and comments

[Tech Support]

KVS has built-in support for displaying single image pages from an album, as well as having separate rating and comments for them individually. This is not used in default theme behavior: every album page uses fancybox popup to show its big images, and rating / comments are calculated for the whole album.

For modifying theme to support individual image pages, please follow this guide.

Step 1. Open Website UI -> Pages -> View Album -> album_view block template for editing. Everything in this guide is changed in this template code.

 

Step 2. Find the iteration that renders links for big images that has the following code by default:

{{foreach item="item" from=$data.images}}
    <a href="{{$item.formats[$lang.albums.image_big_size].protected_url}}" class="item" rel="images" data-fancybox-type="image">
        <img class="thumb {{if $lang.enable_thumb_lazyload=='true'}}lazy-load{{/if}}" alt="{{$item.title|default:$data.title}}" {{if $lang.enable_thumb_lazyload=='true'}}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original{{else}}src{{/if}}="{{$item.formats[$lang.albums.image_small_size].direct_url}}" width="{{$item.formats[$lang.albums.image_small_size].dimensions.0}}" height="{{$item.formats[$lang.albums.image_small_size].dimensions.1}}">
    </a>
{{/foreach}}

NOTE: there are few more similar iterations on $data.images in this template that render cases when user has no access to album and can only view small thumbs, please skip them and only locate the one that renders links (A tags).

Remove data-fancybox-type="image" from links in this code and also change href attribute to the following:

<a href="{{$data.canonical_url}}?image_id={{$item.image_id}}" class="item" rel="images">

Also add the following block before this iteration to render big image:

<div>
    <img src="{{$data.image_info.formats[$lang.albums.image_big_size].protected_url}}" alt="{{$data.image_info.title|default:$data.title}}">
</div>

Here is screenshot that shows all changes:

Save the changes. Now you should be able to click on every album image and it will open this image in a new page. So each image will have its own unique URL.

 

Step 3. This step adjusts rating to show the rating of the displayed image instead of album rating. In all places of this template replace $data.rating_amount with $data.image_info.rating_amount, then also replace $data.rating with $data.image_info.rating. There should be up to 5 replaces in total by default.

 

Step4. This step adjusts block to display the total number of comments for the displayed image instead of the total number of all album comments. In all places of this template replace $data.comments_count with $data.image_info.comments_count.