Blog image help

33 Posts

bob-rooney Reply #1, 11 years, 3 months ago

This should be bread and butter stuff but for whatever reason I can't get a blog list to output the thumbnails associated with each post. As it stands a generic fall-back image should display for blog posts that don't have images. The problem is that this fall-back image displays for blogs that do have thumbnail images associated with them.

The blog is created using Articles and the images are managed with Cliche.

I have a thumbnail TV called [[*blogImage]] and in the Articles Container template I'm calling it like so:

<div class="image">[[*blogThumb:is=``:then=`<a href="[[~[[+id]]]]"><img src="[[*blogThumb]]" /></a>`:else=`<a href="[[~[[+id]]]]"><img src="assets/templates/default/img/generic_image.png" /></a>`	]]</div>

If tried multiple variations of the above code including the use of other output modifiers (isnotempty, ifempty) but the TV doesn't output. I just get blank space in the code where <a href="[[~[[+id]]]]"><img src="[[*blogThumb]]" /> should appear. I've ditched Cliche and used different TV output type (text, image, string etc.) in hopes that this would solve the issue. Alas this did not help.

I assume that I am dong something really dumb here with my call.
[ed. note: bob-rooney last edited this post 11 years, 3 months ago.]

1,572 Posts

Paulp Reply #2, 11 years, 3 months ago

It looks like your calling the images backwards, I can't cut and copy on here but try changing your image paths round. If that doesn't work try
[[+blogthumb:notempty=blah:else=blah]] ( with the back ticks I can't find on my ipad

33 Posts

bob-rooney Reply #3, 11 years, 3 months ago

Thanks for the quick reply Paulp. I've probably confused matters by putting up some wrong code in my opening post. This was one of the many desperate iterations I've made. To clarify I originally had the following (or some version of it)

<div class="image">[[*blogThumb:is=``:then=`<a href="[[~[[+id]]]]"><img src="assets/templates/default/img/logo_blog.png" /></a>`:else=`<a href="[[~[[+id]]]]"><img src="[[*blogThumb]]" /></a>`]]</div>

"If the TV is empty then pop in the default image if not use the data in the TV." Now that seems fine to me.

I've also tried your suggestion using notempty (I'm sure I've tried this already) and still nothing.

Even the following doesn't work:

<div class="image">[[*blogThumb:notempty=`<a href="[[~[[+id]]]]"><img src="[[*blogThumb]]" /></a>`]]</div>

I have set the TV input option to file and output option to default just in case there is some Cliche madness causing this but all I see is <div class="image"></div> in the source.

Added to the above, I've also swapped [[*blogImage]] for [[+blogImage]] both times it appears in the call.
[ed. note: bob-rooney last edited this post 11 years, 3 months ago.]

1,572 Posts

Paulp Reply #4, 11 years, 3 months ago

When you say it appears in the call, do you mean it's just showing the exact same code as above? If so are you adding this via a document or in a template / chunk ?

1,145 Posts

donshakespeare Reply #5, 11 years, 3 months ago

Hi,
First of all, is the thumb TV blogThumb or blogImage? We need to get the names right, or clear.

I don't know what Cliche is. Maybe, to help diagnose your problem, disable that thing called Cliche and work your way down to the culprit.

The TV in which you wish to enter your images (let's call it BlogThumb) may have an input of Image, or just simplly, Text. Output, okay is default. Whatever the Input Type, the value should lead to a complete url for the image.jpg you want.

In your Articles, I am assuming you are making the call in the ArticlesRowTpl or something that fetches with or like getResources?
So change the ASTERISK to PLUS sign. Signify it is a TV. Therefore [[+tv.BlogThumb]]

<div class="image">
<a href="[[~[[+id]]]]">
<img src="[[++site_url]][[+tv.BlogThumb:default=`assets/templates/blah/blah/default.jpg`]]" alt="[[+pagetitle]]" width="120px" />
</a>
</div>

You could even make things cleaner, and make the default value of the BlogThumb TV right in the TV itself. Template Variables / BlogThumb / Input Options : Default Value (assets/templates/blah/blah/default.jpg)

<div class="image">
<a href="[[~[[+id]]]]">
<img src="[[++site_url]][[+tv.BlogThumb]]" alt="[[+pagetitle]]" width="120px" />
</a>
</div>

If that works, then try it with Cliche.
Hope this helps some bit.

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

1,145 Posts

donshakespeare Reply #6, 11 years, 3 months ago

If making the call in the template of an individual article/blog, and not merely listing the summary of your articles, then knock off the + and tv.. Replace them with your ASTERISK

<div class="image">
<img src="[[++site_url]][[*BlogThumb]]" alt="[[+pagetitle]]" width="120px" />
</div>

I guess in this instance, you won't be needing the a href tag since you are already on the article the image would have been pointing to

Hope this covers both sides of the spectrum

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

33 Posts

bob-rooney Reply #7, 11 years, 3 months ago

If you are familiar with Articles then it's in the chunk called ArticleRowTpl. The chunk is as follows:

<div class="post">
                <h2 class="title"><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h2>
		<div class="image">[[*blogThumb:is=``:then=`<a href="[[~[[+id]]]]"><img src="assets/templates/default/img/logo_blog.png" /></a>`:else=`<a href="[[~[[+id]]]]"><img src="[[*blogThumb]]" /></a>`]]
                </div>
		<div class="post-text-wrap">
		        <p class="post-info">[[+publishedon:strtotime:date=`%d.%m.%Y`]]</p>
		        <div class="entry">
			         <p>[[+introtext:default=`[[+content:notags:ellipsis=`200`]]`]]</p>
			         <a href="[[~[[+id]]]]" class="readmore">[[%articles.read_more]]</a>
		        </div>
                </div>
</div>

The above chunk is then being called in the template called Articles Container (or some such). Everything is fine bar the thumbnail image set via [[*blogImage]]. So what happens is that I have 10 news items per page that display as intended except the default image, logo_blog.png, is being displayed for each post even if this post has a thumbnail selected. [[*blogImage]] appears to output no data.

::Update::
I've stripped down the code to the following

<div class="image"><img src="[[*blogThumb]]" /></div>

and I get this

<div class="image"><img src="" /></div>

At least this time I'm getting <img src="" />. The problem obviously lies with the TV. I think I've tried just about every combo of Input and Output options.

1,145 Posts

donshakespeare Reply #8, 11 years, 3 months ago

It shows nothing because this page, yoursite.com/blog/ , has no value in the *blogThumb TV. If you leave the asterisk on, that's what you are asking for, for the code to display the contents of the TV of that blog landing page, which of course is empty. It' only the articles themselves that have any value for that TV right?

So re-read my first post. Change your call to [[+tv.blogThumb]], what happens now?

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.

33 Posts

bob-rooney Reply #9, 11 years, 3 months ago

Thanks donshakespeare. Allow me to clarify a few things.

The name of the TV in question is blogThumb. Unless I've done something silly you should see it above in the chunk called ArticleRowTpl. This chunk is being called in the template named ArticleContainerTemplate. blogImage, on the other hand, is the TV for a large image that appears at the top of an individual blog post when it is opened. Individual blog posts use the template named ArticlesTemplate. Each individual blog post has these two TVs associated with it. So if I create a new blog post then I set blogThumb which should output in ArticleRowTpl. This chunk then gets popped out into a list in the ArticleContainerTemplate. blogImage is associated with ArticlesTemplate.

I've gone back to basics and created a new TV (called it the same thing), set the input as file and the output as default (I'm not using Cliche for this test) and placed the following lines of code in the chunk called ArticleRowTpl.

<div class="image"><img src="[[*blogThumb]]" /></div>
<div class="image"><img src="[[+blogThumb]]" /></div>
<div class="image"><img src="[[+tv.blogThumb]]" /></div>

In each case I get <div class="image"><img src="" /></div>. Oddly, even though blogImage works when it is being called in ArticlesTemplate it doesn't work when I put it in ArticleRowTpl. Just to note that I was only doing this for testing purposes.

[ed. note: bob-rooney last edited this post 11 years, 3 months ago.]

1,145 Posts

donshakespeare Reply #10, 11 years, 3 months ago

In ArticlesRowTpl DO NOT USE, NEVER, NEVER USE [[*blogThumb]]
INSTEAD, use [[+tv.blogThumb]]
Try Input Option 'image'

In Articles Template (for individual posts)
USE [[*blogImage]]

In both cases [[+blogThumb]] is a useless placeholder, and will always return empty.
[ed. note: donshakespeare last edited this post 11 years, 3 months ago.]

TinymceWrapper: Complete back/frontend content solution.
Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.