Topics

1

Mods & Plugins (Requests & Discussions) / [MOD REQ] Adding a portfolio/showcase section AKA "Featured Images"

« on: March 07, 2006, 06:28:48 PM »

I have been tinkering with this idea for a while. The problems is that I have 4000+ images on my site and everybody is so busy these days that they wouldn't have the patience to see more than a few categories. I want to show them my most impressive shots and hopefully give them enough incentive to dig deeper.

My idea is to add a separate "Portfolio" section where I will display my most impressive work. A few points in this direction:

• No point duplicating images from /data. Probably it would be best to use a new table to store the image_ids of the selected shots and keep a separate hit count/vote count/rating. Comments/descriptions can be taken from the current images table.
• Ideally add an option to "Add this image to portfolio" when logged in as an admin and looking at a picture
• For each picture in the portfolio, add a link to the originating category
• ...?

If people have further suggestions/ideas, please comment here. Also, if somebody with more PHP skillZ than me is interested in picking this up, it would be awesome. Otherwise I may be able to hack together something but it will be ugly.

2

Mods & Plugins (Requests & Discussions) / [MOD] (Simple) Go to next/previous picture by clicking on imagemap

« on: January 30, 2006, 03:23:20 PM »

This is my first mod, be gentle.

Under the current setup to get to next/previous image you have to click on the link at the upper right/left corner or wherever your template puts it. I am proposing using an imagemap on the image itself to do the same thing. It allows the user to flip through the pictures faster, because they don't have to move the mouse 

Files to modify:
/includes/functions.php
/templates/<Your template>/details.html
/templates/<Your template>/jpg.html

Lets get started.

Step 1.
Backup everything!

Step 2.
Open functions.php

Find

Code: [Select]

    $site_template->register_vars(array(
      "media_src" => $media_src,
      "media_icon" => $media_icon,
      "image_name" => $image_name,

Insert after

Code: [Select]

      "third_width" => $width/3,
      "third_height" => $height/3,
      "two_thirds_width" => 2*$width/3,
      "two_thirds_height" => 2*$height/3,
      "category_index_url" => $site_sess->url(ROOT_PATH."categories.php?".URL_CAT_ID."=".$cat_id),

If everything is correct, the code immediately after should look like this

Code: [Select]

      "width_height" => $width_height,
      "width" => $width,
      "height" => $height,
      "iptc_info" => $iptc_info
    ));
If it isn't, don't worry about it too much, but do let me know what it looks like so that I can change the instructions accordingly.

Step 3.
Open details.html and insert immediately after

Code: [Select]

{header} the following snippet:

Code: [Select]

<!-- Allow navigation by clicking on the image -->
<div><map name="ee_multiarea" id="ee_multiarea">

<area
shape="rect" coords="0,0,{third_width},{height}"
{if prev_image_url}
  alt="Previous photo" title="Previous photo"
  href="{prev_image_url}"
{endif prev_image_url}
/>


<area
shape="rect" coords="{two_thirds_width},0,{width},{height}"
{if next_image_url}
  alt="Next photo" title="Next photo"
  href="{next_image_url}" style="cursor: e-resize;"
{endif next_image_url}
/>


<area
shape="rect" coords="{third_width},0,{two_thirds_width},{height}"
{if category_index_url}
  alt="Thumbnail page" title="Thumbnail page"
  href="{category_index_url}"
{endif category_index_url}
/>
</map></div>
Step Last.
Open jpg.html and change it from

Code: [Select]

<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} ><br />
into this

Code: [Select]

<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} usemap="#ee_multiarea" /><br />
If your file is different, just insert

Code: [Select]

usemap="#ee_multiarea" before the closing if the <IMG ... > tag.

This creates an imagemap on the pictures. Clicking on the left third will take you to the previous picture, the middle third takes you to the category page with the thumbs, and the right third takes you to the next picture.

If you are in the mood for experimenting, you can also use {third_height} and {two_thirds_height} to define some really sophisticated maps, but I prefer to keep it simple.