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.

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:

Board footer