Probably an easy question about Media Picker

Topics: General, Troubleshooting
Mar 5, 2012 at 8:54 PM

I'm trying to figure this out: I get how to use queries and display them using Projections, but how do you make the Media Picker display an image instead of just showing the path?

I'm using Orchard 1.4 w/ Nwazet.Commerce if it means anything.  I'm trying to build a product page by querying products as a grid and then posting the results to a Projection that is connected to a page navlink.  I can get the properties to display, except that the Media Picker results only display the URL of an image, not the picture.  How do you work around this to display it as an actual picture (hopefully without writing code)?

Mar 5, 2012 at 9:10 PM

I've just rendered it using the Url property and throw an <img src="@part.MediaPickerFIeldName.Url" /> tag around it. Not sure if there is a way to do it without writing code. 

Mar 5, 2012 at 9:15 PM

I was wondering if there was a way to use those options. Thanks. Wasn’t sure about the syntax. I knew it should probably have an easy way of parsing the data that the picker throws back though.

From: TheMonarch [email removed]
Sent: March-05-12 4:10 PM
To: joe_raby@hotmail.com
Subject: Re: Probably an easy question about Media Picker [orchard:347397]

From: TheMonarch

I've just rendered it using the Url property and throw an tag around it. Not sure if there is a way to do it without writing code.

Coordinator
Mar 5, 2012 at 9:19 PM

This works if you write your own template. Otherwise you can use properties an "Rewrite Output" option.

Mar 5, 2012 at 9:28 PM

I haven't seen that rewrite option you are referring to. What is it, or how to get to it? 

Coordinator
Mar 5, 2012 at 9:30 PM

Queries -> Layout -> Properties -> Last section, first item

Mar 5, 2012 at 9:41 PM

Wow, you guys are right on the ball! Thanks.

From: sebastienros [email removed]
Sent: March-05-12 4:30 PM
To: joe_raby@hotmail.com
Subject: Re: Probably an easy question about Media Picker [orchard:347397]

From: sebastienros

Queries -> Layout -> Properties -> Last section, first item

Mar 5, 2012 at 9:48 PM

Cool -- i skipped over the part where Joe-Raby was doing this from a Projection. 

Mar 8, 2012 at 1:28 PM

I'm doing the same thing. My property is the Url of the Media Picker Field and my rewrite rule as such:

<img src={Text} />

{Text} for the Url property of the MediaPickerField is a relative path "~/Media...". How can I get the full path, essentially the equivalent of

@Url.Content("{Text}"), in the rewrite?

One enhancement that I think might be cool would be to run the Razor engine over the Rewrite text field to allow the use of Html helpers.

 

Mar 8, 2012 at 5:45 PM

Ok so basically what I did was just use Rewrite and put in the following:

Sure enough, it puts in the URL as it appears in Media Picker, however, it also includes the tilde at the beginning, so the link doesn’t work (at least not on IIS Express). Is there a simple way to take out the tilde, or some kind of syntax to handle the relative URL text value as a properly-formatted URL for HTML markup? My HTML skills are pretty rusty. Is it considered preferable to use full absolute paths, or only relative paths, or to use encoded resource links to hide real directory layouts?

I’m kind of new at Orchard/Razor/ASP.Net, so please bear with me.

From: TheMonarch [email removed]
Sent: March-05-12 4:48 PM
To: joe_raby@hotmail.com
Subject: Re: Probably an easy question about Media Picker [orchard:347397]

From: TheMonarch

Cool -- i skipped over the part where Joe-Raby was doing this from a Projection.

Mar 9, 2012 at 11:15 AM
Edited Mar 9, 2012 at 1:32 PM

I’m pretty new to Orchard, but there doesn’t seem to be an easy, non-code way to do this.

The “~/” is added in the MediaPicker.Edit.cshtml template. My javascript is pretty basic, but from what I can tell it removes the local site portion (i.e. “OrchardLocal/”) of the URL and replaces it with “~/” (presumably so that you don’t have to revisit all of the links if you move the site). If you change the line:

 var url = '~/' + data.img.src.substr(applicationPath.length);

 

 To:

var url = data.img.src.substr(applicationPath.length); 

Then the url is saved without the “~/” prefix. Your rewrite rule would then display correctly. Which begs the question, is there a reason why the “~/” prefix would actually be required in the MediaPicker field, or is this a bug?

 

An alternative would appear to be either writing your own “ITokenProvider” (unless one already exists, but I couldn’t find it), or extending one of the existing ones to add a rewrite rule for converting a “~/” text string back to a site localised string (i.e. “OrchardLocal/”), or more general string manipulation.

If you go down the ITokenProvider route, something like this seems to work...



using Orchard.Tokens;
using Orchard.Localization;

    public class MyTokenProvider :    ITokenProvider 
    {
        public MyTokenProvider()
        {
            T = NullLocalizer.Instance;
        }

        public Localizer T { get; set; }

        public void  Describe(DescribeContext context)
        {
            context.For("Text", T("Text"), 
                                        T("Tokens for text strings"))
                .Token("Special", T("Special Formatting"), 
                                          T("Special formatting"));
        }

        public void  Evaluate(EvaluateContext context)
        {
            context.For<String>("Text", () => "")
                 .Token("Special", text => VirtualPathUtility.ToAbsolute(text));
      }
    }

 

Mar 12, 2012 at 5:21 PM

This is what I was hoping for actually.

If Bertrand is watching: what method would be the preferred way to handle this? I’m kind of surprised that the out-of-box functionality for the Media Picker-to-Projection was overlooked. I can’t be the only one to think of using it this way, since it makes for really easy-to-build image galleries/catalog pages (except for the image URL issue as described).

From: Morgma [email removed]
Sent: March-08-12 8:28 AM
To: joe_raby@hotmail.com
Subject: Re: Probably an easy question about Media Picker [orchard:347397]

From: Morgma

I'm doing the same thing. My property is the Url of the Media Picker Field and my rewrite rule as such:

{Text} for the Url property of the MediaPickerField is a relative path "~/Media...". How can I get the full path, essentially the equivalent of

@Url.Content("{Text}"), in the rewrite?

One enhancement that I think might be cool would be to run the Razor engine over the Rewrite text field to allow the use of Html helpers.

Coordinator
Mar 13, 2012 at 1:25 AM

You have no idea how many different X people put in "I’m kind of surprised that the out-of-box functionality for X was overlooked". If you need it, build it. That's how it works. If it doesn't exist, it's that nobody needed it hard enough to justify building it yet.

Projector didn't even exist 3 weeks ago. There are lots of things it can't do yet, but here there is a perfectly valid way of doing it without writing a line of code so I'm not sure what you're asking of me.

Mar 13, 2012 at 3:20 AM

The suggestion to support Razor-over-Rewrite would be my recommendation. Razor 2 is supposed to drop the tilde automatically, in fact, without needing any helpers.

See here: http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2

Why not just get Razor 2 to do the work?

From: Morgma [email removed]
Sent: March-08-12 8:28 AM
To: joe_raby@hotmail.com
Subject: Re: Probably an easy question about Media Picker [orchard:347397]

One enhancement that I think might be cool would be to run the Razor engine over the Rewrite text field to allow the use of Html helpers.

Coordinator
Mar 13, 2012 at 6:24 AM

Not sure what you mean by razor over rewrite but if you can make it work, sure, go for it.

Mar 13, 2012 at 1:21 PM
Edited Mar 13, 2012 at 1:38 PM

@forsvarir - Thanks for suggesting the token provider and providing a code example.

@Joe_Raby - My suggestion for using Razor Engine (<cite>razorengine.codeplex.com)</cite> to parse the RewriteOutput property was more of a musing / brainstorm. It was not my intent to call anyone else to action; we all have an opportunity to contribute. The solution posted by @forsvarir answered the initial question well enough, however, if you're still interested in razor templating the rewrite output I would start a new discussion. There you can specify the desired feature and solicit feedback. The idea will get more visibility this way. 

May 2, 2012 at 7:25 AM

I've done all this and set up my nice projection of images and it's working correctly.

Now I'd like to add an anchor tag around the image. I've got the image and the link fields in a content part, just wondering now if I can do something like <a href={TypeDefinition.Fields["Link"]} ><img src={Text} /></a>

Not sure if this is beyond the purpose of a rewrite on a projection field... Anyone got any suggestions on the correct way to go about this?

Thanks

Coordinator
May 2, 2012 at 6:01 PM

You can do it using this token: {Content.YOURPARTNAME.YOURFIELDNAME.Text}

May 3, 2012 at 12:51 AM

Thanks Sebastien. I put:

<a href={Content.RHS.Link.Text} ><img src={Text} /></a>

in the rewrite text property of the Image Url and it's rendering:

<a href= ><img src=/Media/Default/images/youtube.png /></a>

RHS is the name of my Part, and Link is the name of my field.

Or are you talking about putting it in my own template rather than the rewrite output?

Coordinator
May 3, 2012 at 2:10 AM

I have just pushed a modification which shows all the available tokens for fields. 

And by the way the correct one in your case will be {Content.Fields.RHS.Link}

Though there won't be anymore ambiguity with the new code.

May 3, 2012 at 2:44 AM

Awesome. Thanks Sebastien, that works great.

One last question. Can I access the Target property of Link? I tried {Content.Fields.RHS.Link.Target} with no luck

Coordinator
May 3, 2012 at 5:56 PM

Not yet ... but when I wrote the patch yesterday, I sent me a note to do it asap ... and also do the same for Date and Time on DateTimeField. I'll keep you posted on the progress.

May 3, 2012 at 10:21 PM

Great! Thanks Sebastien.

Coordinator
May 3, 2012 at 11:37 PM

It's pushed now, you should be able to see all available tokens in the picker.

May 4, 2012 at 12:48 AM

Thanks again.

(note: I'm new to orchard) I have a source enlistment so I can do a pull to get your changes but is that advised over waiting for official releases?

Coordinator
May 4, 2012 at 12:54 AM

If you have an enlistment, just update to that change.

Coordinator
May 4, 2012 at 1:05 AM

This is the official release minus one little change I am about to commit.

May 4, 2012 at 6:37 AM

Pulled change and it works nicely now. The tokens in the picker are much better now. Thanks.

Editor
May 14, 2012 at 9:09 PM

Did this fix come after 1.4.1? I see the options in token dropdown and have included them in my rewrite for the media picker field, but I am getting blanks for the values of AlternateText and Url. 

Code:

<img src="{MediaPickerField.Url}" alt="{MediaPickerField.AlternateText}"/>

Environment:

Upgraded from 1.4.0 to 1.4.1 by just copying code on top to existing code base.

Thanks guys.

May 14, 2012 at 10:25 PM

Hi arock3

My rewrite output on the Image:Url property is <a href="{Content.Fields.RHS.Link}" target="{Content.Fields.RHS.Link.Target}"><img src="{Text}" /></a>

HTH

Greg

Editor
May 15, 2012 at 12:24 AM
What is RHS? The name of your field? In the new version it shouldn't require this notation.

Arra

On Mon, May 14, 2012 at 5:26 PM, gkennedy <notifications@codeplex.com> wrote:

From: gkennedy

Hi arock3

My rewrite output on the Image:Url property is

HTH

Greg

Read the full discussion online.

To add a post to this discussion, reply to this email (orchard@discussions.codeplex.com)

To start a new discussion for this project, email orchard@discussions.codeplex.com

You are receiving this email because you subscribed to this discussion on CodePlex. You can unsubscribe on CodePlex.com.

Please note: Images and attachments will be removed from emails. Any posts to this discussion will also be available online at CodePlex.com




--
Thanks,

Arra

May 15, 2012 at 12:31 AM

Oh sorry, I meant to point that out but it was early and my brain was not quite awake yet - Yes, RHS is the name of my field.

Ok, well keep me posted if you find out a better way to reference the link.

Greg

Editor
May 15, 2012 at 12:39 AM

When I use src="{Text}" I get the tilde. Sebastien stated that he added code so we could reference the media picker like so : src="{MediaPickerField.Url}"

I see this in the token dropdown but nothing is being generated. I am going to step through the code but it will take a bit to figure out exactly where this is getting mapped. I was wondering if anyone else had this issue after an upgrade, or if they saw it working with a fresh install.

Coordinator
May 15, 2012 at 12:58 AM

You need to type this: {Content.Fields.YOURTYPE.YOURFIELD.Url}

Content.Fields.YOURTYPE.YOURFIELD will return a token of type "MediaPickerField" on which you then chain Url to get tis url.

And by the way Content.Fields.YOURTYPE.YOURFIELD should also be in the list of available tokens

Editor
May 15, 2012 at 1:10 AM

OK I was confused, the MediaPickerField.Url string in there as a reference then. I found my field: alt="{Content.Fields.Client.ClientLogo.AlternateText}" src="{Content.Fields.Client.ClientLogo.Url}"

This still generates the tilde (~) though. Is this expected?

Coordinator
May 15, 2012 at 1:24 AM

Yes, but you can use this if you don't want it: {Content.Fields.Client.ClientLogo.Url.Absolute}

Editor
May 15, 2012 at 1:28 AM

You....you.....you got a gift my friend. http://www.youtube.com/watch?v=ravi4YtUTxo

May 31, 2012 at 11:48 PM

Not to beat a dead horse... I'm using a projection widget and in the query I'm adding a class to the <li> tag that should look like this:

<li class="reason-2"> or <li class="reason-3"> (the number should change with the 'reason number' - field in the content type)

So in the query in the Item Class field under the HTML Properties I have this:

reason-{Content.Fields.ReasonstoEnjoy.Reason}  (this is a numeric field)

This is what is coming out: <li class="reason-" shape-id="91" style="display: none; ">

When I named the field I called it 'Reason Number' - any possible problem there?

The site is running 1.4.2

Coordinator
Jun 1, 2012 at 12:18 AM

Well, first, it seems like you have shape tracing enabled, but that's not the problem obviously. If you named your field Reason Number, chances are its technical name is ReasonNumber so I'm not quite sure why you would have ReasonstoEnjoy in the token.

Jun 1, 2012 at 5:20 PM

I did have tracing enabled when I grabbed that snippet.

'Reason to Enjoy' is the name of the content type and 'Reason Number' is a field in that content type.  I've tried {Content.Fields.ReasonstoEnjoy.ReasonNumber} and {Content.Fields.ReasonstoEnjoy.Reason_Number} as well. I even tried {Content.Fields.ReasonstoEnjoy.Reason-Number} just to try.

The Reason to Enjoy content type was made in the admin and not a custom module if that helps.  {Content.Fields.ReasonstoEnjoy.Reason} and {Content.Fields.ReasonstoEnjoy.ReasonNumber} are the tokens provided by the interface for available tokens. 

....and I just realized I've been miss speaking {Content.Fields.ReasonstoEnjoy.Reason} and {Content.Fields.ReasonstoEnjoy.ReasonNumber} are the two tokens that are being presented.  Reason is an input field of type text and ReasonNumber is a numeric field.  Neither token seems to be dropping content, however, other token are. {Content.Id} being one

I'm wondering if it's because the query isn't yet aware of the values going into the <li>'s?

Maybe this will help: http://fdoc.webershandwick.mn/Media/Default/Design/Untitled.png

I was able to work around this with a little jQuery to re-write the classes by grabbing the number it was putting out inside the <li> so I guess this is more of a curiosity at this point to make sure I'm not doing something wrong or some other reason.

Coordinator
Jun 1, 2012 at 11:51 PM

I think you got to the field *object* but not to the field value. NumericField and TextField both have a Value property. That's how you get the actual value.

Sep 6, 2012 at 8:41 PM

This is the most confusing thread.  A few screen shots might help.  I am a developer (20 years) but I'm new to Orchard. 

In the answers above there has no evident "context".  It is a mess by any definition. 

Shape Tracer doesn't work correctly in IE 9.  Works in Chrome.

Bertrandleroy obviously knows Orchard but is terrible at explaining it.

I'm sorry to be so harsh but I've been working on this for a couple of weeks and progress is too slow.

 

Coordinator
Sep 12, 2012 at 6:49 PM

Can you be more specific about what you don't understand?

Mar 13, 2014 at 11:12 PM
Edited Mar 13, 2014 at 11:13 PM
first of all, you must Enable the "Url Alternates" feature from Modules menu and using this :
<img src={Content.Fields.Client.ClientLogo.Url.Absolute} />
in Rewrite Results section for your query.