Article Image

bici · Yesterday 23:41:18

I have the following code in my port_list form:

<txp:custom_field name="portfolio_filter" escape="" />
	<txp:article_image wraptag="p" class="img-fluid" alt=""/>
	  <div class="portfolio-info">
		<h4><txp:title /></h4>
		<p><strong>Role: </strong> <txp:excerpt /></p>  
  <a href="./images/2.png" title="<txp:title />" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>

every thing is working as expected but I cannot manage to add Txp tag code to replace the string ./images/2.png
I have tried various combo Txp tags but either the href link is malformed or it fails to correctly display the image.

I was thinking of using a custom form and manually type in the “./images/##.png” so that can I use <a href=”<txp:custom_field name=“image _link/>” title=”<txp:title />” etc. But perhaps there is a simpler option.

PS: The article image is always the same id as what I wish to add to the href area. i.e. image id 2 in this example and is displayed in a larger format when link is clicked (I don’t create thumbnails).

Last edited by bici (Today 00:16:18)

bici · Today 00:13:34

UPDATE.
I am trying out using a custom form as it seems like a good easy solution.
But I wonder why I am getting the actual string output as well as the directory is correctly output:

<a href=”<txp:custom_field name=“image _link/>” title=”<txp:title />”

in my custom field I have ./images/2.png

and the url / link is correctly rendered and I can click on the image link and it renders the image. But i also get the string ./images/2.png rendered on the page? How can I avoid that from happening?

this is the output

./images/2.png
<a href="./images/2.png" title="Sample Logo" data-gallery="portfolio-gallery-app" class="glightbox preview-link">

Last edited by bici (Today 00:17:56)

colak · Today 01:53:36

Hi bici,

I guess you are would like to add a lightbox to your site. Your list form appears to be incomplete as there are no closing tags for custom_field and article_image tags.
You can try

<txp:hide>add one or more comma separated ids in your article image</txp:hide>
<txp:variable name="image" value='<txp:custom_field name="article_image" />' />
<txp:images id='<txp:variable name="image" />'><a href="/images/<txp:image_info type="id" /><txp:image_info type="ext" /> title="<txp:title />" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><txp:thumbnail /></a></txp:images>

if you actually wish to use the lightbox I linked abobe use

<txp:hide>add one or more comma separated ids in your article image</txp:hide>
<txp:variable name="image" value='<txp:custom_field name="article_image" />' />
<ul class="box-container three-col">
<txp:images id='<txp:variable name="image" />'><li class="box"><div class="inner"><a href="/images/<txp:image_info type="id" /><txp:image_info type="ext" /> title="<txp:title />" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><txp:thumbnail /></a></div></li></txp:images>
</ul>

Edited to add that instead of title="<txp:title />" I would use alt='<txp:image_info type="alt" />' as it will provide the images their own distinct alt tags.

Last edited by colak (Today 03:27:06)

jakob · Today 11:47:55

colak wrote #342755:

if you actually wish to use the lightbox I linked abobe use

Just one addition here. In your code, you’re using a variable to hold the custom_field output and then using the variable to populate the id-attribute for txp:images. Strictly speaking, you could drop the variable and go straight to using the custom_field value as input for the id attribute, i.e.

<txp:images id='<txp:custom_field name="article_image" />' …

However, there is a good reason to use the variable: if no article image is specified, txp:images will output the 10 most recent images by default, which can result in undesired output that breaks your layout. You might find it prudent to wrap your txp:images tag in an if_variable to check it actually contains something. See the code below.

Edited to add that instead of title="<txp:title />" I would use alt='<txp:image_info type="alt" />' as it will provide the images their own distinct alt tags.

That’s right for an image, but this is a link that triggers the lightbox, so title would be a viable option here. This only affects the browser tooltip that shows when you roll over the thumbnail. The txp:thumbnail tag will output the image alt tag, if there is one.

If you want to show a visible image caption in the lightbox, the lightbox docs say you need to use data-glightbox="title: <txp:title escape="html" />" if you want your project title to show, or data-glightbox="title: <txp:image_info />" if you want the image caption to show in the lightbox:

<txp:hide>add one or more comma separated ids in your article image</txp:hide>
<txp:variable name="image" value='<txp:custom_field name="article_image" />' />
<txp:if_variable name="image" value="" not>
    <txp:images id='<txp:variable name="image" />' wraptag="ul" class="box-container three-col">
        <li class="box">
            <div class="inner">
                <a href="<txp:image_url />" title="<txp:title escape="html" />" class="glightbox preview-link"
                   data-gallery="portfolio-gallery-app" data-glightbox="title: <txp:title escape="html" />">
                    <txp:thumbnail />
                </a>
            </div>
        </li>
    </txp:images>
<txp:else />
    <!-- placeholder image for when no article_image is specified -->
</txp:if_variable>

and if you don’t want the lightbox caption, just omit the data-glightbox attribute.

bici · Today 17:23:34

thanks to you both. My big issue is that I was outputting the image title twice! (my eyesight is not what it used to be).

<txp:custom_field name="portfolio_filter" escape="" />
	<txp:article_image wraptag="p" class="img-fluid" alt=""/>
	  <div class="portfolio-info">
		<h4><txp:title /></h4>
		<p><strong>Role: </strong> <txp:excerpt /></p>  
		<p><strong>Date: </strong><txp:custom_field name="year" /></p>

<a href="<txp:custom_field name="imgid_url" />" title="<txp:title />" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>

the above code is now working perfectly! ( I think… I’ll know for sure once I load more images).

This is what is output.

Article Image is shown

on hover over the image the following text is revealed (A text block slides up over the bottom of the image)

  Sample Logo. <title>
   Role: Website Design / UI Design / Textpattern CMS ®   <THIS icon is a  +  within a magnify glass)
   Date: Jan, 2002

clicking on the ® shows the enlarged article image in a Lightbox affect with the <title> under the image.

I’ll be populating <txp:custom_field name="portfolio_filter" escape="" /> in my Write dashboard with one of three filters: filter-app , filter-product or filter-branding

this should gather the article outputs into three categories as a subset of say 10 images. So that the slideshow will gather (subset ) the articles by filter.

more to come.

Last edited by bici (Today 17:25:28)

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 23:41:18

Article Image

#2 Today 00:13:34

Re: Article Image

#3 Today 01:53:36

Re: Article Image

#4 Today 11:47:55

Re: Article Image

colak wrote #342755:

#5 Today 17:23:34

Re: Article Image

Board footer