hak_article_image

<txp:hak_article_image /> is an enhancement to <txp:article_image /> it supports multiple images per article along with various ways of attaching links to the images. The article image field should contain one or more numeric image IDs separated by commas.

<txp:hak_article_thumb /> displays the image thumbnail(s) with an options to link the thumbnail in various different ways.

Attributes:

  • *limit*=‘x’ : Show only x number of images. Default is all images in the article image field.
  • *offset*=‘x’ : offset the first image shown by x images.
  • *link*=‘1’ : links the image in manner determined by linktype.
  • *linktype*=‘type’ : type of link to create. Options:
    • *image* : link to the full size image.
    • *page* : link to the current page passing the image id in a way that can be used by <txp:image_display /> or <txp:hak_article_image urloverride="1" />.
    • *section* : link to a specific section defined in the section attribute passing the image id in a way that can be used by <txp:image_display /> or <txp:hak_article_image urloverride="1" />.
    • *category* : link to the image’s category page or to a specific category defined in the category attribute passing the image id in a way that can be used by <txp:image_display /> or <txp:hak_article_image urloverride="1" />. Will also pass a category if present to the target page.
    • *section-category* : link to a specific section defined in the section attribute and to the image’s category page or a specific category defined in the category attribute passing the image id in a way that can be used by <txp:image_display /> or <txp:hak_article_image urloverride="1" />.
  • *section*=‘section name’ : section to link to when using linktype=‘section’ or linktype=‘section-category’ .
  • *category*=‘category name’ : category to link to when using linktype=‘category’, linktype=‘page’ or linktype=‘section-category’ .
  • *anchor*=‘anchor name’ : pass an anchor along with the link. Not available when using linktype=‘image’ because there would be no point.
  • *popup*=1 : makes the link open in a popup window. Only available when using link.
  • *popwidth*=‘integer’ : increase the popup window width by this much.
  • *popheight*=‘integer’ : increase the popup window height by this much.
  • *urloverride*=‘1’ : will override the image displayed with the image passed in the url by <txp:image_index /> or <txp:hak_article_image displaylink="1" />. Would normally be used along with limit=‘1’
  • *urlhide*=‘1’ : will not display the image if it matches the image being passed in with the url, by using linktype=‘section or page’ or <txp:image_index />
  • *rel*=‘attribute’ : passes a rel attribute to a link created by link=‘1’ useful for lightbox/thickbox fun.
  • *class*=‘classname’ : passes a class attribute to a link created by link=‘1’ .
  • *linktitle*=‘attribute’ : passes a title attribute to a link created by link=‘1’ also useful for lightbox/thickbox fun. Can accept any text or two special keywords:
    • *txp:caption* : inserts the image’s caption.
    • *txp:alt* : inserts the image’s alt information.
  • *form*=‘form name’ : allows you to use a form to control the image output. See below.
  • Both tags support the standard *break*, *wraptag*, *class* and *breakclass* attributes.

Using forms

<txp:hak_article_image /> also supports using forms to format how your article images are displayed. Forms also give you access to the image’s caption information. All the same attributes are available but they are distributed among different tags.

<txp:hak_article_image /> and <txp:hak_article_thumb /> control which images will be used. It takes the following attributes:

  • *limit*
  • *offset*
  • *urloverride*
  • *urlhide*
  • The standard *break* , *wraptag* , *class* and *breakclass* attributes.

Form Tags

<txp:hak_article_image_link /> creates a link with various options. Should be used as a container tag with an opening and closing tag. It takes the following attribues:

  • *type* same as *linktype*
  • *section*
  • *category*
  • *anchor*
  • *popup*
  • *popwidth* and *popheight*
  • *rel*
  • *title* same as *linktitle*
  • *class* same as *linkclass*

<txp:hak_image /> and <txp:hak_thumbnail /> displays either the full size image or the thumbnail. Accept a class attribute.

<txp:hak_image_caption /> displays the caption for the current image. Accepts the standard break, wraptag, class and breakclass attributes.

<txp:hak_image_alt /> displays the alt information for the current image. Accepts the standard break, wraptag, class and breakclass attributes.

Examples

<txp:hak_article_image />
Display all the article images — with no link
<txp:hak_article_image limit="5" />
Display a list of article images, up to a limit of 5
<txp:hak_article_image offset="1" />
Display a list of article images, but skips the first image
<txp:hak_article_thumb />
Display all the article thumbnails — with no link
<txp:hak_article_thumb link="1" linktype="image" />
Display the first article thumbnail with a link the full size version in a popup — same as old poplink.
<txp:hak_article_thumb limit="5" wraptag="ul" break="li" link="1" linktype="section" section="photos" />
Display up to 5 article thumbnails as an unordered list with links to the images in the photos section
<txp:hak_article_thumb limit="5" wraptag="ul" break="li" class="wrapclass" breakclass="breakclass" />
Display up to 5 article thumbnails as an unordered list with class of “wrapclass” on the ul and a class of breakclass for each li
<txp:hak_article_thumb limit="5" wraptag="ul" break="li" link="1" linktype="page" anchor="theAnchor" />
Display up to 5 article thumbnails as an unordered list with links to the same page using the anchor theAnchor. Ideally used with <txp:image_display /> or <txp:hak_article_image urloverride="1" limit="1"<
<txp:hak_article_thumb limit=5 wraptag="ul" break="li" attributes="id='theID'" />
Display up to 5 article thumbnails as an unordered list with an id of theID assigned to the ul

Deprecated options

These will still work but you should use the new options as they are more flexible

poplink – same as:
<txp:hak_article_image link="1" linktype="image" popup="1" />
displaylink – same as:
<txp:hak_article_image link="1" linktype="page" />

Acknowledgments

hak_article_image started as a simple extension to zem_article_image which allowed popup links for the thumbnails. While the current version barely resembles that original version Zem still deserves the credit for the original implementation and for getting me started working on plugins.

Also everyone on the forum who keeps coming up with new ideas for this.

Changelog:

ver 0.6 – released 3-16-07

  • First forms Implementation

ver 0.5.2 – released 11-01-06

  • fixes issues for ligh/thick boxes

ver 0.5.1 – released 11-01-06

  • made 0.5 actually work

ver 0.5 – released 11-01-06

  • added linktitle attribute

ver 0.4 – released 7-26-06

  • Almost full rewrite
  • Lots of new options, hopefully no new bugs
  • Limit now works differently, by default shows all images
  • Option to link to a section
  • Option to link to the image directly
  • Option to pass an anchor
  • Option to open all link types in a popup
  • Option to set rel attribute
  • Options to pad the popup window
  • Option hide image passed in the url
  • Option to have no link at all around image (useful for wrapping with permlink)

ver 0.3.3 – released 1-31-06

  • Fixed an issue when using limit and offset together.
  • Swicthed from split() to explode() since it’s supposedly faster.

ver 0.3.2 – released 9-10-05

  • Made tag work if url is supplied instead of id.
  • Removed some warnings when in debugging mode.

ver 0.3.1 – released 9-01-05

  • Fixed some logic glitches.

ver 0.3 – released 8-31-05

  • Added options to link to full size image on the same page. displaylink and urloverride

ver 0.2.2 – released 8-26-05

  • Removed reliance on old $pfr variable hopefully making it work properly in subdirectories.

ver 0.2.1 – released 8-24-05

  • Version 0.2 had some debugging code in it.

ver 0.2 – released 8-24-05

  • Changed wrapping functionality to use doWrap

ver 0.1 – released 8-23-05

  • initial release

Comments:

  1. Excellent plugin – thanks!
    Ross Harvey    Aug 31, 09:09 PM    #
  2. Excellent work. I was just wondering if there’s a way to modify the code so scrollbars can be set to “NO” on the full size image?
    — Tom Reno    Sep 26, 12:45 PM    #
  3. I’m currently using the built in Textpattern popup function, which has certain parameters pre-set. I might look into changing that for the next version.
    hakjoon    Sep 26, 03:48 PM    #
  4. Thanks for the quick response. This plug-in has been a real life saver…even with the scrollbars. I’ll live with them for now. Thanks again. : )
    — Tom Reno    Sep 27, 04:30 AM    #
  5. Keep suggestions coming. It makes it more worthwhile to do a new version if it will actually add things people want.
    hakjoon    Sep 27, 05:02 AM    #
  6. is there a way to display the caption of every image?

    great job, thanks!
    nico    Oct 20, 05:27 AM    #
  7. There is not currently a way to display the captions but it’s something I’m planning to work on for the next version. It involves setting up the plugin to use forms and I haven’t done anything like that yet so I have to do some research, but it should open it up for a lot more flexibility.
    hakjoon    Oct 20, 06:27 AM    #
  8. is there a way to remove border image?
    — dodi    Nov 21, 04:25 PM    #
  9. The plugin just creates a regular image tag optionally surrounded by a link. All you have to do is set your styles appropriately.

    a img {
    border:0;
    }
    hakjoon    Nov 22, 01:46 AM    #
  10. wow its work.. thanks man for quick response ..
    — dodi    Nov 22, 07:02 PM    #
  11. Hakjoon,
    Are you still planning a new version with the ability to display captions? You mentioned it in an earlier post…just curious. I could REALLY use that function.

    Thanks again for the great plug-in.

    Cheers,
    Tom
    — Tom Reno    Dec 21, 02:23 PM    #
  12. In the time since I released this Mary updated the tags that come included with upm_img_popper to include most of the functionality I was planning on adding. And it does do captions.

    I’ve been debating whether it is worth having two plugins that do almost the exact same thing. I’ve been thinking of expanding my plugin to be more general image tags because there is some stuff I want to do that there are still no tools for. Probably won’t really be able to start any work on it until the new year though, work unfortunately has me pretty busy lately.

    Wow, I really need to reformat these comments.
    hakjoon    Dec 22, 01:31 AM    #
  13. Hakjoon,

    Thanks so much for the quick reply…I’ll go check out the latest version of Mary’s plug-in.

    Cheers,

    Tom
    — Tom Reno    Dec 23, 03:01 AM    #
  14. Hello,

    I’ll tried to use your plugin with 6 images (1,2,3,4,5,6) and made 3 separate paragraphs like this :
    First part:
    < txp:hak_article_thumb limit="2" />

    Second part:
    < txp:hak_article_thumb offset="2" limit="4" />

    Third part:
    < txp:hak_article_thumb offset="4" limit="6" />

    it works! but it remains a peace of “wild tag” in the second paragraph:
    < img src="5,6" alt="" />

    Did you have an idea to solve it please? That will help me a lot with the power of your plugin!

    Thanks,
    fran├žois.

    f.pradignac    Jan 30, 11:01 AM    #
  15. There is a bug with the limit and offset settings being used together. This was pointed out to me before and I never fully got a chance to test it and fix it.

    I’ll release an update tonight. You’ll have to change your tags slightly, but it will make it behave as expected.

    hakjoon    Jan 31, 02:07 AM    #
  16. The freshly posted 0.3.3 update should eliminate the problems with limit and offset being used together.

    f.padignac: to do what you described with this new version you should do:

    First part:
    < txp:hak_article_thumb limit="2" />

    Second part:
    < txp:hak_article_thumb offset="2" limit="2" />

    Third part:
    < txp:hak_article_thumb offset="4" limit="2" />

    hakjoon    Jan 31, 11:17 AM    #
  17. Mary’s plugin is very buggy =( It doesn’t display popup images – just empty popup windows instead of them.

    Please, make caption support =)

    [CPR]-AL.exe    Apr 7, 10:03 AM    #