Are Template Variables Reuable?

This is probably more about me understanding how Template Variables work than anything else.

What I want to do is to include an image into every post that I create. The image will be different for every post, which has me wondering if I need to set a new T.V. for every image, or can I reuse the same variable over for every new post? I’m reading the docs now but can’t find anything definitive so want to ask here first.

If I compare the builtin pagetitle variable, the variable content changes for each page but the variable name doesn’t. This is what I’m looking for as well; maybe a template variable I can assign the name of my image to and then have MODX call out the matching image from my filesystem. Am I correct on how this works?

Thanks!

Hi @z900s11

You are right - a single image TV should do what you need.

Each Resource that uses your Template will be able to have its own value for your image TV.

This is the way all TVs work.

I hope this helps.

Hi dejaya, thanks for the reply. I’m so glad I don’t have to create a T.V. for each new image.

Now I’m wondering how to handle the upload of the images. I’m on a local machine developing the UI so it’s easy for me to add an image to the filesystem, but when I go live, I guess I will need to use FTP for that because I don’t see a builtin uploader. Is there a package to handle the uploads for me?

Because, I’m guessing here, but the image would have to exist before I create the T.V, no?

Thanks again for all the help!

Frank

You would want to create your TV and under the tab Input Options, you can select Image as Input Type which will automatically generate an image selection window when using it in your resource. Also there is a built in Media Browser where you can upload images (you could also use FTP of course).

No, you can create the TV beforehand, as it doesn’t matter later, which image you will add in. See it as sort of a placeholder for you to input your image.

Hi VibeDesign. Thanks for the information and clarification! I can’t wait to try this when I get back home. If there isn’t anything the backend would be looking for (like wp), then FTP is plenty good enough for me. I’d rather not use a package if I don’t need one.

Thanks again!

vibedesign, I just looked at the code I have and I’m not sure this is going to work as expected.

The image I need to to change with every post is in the chunk. If the tag is chunked, then how do I change its value? I hope that makes sense. If the image were in the template, then I could see how a TV is useful, but a chunk?

What do you suggest in this case?

Check the menu on the left hand side, under Media should be anything you need to upload files directly from the manager.

It doesn’t matter if you place your TV tag within a chunk or directly in the template. If you place it within a chunk, you just have to make sure this chunk is also in the template you want your image to appear.


Let me try to give you an example. Say, your TV is called imageTV. Then you can either place it directly in your template, e. g.:

// template:
<div>
  <img src="[[*imageTV]]">
</div>

or you can have that TV linked within a chunk, which still has to be in the template:

// template:
<div>
  [[$imageChunk]]
</div>

// imageChunk:
<img src="[[*imageTV]]">

Either way, after you select your image from within your resource, the parsed output on the front end will be:

// page.html:
<div>
  <img src="/path/to/iamge.jpeg">
</div>
1 Like

Thank you for this, I saw the media browser but just noticed an upload icon at the top, very cool!

Thanks for explaining the T.V. but I’m still not clear on how it will know exactly which image to pull. I’m going based on the assumption that every post I make can have a different image attached to it. But how will the variable know which image on the filesystem to bring in? I haven’t told MODX what the filename is yet, and none of your examples show a filename, which is confusing me.

Just for clarity, in the chunk, imagine I have a box that will be looped over to draw my posts by getResources. Each box (chunk) will be on the index page for the reader to view, before they click on one of them. That box will have a pagetitle and my dynamic image that I’m looking to include. That is to say, the image I want to use, will not be in the article itself, but rather in the chunk that’s pulled out by getResouces. If you want, I can grab a screenshot if this isn’t clear.

Thanks again for the help.

Your actual image should be chosen through the resource (your article post).

To have it show up there, go either to your TV and under the tab Template Access check the template where your TV should be linked to (your article template) or you can go directly to the template for your articles and under the tab Template Variables you can select your imageTV to be available.

Then go to the resource tab, select one of your article resources that use the template you made the TV available like mentioned above and under Template Variables you should see your imageTV input field, where you get a popup to select your image from the media browser.

Again, you can’t have a TV outside of your articles resources while still needing it individually for each of them. The image for each TV has to be set through the resource of each article. Think of the image like of the title for the article (just a different type of data) - you would not change that separately from the resource either.

As you are using getResources, I’m sure you have a seperate resource for each article, right?

If so, follow the instructions mentioned above, again in short:

  1. create a TV, set input type to image
  2. link the TV to the template your blog posts use
  3. place the TV tag within your (getResources) chunk or directly in the template
  4. choose an image from the TV tab within the articles resource (where you would also change the title)

An additional note: if you want to get your image through a tpl chunk used in getResources, you have to add

&includeTVs=`1`

to your getResources call and also use a + instead of a * in your tags:

// chunk used in getResource &tpl property:

<h1>[[+pagetitle]]</h1>
<img src="[[+imageTV]]">
...

It’s absolutely possible to achieve what you want, but maybe I’m just not explaining it well enough. If you are still struggling, maybe share your template and chunk code, so we can assist you further.

Actually, no, I’m using one getResource and that’s inside of my chunk.

So, I should be using a different getResource for each article? And the getResource call goes in the chunk, or the template? Maybe this is the whole issue for me?

Thanks again for helping me out on this.

EDIT
I was able to get the image included in my chunk, thank you for the links. One more question about this if you wouldn’t mind.

If for example I have 2 different cars I’m blogging about; a Toyota and a Lexus. If I wanted to include a pic for each car, I should probably have to have 2 different, unique TVs. If I’m understanding correctly, then I can’t reuse/reassign the TV as I was alluding to in my original question. And each one of those variables should be pretty unique like, 2022LexusTV and 2022ToyotaITV.

Thanks again

I found a YouTube video on TVs and see a difference between what they demonstrate and what I am seeing in MODX 3.

In the video, you can see the child resource has a “Template Variables” tab. In my copy of MODX 3, there is no “Template Variables” tab under any of the child resources. If there was, it would make perfect sense how you can associate many values to a single variable. This is what I am having a hard time understanding.

Please see the screencap from the video showing the Template Variables tab under a child resource. The 2 screencaps are from my MODX system under my blog parent, but there is no Template Variables tab.

1





Is my dilemma a little more clear now?

did you create that TV under Elements and did you assign this TV to the used Template?

Creating a Template Variable - Template Variables | MODX Documentation

No, just one getResources call is fine. By “seperate resource for each article” I was refering to the actual article pages, meaning each of your article has its own resource, that is then called from one page where your getResources call is at (I’m assuming this is your blog template).

Yes, if you need multiple images on your article, you will need multiple TVs for this. Depending on the amount and flexibility you need there, this is where some Extras can be useful but I would recommend starting with this simple approach for now.

If there is no TV tab, you have no TVs assigned to the template your blog posts are using. Check which template is used for your articles and make sure the TVs you need are assigned. Like mentioned above, two ways to do this:

Here is a concrete example:

Let’s assume you have the following resources,

resource_tree

2 different templates (“Blog” and “BlogPost”) and a template Variable “imageTV”.

elements

The template Variable “imageTV” has an “Input Type” of Image, “Output Type” = Default and in the tab “Template Access” you select the template BlogPost.


Your resources “Blog Post 1” and “Blog Post 2” use the template BlogPost.

They have a tab “Template Variables” where you can choose a file for the “imageTV” template variable.


The resource “Blog” uses the template Blog. (There is no “Template Variables” tab, because no TV was assigned to this template.)

In the template Blog (or the content of the resource “Blog”) you can call the “getResources” snippet. If you use &includeTVs=`1`, you can then output the value of the “imageTV” template variable with the placeholder [[+tv.imageTV]]. (Always use the prefix tv. for template variables with “getResources”!)

[[getResources? 
    &parents=`[[*id]]`
    &tpl=`@INLINE <li><h2>[[+pagetitle]]</h2><img src="[[+tv.imageTV]]"></li>`
    &includeTVs=`1`
    &limit=`0`
    &tplWrapper=`@INLINE <ul>[[+output]]</ul>`
]]

Yes Bruno, under Elements and also yes, I did assign it to the used template. Unfortunately this did not help.

Yes, VibeDesign, it is my “blogTemplate”. Thank you for explaining that I would need a TV for every pic I want to include in a particular article. This makes sense to me.

Vibe, this is the whole issue I think. I have done exactly that and there is still no Template Variables tab even after I have made certain the correct access was given to the template.

Harry, thank you for the extensive writeup on how to do this, unfortunately, following it to the letter still yields no image being shown. All I get is the default image I set up for the variable but nothing else. As I explained above to VibeDesign, there is still no Template Variables tab, even after making CERTAIN that I’ve a checkmark next to the template that should have access to it. Maybe this has something to do with it being a Windows environment, I don’t know.

I should mention that after comparing what you show in your screenshots, the only difference I had was that my Output was set to “image” because I wanted to use a CSS class on the image, but even after setting that to Default as you suggested didn’t give me a Template Variables tab.

I’m going to take a couple days off from this. I’m just cooked. Thank you all for staying with me on this, and I’ll come back in a few days when I can think a little clearer. Again, thank you guys for all the help, it is genuinely appreciated.

Frank

When you’re editing a resource and it has no Template Variables tab, it can only mean one thing: No TV is connected to the resource’s template (you may have to scroll up to see the tabs).

Edit the Template used for the page, if the TV is connected to it, you should see the TV name on the Template Variables tab with an X in the checkbox.

I also use Windows to locally test things, and I never had such problems.

Hi Bob, thanks for the reply. And Harry, thank you. I appreciate your help with this. I can see the Template Variables tab now and I am able to create the TV and have it working. Here is what I did.

Following Harry’s step by step pictorial still did not give me the tab, no matter how many times I tried. One of my test posts had quotation marks in them and I noticed that they later became corrupted with these characters €œ. Then I noticed that even single quotes were corrupted as well.

I decided to wipe MODX completely along with the database then reinstalled MODX. When I went back in, by that time, I had done Harry’s pictorial so many times that I knew how to do it on my own. The first post I created, I was able to use a testTV in it and it worked flawlessly.

Question: I’m not that familiar with how the codebase is laid out or I would check myself, but are these quotes being encoded? To me, it looks like corruption may have been the culprit. I don’t know what else it could have been.