How to Create a Simple Image TV
From a Slack discussion with matdave, with the assistance of Sopyan Maulana, aka mandollarian.
First, you need to set up your Fred-supported TV and Media Source.
A Fred-supported Media Source needs to have two extra properties, "Fred" set to "Yes", and FredReadOnly, usually set to "No".
A Fred-supported TV also needs to have two Properties added, "fred", set to "Yes", and "fred.type", which in our case is "image". You can also have a fred.media.source setting to point to a media source.
Gotcha! - be sure to notice the dot separators here, it's easy to use hyphens or underscores as Fred properties and options use in most cases.
It appears to be better to use a Fred Dropzone input type for the TV. Beyond that, assign the TV the Fred template you want it to be connected to, and the Media Source it should come from.
Now when you open the Settings, at the bottom under the Advanced Settings item, you'll see the TVs item, which will give you the TVs for the resource, and in this case an image-type TV so you can select its image.
Now you can use that TV the same way you would use any TV, for example in my case I use them to create a thumbnail scrolling gallery on the main (non-Fred) pages for each section.
What's the Story?
To make a TV Fred-able, all it needs are the two "fred." properties. You won't be able to edit them from the Manager any more, just as you can't edit the resource's content from the Manager. If you use a "Fred Dropzone" input type, you can even hide the TV from the Manager altogether. You'll still get an image-type TV in the Settings, since you've told Fred that you want an image-type TV in the "fred-type" property. Since Fred can at this time only handle text-type TVs, this is a custom built input that actually uses a text-type input field to store the image's file path, as viewing the browser's source will show.
<label class="">MODX Thumb
<div class="fred--input-group fred--browse">
<input class="" type="text">
<a class="fred--browse-small" title="Browse"></a>
</div>
<img class="" src="/assets/images/modx/90-minutes/90-minutes.jpg">
</label>
You still get that lovely embedded elFinder file manager, so you can create a new subfolder, drop images onto it, and even do some basic image manipulation all from that little Browse button.
