This project is read-only.

HTML Widget vs Custom Module

Topics: Writing modules
Jul 30, 2013 at 4:36 PM
I have the following code, which is a Facebook share icon.
    <!-- Facebook -->
    <a href="#" 
      onclick="''+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436');return false;">
      <img alt="Share on Facebook" src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/facebook24.png"))" />
Now I can put this into an HTML Widget, but then I am hard-coding the theme url. I do not have a problem with this.

I am wondering if there are any alternatives to how I am doing this. I really do not want to have to create a new module for something that is so easy to do with an HTML Widget.

Any additional ideas I have not considered?
Jul 30, 2013 at 6:38 PM
I think you could create a new Widget content type via the Admin (e.g. FacebookShareWidget), then create a Razor template in your theme (called something like Widget-FacebookShareWidget.cshtml) and paste your code in there.

Also, pasting above code as-is into an HTML widget will not work, since @Url.Content is a Razor instruction. You would have to use the relative path, e.g. /themes/somethemename/content/images/facebook24.png. Unless of course you implement an IHtmlFilter that processes this instruction for you (or use Vandelay.Industries' HTML filter, fixing up paths.
Jul 30, 2013 at 8:31 PM
Thanks sfmskywalker!

Glad to hear I can use the our custom Theme project so I wouldn't have to create another project for this simple widget.

One thing I am finding confusing is how to link the Widget to the cshtml view?

Jul 30, 2013 at 9:25 PM
It will be linked by convention: widget-facebooksharewidget.cshtml is an alternate for the widget shape that will only kick-in for your content type, FaceBookShareWidget. See for a detailed description of that technique.
Jul 30, 2013 at 10:34 PM
That is exactly what I needed.

At first it didn't work because I put inside a Parts folder w/in Views. After putting it in Views it worked. I am curious why it uses the root of Views as opposed to inside Parts as I normally store my views?

Jul 30, 2013 at 10:45 PM
The "Views" folder is the default place to put your views. When a shape is created by a driver, it's purely a convention to store its view into a Parts folder (or prefix it with "Parts.").