Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2016-03-15 15:54:26

pexman
Member
Registered: 2016-02-27
Posts: 60

thumbs linked to an article if article exists

With css I built a thumbslider. Later I succeeded automatic thumb-link to an existing article. I remember that the id of the image had to be the same as the article. Continue Coding my site I lost the form and now I have the links on the thumbs to their images.


<!--         APP  start        -->
<div class="container_h">
<txp:php>global $fotos; $fotos = array();</txp:php>
<txp:asy_wondertag>
<txp:wet_for_each_image category="camgirls" 
        break="li" wraptag="ul" thumb="1" class="gallery-index" 
        sort="name asc">
    <txp:upm_image form="gallery-item" image_id="{id}" />
</txp:wet_for_each_image>
</txp:asy_wondertag>
</div>
<!--         APP end           -->

My question: I want have the thumbslider linked with every thumb to its images, but if there is an article you connect to this article. The code above shows the helper-plugins.
First row is making an array, second I integrate the plug-in wondertag. It covers the whole expression. The main plug-in following – wet_for_each_image – and to get the links I use the plug-in upm_image with the form gallery-item:

<a href="../images/<txp:upm_img_id />.jpg" title="<txp:upm_img_alt escape="html" />">
<img src="<txp:upm_img_thumb_url />"
  width="<txp:upm_img_thumb_width />"
  height="<txp:upm_img_thumb_height />"
  alt="<txp:upm_img_alt escape="html" />"  />
</a>
<txp:php>
global $fotos; $fotos[]=upm_img_id();
</txp:php>

All tries to built an if/else failed. Is there anybody with a good idea.

Offline

#2 2016-03-16 15:15:07

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: thumbs linked to an article if article exists

That should all be doable using the in-built tags nowadays. There’s no longer any need for asy_wondertag and upm_image and wet_for_each_image. That is now achievable with txp:images:

<div class="container_h">
<txp:images category="camgirls" break="li" wraptag="ul" class="gallery-index" sort="name asc">
  <a href="<txp:image_url />" title="<txp:image_info type="alt" />">
    <img src="<txp:image_url thumbnail="1" />"
         width="<txp:image_info type="thumb_w" />"
         height="<txp:image_info type="thumb_h" />"
         alt="<txp:image_info type="alt" />" >
  </a>
</txp:images>
</div>

That displays the thumbs with a link to the main image, like in your code.

To link thumbs to articles, you’d normally do it the other way around by placing the img ID# in the article_image field of the article. That also means you don’t have to match image id numbers with article id numbers (which I imagine severely limits the flexibility of your site).

Then you’d build your thumbnail slider using txp:article(_custom) and the article_image field. Something like this:

<div class="container_h">
<txp:article_custom category="your-cat" section="your-section" break="li" wraptag="ul" class="gallery-index" sort="title asc" limit="99">
<txp:if_article_image>
  <txp:images id='<txp:custom_field name="article_image" />'>
    <a href="<txp:permlink />" title="<txp:title no_widow="0" />">
      <img src="<txp:image_url thumbnail="1" />"
           width="<txp:image_info type="thumb_w" />"
           height="<txp:image_info type="thumb_h" />"
           alt="<txp:image_info type="alt" />" >
    </a>
  </txp:images>
</txp:if_article_image>
</txp:article_custom>
</div>

That loops over all articles in your-section and your-category (change as required), checks if an article_image has been specified, and if so outputs that thumbnail linked back to the original article. The line <txp:images id='<txp:custom_field name="article_image" />'> uses the number you put in the article_image field for the images tag. Using single quotes around an attribute is the txp-way of using tags for tag attributes = use the parsed content of this tag for the attribute.

If you really need to do it the other way around, i.e. to check if there is an article with the same ID# as the image ID#, try this:

<div class="container_h">
<txp:images category="camgirls" break="li" wraptag="ul" class="gallery-index" sort="name asc">
  <!-- reset variables, so the value from the last loop is not used -->
  <txp:variable name="has-matching-article" value="" />
  <!-- store the permlink of the article id that matches the current image id -->
  <txp:variable name="has-matching-article"><txp:article_custom id='<txp:image_info type="id" />'><txp:permlink /></txp:article_custom></txp:variable>
  <!-- was a permlink stored? -->
  <txp:if_variable name="has-matching-article" value="">
    <!-- no: use url for the large image -->
    <txp:variable name="img-link"><txp:image_url /></txp:variable>
  <txp:else />
    <!-- yes: use the url for the matching article -->
    <txp:variable name="img-link"><txp:variable name="has-matching-article" /></txp:variable>
  </txp:if_variable>
  <!-- build the thumbnail slide -->
  <a href="<txp:variable name="img-link" />" title="<txp:image_info type="alt" />">
    <img src="<txp:image_url thumbnail="1" />"
         width="<txp:image_info type="thumb_w" />"
         height="<txp:image_info type="thumb_h" />"
         alt="<txp:image_info type="alt" />" >
  </a>
</txp:images>
</div>

If I’ve not made a mistake, that should loop over every image in your category and links the thumbs to a corresponding matching article (with the same ID#), or if there is no such article, to the larger version of the image. It causes a new query per image, so is not very efficient, and you may want to use a caching plugin to reduce load on the server.


TXP Builders – finely-crafted code, design and txp

Offline

#3 2016-03-16 17:20:25

pexman
Member
Registered: 2016-02-27
Posts: 60

Re: thumbs linked to an article if article exists

Is it possible, are you the Lord of Textpattern-tags? I wish you a long, long life.

Your first coding impressed me for it don`t need any plug-ins to get an image-slider by categories. The second is realy useful for displaying all articles of a category by an image-slider. You have to named the custom_field in the settings and it works when I changed the name from article_image to article_pic, because in MySQL exist a field already named article_image.

But what I want to build is a slider, which displays all thumb-pictures of a category, linked by a larger image, but if this image was involved in an article, it should show this article.

And your third coding, I took without any changes in my template, works exactly in this way. Certainly the flexibility becomes more less, because you have always adjust the IDs of the image with the article in the database.

Thank you.

Offline

#4 2016-03-16 17:57:39

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: thumbs linked to an article if article exists

Why wouldn’t you replace

  <!-- store the permlink of the article id that matches the current image id -->
  <txp:variable name="has-matching-article"><txp:article_custom id='<txp:image_info type="id" />'><txp:permlink /></txp:article_custom></txp:variable>

with

  <!-- store the permlink of the article with article_pic matching the current image id -->
  <txp:variable name="has-matching-article"><txp:article_custom article_pic='<txp:image_info type="id" />'><txp:permlink /></txp:article_custom></txp:variable>

assuming you store article image ids in article_pic custom field?

Anyway, both will yield many sql queries as the number of images grows…

Offline

Board footer

Powered by FluxBB