Jump to content

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


Tech Support
 Share

Recommended Posts

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:

template_change.thumb.png.ee59ca840f459ee38825453ed21bad66.png

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.

 

  • Thanks 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...