hak_article_image

mrjysta · 2009-01-27 00:39:50

Hi, trying to create thumbnail link with a class applied to the image. I have used the following code but when I check my source there is no class applied to the <img> tag/
<div class=“pfilebox”><txp:hak_article_thumb class=“pfilepic” limit=“1” link=“1” linktype=“page”/></div>

hakjoon · 2009-01-27 18:16:08

The class gets applied to the wraptag, so that it’s standard across other tag implementations. If you need to apply the class to the image you need to use a form.

<txp:hak_article_image limit="1" form="article-image" />

then in the article-image form do

<txp:hak_article_image_link type="page"><txp:hak_thumbnail class="pfilepic" /></hak_article_image_link>

Hope that helps. I want to update teh plugin to not need forms but work as a container like the tags do in TXP now.

mrjysta · 2009-02-02 15:43:28

Thanks for the help hakjoon. In my main page i’m already using:
<txp:article limit“50” form=“bass_mainThumbs” />
This populate a series of div’s that contain the profile image of each article upto 50 articles.

I have now changed my forms to:

bass_mainThumbs:
<div class=“pfilebox”><txp:hak_article_image form=“alt_form” limit=“1”/></div>

alt_form:
<txp:hak_article_image_link type=“page”><txp:hak_thumbnail class=“pfilepic” /><txp:hak_image_alt wraptag=“h3” class=“indent” /></txp:hak_article_image_link>

This now renders exactly what I want, But how do I select a particular image from the article to use as the thumbnail? I would assign the chosen image a category but how do I reference that category from my forms???

Last edited by mrjysta (2009-02-02 18:16:10)

hakjoon · 2009-02-02 19:05:25

Unfortunately the plugin does not give you that much control, you can however you can use the offset and limit options to pull a specific image, so for example if you have article images 2,3,7,9,4 you can use offset=3 and limit =1 to use image 7.

Does that make sense? Limiting by category would be a nice feature though, I’m going to investigate adding that.

mrjysta · 2009-02-02 19:18:33

Yeah that would be super useful !!! Indexing like you say would be OK but if you need to select a particular image from an articles image list across 50 or more articles selecting by category becomes a much quicker solution.

qrayg · 2009-02-18 20:00:41

hakjoon wrote:
Limiting by category would be a nice feature though, I’m going to investigate adding that.

+1 for category selection feature.

Last edited by qrayg (2009-02-18 20:01:07)

lous · 2009-05-23 13:21:53

Does it also works with lightbox?
Im using for my article images directlinks, like http://www.textpattern.com/image.jpg and not only image.jpg

Thanks

hakjoon · 2009-05-24 17:56:49

Currently it won’t work with lightbox out of the box for non image ID article images. It doesn’t pass the rel and class attributes along for that as it’s considered an exceptional case and it just renders an image tag. I’ll log this as a change to a future version.

In the meantime the plugin could easily be modified to hard code out rel=“lightbox” for non image ID cases. Just look for $out[] = '<img src="'.$id.'" alt="" />'; and modify the image tag code approrpiately.

catnip · 2009-06-02 16:52:24

Hi Patrick,

I’m using the plugin in an article form to link to images, but want these links to be tracked by Google Analytics, which by default only tracks actual pages.
Google indicates here that tracking for linked files can be achieved by manual addition of the following code structure to each file:
<a href="http://www.example.com/files/map.pdf" onClick="javascript: pageTracker._trackPageview('/downloads/map'); ">

Is there any trickery that will allow me to include the javascript in the form? (I’m not a programmer – Just know how to cut and paste)

This is the form I’m using:

<li><br/>
<div id="title"><txp:title /></div>
<txp:excerpt />
<txp:hak_article_thumb link="1" linktype="image" linktitle='txp:caption' />
</li>

Thanks.

hakjoon · 2009-06-02 19:19:11

The simplest thing I can think of is to use pages for the images, like this:

1. create a section called image or photo or something (doesn’t really matter what it’s called)

2. Use a really simple Page for that section that has either a <txp:image_display /> tag or a <txp:hak_article_image urloverride="1" /> tag (note the urloverride ), so it would look something like this.

<!doctype>
<html>
<body>
<txp:hak_article_image urloverride="1" />
//Google analytics code
</body>
</html>

this should give you a very minimal page that will display the image.

3. Change you linktype to section and set the section attribute to the section you created in step 1.

<txp:hak_article_thumb link="1" linktype="section" section="image" linktitle='txp:caption' />

this should visually be indistinguishable from just a plain image link but you can get the google analytics tracking. Would that work? Otherwise I think you’d have to hack the code that builds the link at the moment.

Another option would be to attach the onclicks on page load using Javascript. This is not tested and so no guarantees that it will work. Uses jQuery

$(document).ready(function() {

$("a:link").click(function() {
  var img_path = this.href;
  var file = img.path.split('/').pop().split('.').reverse().pop(); 
 var trackpath = '/downloads/' + file;
pageTracker._trackPageview(trackpath);

});
}

this will probably need tweaking so it might not be the best bet if you don’t know JS.

Wet_Sponge · 2009-06-04 08:42:37

I have been attempting to have a text link open an article image on my site; snackondesign.com

The roll over captions prevent the user from clicking on the image, which in turn prevents the possibility of the thumbnail expanding with lightbox. I have therefore provided a hyperlink which I had hoped would look like this;

<div class="tinycaption"><p><a href=http://snackondesign.com/images/63.jpg rel="lightbox">Expand +</a></p></div>

I am wondering if there is any way to manipulate <txp:hak_article_image_link > to fetch the correct article image automatically, displaying html as above, so that it can be expanded with light box. I would appreciate any assistance, apologies if i haven’t been clear.

hakjoon · 2009-06-04 14:42:18

From looking at your markup you should be able to just do.

<txp:hak_article_image form="link_expand" />

than in the link_expand form do

<txp:hak_article_thumb />
  <div class="tinycaption">
      <p>
          <txp:hak_article_image_link linktype="image" rel="lightbox" class="light-box-expand">Expand+</txp:hak_article_image_link>
      </p>
  </div>

that should work.

Textpattern CMS

Textpattern CMS support forum

#241 2009-01-27 00:39:50

Re: hak_article_image

#242 2009-01-27 18:16:08

Re: hak_article_image

#243 2009-02-02 15:43:28

Re: hak_article_image

#244 2009-02-02 19:05:25

Re: hak_article_image

#245 2009-02-02 19:18:33

Re: hak_article_image

#246 2009-02-18 20:00:41

Re: hak_article_image

#247 2009-05-23 13:21:53

Re: hak_article_image

#248 2009-05-24 17:56:49

Re: hak_article_image

#249 2009-06-02 16:52:24

Re: hak_article_image

#250 2009-06-02 19:19:11

Re: hak_article_image

#251 2009-06-04 08:42:37

Re: hak_article_image

#252 2009-06-04 14:42:18

Re: hak_article_image

Board footer