Articles plugin: Post with thumbnail?

8 Posts

bigxero Reply #1, 13 years, 9 months ago

Hi all,

just curious if it is possible to put a thumbnail image next to the text on the Article Container page. Currently my posts are only text, but I wouldn't know where to put a thumbnail image to display on the main page.

128 Posts

Grey Sky Media Reply #2, 13 years, 9 months ago

If you have an image in the content it'll pull through to the container page as long as you DON'T use the summary box. Alternatively, you could build an image tv, call it, say, postImage. then you can call it into the main container template with tv.postImage.

I LOVE MODX! | greyskymedia.com

8 Posts

bigxero Reply #3, 13 years, 9 months ago

How do I write the tag for a template variable? Sorry for my ignorance, I've only started messing with ModX and I'm still learning.

128 Posts

Grey Sky Media Reply #4, 13 years, 9 months ago

No worries, In the elements tab of the tree, right click template variables, then create "new template variable".

General Properties
---
Name: postImage
Caption: Post Image

Input options
---
Input Type: Image

Output options
---
Output Type: Default (you can play with this too, you may want to set it to Image to get the full image html to output for you)

Template Access
---
Check box the appropriate template

Then, in your articleRowTpl file, simply include [[*tv.postImage]] where you want it to pop in.
If you want that same image to show in the post just add [[*postImage]] to the article template (NOT article Container template)

There are certainly more fancy ways to handle images, but, if you're looking for quick 'n dirty I think this'll work for you.
If it's not working just let me know

I LOVE MODX! | greyskymedia.com

8 Posts

bigxero Reply #5, 13 years, 9 months ago

Ok so I made a new TV called blogthumb, and gave it access to my blogs page (where all the posts/summaries will go).

Here's a snippet of my article chunk, which calls tv.blogthumb

<div class="extra_container latest">
									<figure>
										 [[*tv.blogthumb]]
									</figure>
									<div>
										<h3>[[+pagetitle]]</h3>
										<p>[[+introtext:default=`[[+content:ellipsis=`400`]]`]]</p>
										<br />
										<p class="post-info">[[+tv.articlestags:notempty=` | <span class="tags">[[%articles.tags]]: [[!tolinks? &items=`[[+tv.articlestags]]` &target=`[[*id]]` &useTagsFurl=`1`]]</span>`]]</p>
										<a class="link_btn" href="[[~[[+id]]]]">MORE</a>
									</div>
								</div>

Now when I look at the page, it still doesn't show the thumbnail. I've already gone into the article itself and added a jpg to the variable section.

128 Posts

Grey Sky Media Reply #6, 13 years, 9 months ago

oh jeeze, sorry, [[+tv.blogthumb]] ... guess i was typing too fast.

I LOVE MODX! | greyskymedia.com

8 Posts

bigxero Reply #7, 13 years, 9 months ago

Great! This works, partially.

The issue I now have is that it doesn't actually output an image, but just the filename. If i were to view source on it it would look like

<div class="extra_container latest">
                                    <figure>
                                         x.jpg
                                    </figure>
                                    <div>
                                        <h3>[[+pagetitle]]</h3>
                                        <p>[[+introtext:default=`[[+content:ellipsis=`400`]]`]]</p>
                                        <br />
                                        <p class="post-info">[[+tv.articlestags:notempty=` | <span class="tags">[[%articles.tags]]: [[!tolinks? &items=`[[+tv.articlestags]]` &target=`[[*id]]` &useTagsFurl=`1`]]</span>`]]</p>
                                        <a class="link_btn" href="[[~[[+id]]]]">MORE</a>
                                    </div>
                                </div>

and not html for an image URL.

128 Posts

Grey Sky Media Reply #8, 13 years, 9 months ago

that's the output types in the template variable (tv) settings... change the type to image and it'll output the full html for the image

I LOVE MODX! | greyskymedia.com

8 Posts

bigxero Reply #9, 13 years, 9 months ago

It actually is though. TV output type is image, with H space and V space, and no other fields filled.

128 Posts

Grey Sky Media Reply #10, 13 years, 9 months ago

hmm, try default then... maybe I have these mixed up in my head

I LOVE MODX! | greyskymedia.com