Display single image from an article

code365 · 2020-04-07 04:19:45

I am not sure if I am doing this right. I tried several image tags but nothing seems to work. Can some please help me understand what I am doing wrong?

Thank you

<txp:category_list parent='<txp:section />' exclude='<txp:section />'  wraptag="div"  break="" class="row">
<div class="col-lg-4">
    <figure class="product-item">
        <txp:category title="0" link="1">
        <txp:article_image />
        <figcaption class="product-title">
            <txp:category title="1" link="0" />
        </figcaption>
         </txp:category  >
   </figure>
  </div>
</txp:category_list>

Last edited by code365 (2020-04-07 14:24:51)

colak · 2020-04-07 05:44:02

Again, Let me see if I understand what you are trying to do. Please correct me if I am wrong.

You would like to have a series of images with their captions, each one linking to one particular image. If that is the case, I think that your code will not work as the category_list tag does just that, it looks for categories, not articles. One untested way I can think of to fetch the article_image from the latest article of a category is using:

<txp:category_list parent='<txp:section />' exclude='<txp:section />' wraptag="div" html_id="sidemenu" break="" class="row">
	<div class="col-lg-4">
		<txp:article_custom category='<txp:category />' break="" wraptag="" limit="1">
			<figure class="product-item">
				<txp:category title="0" link="1"><txp:article_image /></txp:category>
				<figcaption class="product-title">
					<txp:category title="1" link="0" />
				</figcaption>
			</figure>
		</txp:article_custom>
	</div>
</txp:category_list>

> Edited code

Last edited by colak (2020-04-07 06:24:44)

jakob · 2020-04-07 06:31:29

And another way would be to name an image the same as your category name:

in Content > Images change the name of your image to category-name.jpg.
In your code use <txp:image name='<txp:category />.jpg' /> to output that image.

colak · 2020-04-07 06:42:51

jakob wrote #322530:

And another way would be to name an image the same as your category name:

in Content > Images change the name of your image to category-name.jpg.

In your code use <txp:image name='<txp:category />.jpg' /> to output that image.

That is indeed a better idea! Here’s the code

<txp:category_list parent='<txp:section />' exclude='<txp:section />' wraptag="div" html_id="sidemenu" break="" class="row">
	<div class="col-lg-4">
		<figure class="product-item">
			<txp:category title="0" link="1"><txp:image name='<txp:category />.jpg' /></txp:category>
			<figcaption class="product-title">
				<txp:category title="1" link="0" />
			</figcaption>
		</figure>
	</div>
</txp:category_list>

code365 · 2020-04-07 13:00:58

You guys are awesome.

I renamed the image to category-name but nothing display. Could it be because I have all the images inside a folder and not outside.

In the image folder I have five images but one them would be the main image.

jakob · 2020-04-07 15:41:14

code365 wrote #322534:

You guys are awesome.

I renamed the image to category-name but nothing display. Could it be because I have all the images inside a folder and not outside.

If you’re not using Textpattern’s image panel to manage your images, you can just do a regular html img tag pointing to the image file named the same as your category in place of the Textpattern txp:image tag, e.g.

<img src="/path/to/your/image-folder/<txp:category />.jpg" alt="<txp:category title />">

Add width/height attributes as you need them.

colak · 2020-04-07 16:03:40

Are you using textpattern to upload the images?

code365 · 2020-04-07 16:36:45

Yes, I am using the txp image uploader but I put image in folders.

Anyway to show you a screenshot ?

Last edited by code365 (2020-04-07 18:16:59)

colak · 2020-04-07 17:03:00

code365 wrote #322538:

Yes, I am using the txp image uploader but I put image in folders.

So the images do not appear in the database and the txp interface right?

code365 · 2020-04-07 18:15:19

It’s uploading to the database because I see it in the Content->Images->then the folder I created for the images.

jakob · 2020-04-07 20:09:25

code365 wrote #322541:

It’s uploading to the database because I see it in the Content->Images->then the folder I created for the images.

If you can see them correctly in Content › Images, then the solution above using <txp:image name='<txp:category />.jpg' /> should work. If your image is not a jpg, then replace the jpg with png, gif or whatever your image is.
If it’s still not showing, have a look at the source code in your browser and see what the link to the image shows in the source code. Compare that with the correct link to the working image and that may help you find what’s not working as intended.

colak · 2020-04-08 04:44:57

code365 wrote #322538:

Anyway to show you a screenshot ?

Yes please! but also check Jakob’s post.

code365 · 2020-04-08 15:20:12

@Jakob I viewed the soure code in the browser, don’t see any string path from the image. Should it be <txp:image name=’<txp:category/>.jpg’/>

Could it be the version of txp (latest) I am using, maybe not. I look at the documentation for images tag.

I am using txp images upload tool.

Last edited by code365 (2020-04-09 03:59:13)

jakob · 2020-04-08 16:32:59

code365 wrote #322550:

@Jakob I viewed the soure code in the browser, don’t see any string path from the image. Should it be <txp:images name=’<txp:category/>.jpg’/>

In this particular case it should be txp:image not image*s* (i.e. without the ‘s’): maybe that’s the reason nothing’s showing for you?

Also, you mention having folders in Content › Images but I’m not aware of a way to do that. Under Admin › Preferences › Admin you can set your own folder name for all the images instead of using the standard ‘images’ folder. Did you mean that?
Or did you mean perhaps smd_thumbnail? The idea of that is to provide more than two sizes of the same image. If you want a particular size of that image, you’ll need to use <txp:smd_thumbnail name='<txp:category />.jpg' type="your-prenamed-thumbnail-type" />.

If that’s not what you mean, I am perhaps misunderstanding you. This is the step-by-step of the method I suggested:

Upload your image via the Content › Images panel (if not already done)
Edit the image and under Image name in the image information block enter your category name (not the title) exactly as you have it already saved, with .jpg on the end if it is a .jpg. Then save the changes to the image.
In your page template or form code, use what Colak suggested here.
Visit your page in the browser. Make sure you navigate to the right menu item where the image should show. Can you see it?
If it doesn’t, use the shortcut for your browser (as described here) to show the HTML source of the browser code. Have a look through it for the place where the image should appear.
- If it worked, you should see <img src="path/to/image/your-category-name.jpg"> at the place where it should appear.
- If the image is broken, you may see another path and may be able to work out why it’s working by comparing it with the working image link.
- If you get nothing, check your code is working first, by outputting some text instead of the image, e.g. “CATEGORY IMAGE HERE”. If that appears, your code logic is correct. If not, check that first.
- You can also try outputting <txp:image name='<txp:category />.jpg' /> at a place in your page template where no logic is involved to see if the image link is working.
- If you still have no luck, try setting the Production status under Admin › Preferences › Site to Debugging and see if you get any error messages that might help you further.

Apologies if I have backtracked too far here, but I am just trying to make sure we’re not talking at cross purposes.

code365 · 2020-04-08 19:38:50

@jakob Thank you bro for the information.

Before I read your post I tried the tag below with the name of the image. That worked
<txp:image name=“adirondack-chair-set.jpg” />

I will follow your instructions to track what is going on.

Textpattern CMS

Textpattern CMS support forum

#1 2020-04-07 04:19:45