Image in Post

Topics: ASP.NET 2.0
Apr 15, 2009 at 6:03 AM
Hi all,

Another newbie question. I would like to add images in my post.
What is the better way to do this and the safest one ?
For now i have created a directory "post001/images" in the "app_data" directory,  i have download the image file "Myimage.jpg" and
i have added <img src=http://www.myblog.fr/App_Data/post001/images/Myimage.jpg alt="Myimage" /> in my post.
I would like to have a relative path for my Src like src="~/App_Data/images/post001/images/Myimage.jpg" or
to be able to put a slug to my image and use think like src="/pages/Myimageslug"
Is this possible and is there an automated way to do this for each new post if needed.
Many thanks
Coordinator
Apr 15, 2009 at 6:13 AM
There isn't really an image slug available.  You also won't be able to have an img src directly to a file in the App_Data folder -- because IIS blocks anyone from directly accessing a file in the App_Data folder.

When on the Add Entry tab in the control panel, you can upload an image there.  When you do this, the IMG that that gets automatically inserted into your post will look something like:

<img src="/image.axd?picture=2009%2f4%2fmy_image.jpg" alt="" />

The URL encoding is a little hard to follow.  Decoded, the SRC is:

/image.axd?picture=2009/4/my_image.jpg

The browser hits the image handler (image.axd) for the image.  The image handler grabs the image data out of the App_Data folder and streams the image data to the browser.  With this approach, the browser isn't directly accessing the files in the App_Data folder.  In this particular case, the image handler is streaming the my_image.jpg file in the App_Data\files\2009\4 directory.
Apr 15, 2009 at 4:53 PM
Thank you very much for your answer it work's very well.

Now i need to launch a camtasia demo file that can be launch on my pc in doubleclicking a swf file that must be
put in one directory with an mp4 file.

for example if i have these files in a directory "MyVideoController.swf" with "MyVideo.mp4", when clicking "MyVideoController.swf" file the demo begin's.
please Can anyone give me the best way to do this from my post.

Many thanks.
Apr 15, 2009 at 6:43 PM
Hi Ben!

How effective is the image handler in assisting the web crawlers? I have tons of posts that contain images. What can I do so my images show up in search engines?

Thanks!
Coordinator
Apr 15, 2009 at 7:54 PM
@ArtisticPinoy, the image handler should work exactly the same way as a direct link to the image.  Your posts have IMG tags with a SRC pointing to image.axd, rather than directly to the image.  Both regular visitors and search engines see the image.axd links.  The image.axd links will always display the image.  You can navigate directly to one of the image.axd links in your browser, and you'll see the actual image ... something like:

http://www.example.com/image.axd?picture=2009/4/my_image.jpg

So from the browser/search engine's point of view, the image.axd links are no different than direct links to the JPG, GIF, PNG images.
Coordinator
Apr 15, 2009 at 8:01 PM
@HillPeaceman, it sounds like you are maybe looking to use an <object> tag?

When you're on the Add Entry tab, you can upload an image and/or you can upload a file.  If you upload a file, there will be a link to that file inserted into your post.  Visitors to your blog can click on that link or right-click and Save.

If you edit the raw HTML in the editor, you could add an <object> tag so you could have an embedded media player within your post.  If you're doing this on the Add Entry tab, you can use the HREF value of the <a> tag inserted into your post after you upload a file.  The HREF value (which is the link to the file you uploaded) can be put into the appropriate parameter/attribute used in the <object> tag.

Another choice is to use a program like Windows Live Writer (WLW) to create your blog posts -- instead of creating the posts on the Add Entry tab in the control panel.  WLW makes it pretty easy to insert images and media (object tags) into blog posts.  It will also handle uploading the images/files to your blog.
Apr 16, 2009 at 6:47 AM

Hi Ben i don't quite understand what you mean by <object> tag.

I have try the upload file in my post that gives me the HTML code and it does not work (i run my BE locally with VS2008 localserver) :
<a href="/BlogEngine.NET/file.axd?file=2009%2f4%2fMyvideo.swf" target="_blank"><img style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" title="movie" src="/BlogEngine.NET/image.axd?picture=2009%2f4/%2fmovie.png" border="0" alt="movie" width="32" height="32" /></a>
The movie image appears well, the link launch the swf windows but the flash movie does not run.

If i try the following HtmlCode it works
<a href="/BlogEngine.NET/MyVideoDir/Myvideo.swf" target="_blank"><img style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" title="movie" src="/BlogEngine.NET/image.axd?picture=2009%2f4/%2fmovie.png" border="0" alt="movie" width="32" height="32" /></a>
The movie image appears well, the link launch the swf windows and the flash movie run's well.

Is there an explanation ?

Thanks

Coordinator
Apr 16, 2009 at 7:37 AM
Object tags are used quite a lot on the web if you want to embed some SWF, MP4, MP3, etc. file into a webpage.  Some places even give you the <object> tag HTML to embed into your website.  An example is YouTube.  When you're viewing a video on YouTube, on the right hand side, there are 2 fields with HTML in them.  One is URL and the other is Embed.  They give that to you so you can copy-and-paste the <object> tag HTML into a webpage so YouTube videos can be embedded into any webpage.

When you use a <a> tag, like your example shows, clicking on the <a> tag is either going to download the video, or replaces the entire page in the browser with the SWF.  This isn't the same thing as "embedding" a video into a page.  Embedding means to keep the page, but have the video embedded somewhere within the page.  With embedding, you can even have multiple videos embedded onto the same page.

As another example, check out this person's blog.  He's using BE.  You can see he has several YouTube videos on the page.  He's using <object> tags for that.

But if the <a> link meets your needs, then no need to worry about the <object> tag.

The reason the first example isn't working is because it's using BE's file handler (file.axd).  BE's file handler isn't sending the correct MIME type, or "content type" for the SWF video.  BE's file handler sends the following content-type header to the browser:

application/octet-stream

This is a generic content type, telling the browser to save the video -- rather than play it.  But in the second example, where you are directly linking to the SWF file, the web server is sending the following content-type header to the browser:

application/x-shockwave-flash

Browsers that have flash installed understand that header and start playing the video.

BE's file handler isn't really designed to send the ideal/correct content type header for the files.  It's purpose is to allow people to download files.  You can modify BE's file handler and re-compile the code if you want it to send the correct content type for SWF files.  In the FileHandler.cs file (in the BE core files), there's a SetContentType() method.  That's where you would want to add the correct content type for SWF files.
Apr 16, 2009 at 9:12 AM

Thank you ben,

Your reply is very comprehensive and you explain better that lot of teachers i've got in the old time.

<object> tag works well but i would like to show an icon instead of the screen in my post and open the flash video
when the user click the movie icon. it's why i have modified the filehandler.cs :
if (fileName.EndsWith(".pdf"))
{
context.Response.AddHeader(
"Content-Type", "application/pdf")
}
else if(fileName.EndsWith(".swf"))
{
context.Response.AddHeader(
"Content-Type", "application/x-shockwave-flash");
}
else
{
context.Response.AddHeader(
"Content-Type", "application/octet-stream");
}
But it still does not work.
Are there other things to modify in the filehandler.cs file ?
Many thanks

Many thanks

 

Coordinator
Apr 16, 2009 at 6:51 PM
There's a missing semi-colon after the content type is set to "application/pdf" in the code you posted.  Should be:

context.Response.AddHeader("Content-Type", "application/pdf");

After you added the content type for SWF, did you recompile the core?  You would have a new DLL in your BIN directory.

Can you define "does not work"?  I tried your code in IE and Firefox, and clicking on the file.axd link opens the SWF file in my browser.  Before adding your code, clicking on the file.axd link would give me a Save dialog.  So, with that code, I'm seeing the same behavior when clicking on the file.axd link and clicking on a direct link to an SWF file -- which is what I think you're after.
Apr 17, 2009 at 9:01 AM
The semi-colon was well there in my code but ihave fogot it in my reply.
Of cours i have recompile the code and run it with the debugger to be sure of what it does.
But it seem's that you don't have the same behavior than me.
For me with or without the filehandler.cd modification the behavior is the same, BE never tells me to download the file.
I have try with other files (.doc for example) for all thes other file the download dialogbox appear but not for swf file, very strange.

I've have investigate further and i have made a flash animation without video in it, it work's (i mean the animation run normally) when i click on my hyperlink
with or without modification of filehandler.cs.

So i suspect that when there is a swf with a mp4 video in it, the link to this mp4 file is an absolute URL and as the direct access to the app_data directory is not
authorized it fails. I'm afraid that i cannot use the file.axd feature and keep the first solution.

If you have other suggestion, you're welcome.

Many thanks for your help Ben.
Apr 17, 2009 at 2:01 PM
I've put my post on line with all your help.
www.groupemsvisio.fr
For the videos i finally use wmv format. Nevertheless the visitors are able to see the video directly if they type the
right URL which i cannot prevent unless you have a solution.

Thank you again
Coordinator
Apr 17, 2009 at 6:04 PM
I went to your blog, but didn't see any SWF or WMV file downloads.

One option is to save the files you upload to a directory outside the App_Data folder, and then link directly to the files instead of using the file.axd handler.  For this option, you would want to create a folder and make sure you give the ASPNET user 'Write' permissions to that folder.  For example, you can create a folder named 'files' in the root of your blog.

In the Add_entry.aspx.cs file in the admin\Pages folder, there's a btnUploadFile_Click() event handler.  The two lines of code in there to change would be:

string folder = BlogSettings.Instance.StorageLocation + "files" + Path.DirectorySeparatorChar;
string a = "<p><a href=\"{0}file.axd?file={1}\">{2}</a></p>";

=== CHANGE those 2 Lines to the FOLLOWING ===
string folder = "~/files" + Path.DirectorySeparatorChar;
string a = "<p><a href=\"{0}files/{1}\">{2}</a></p>";
Apr 18, 2009 at 6:52 AM
Hi Ben,

You have to click the video icon to the right of "Visio est un logiciel de dessin" to see the wmv video.

Thank you for the suggestion to download the file from Add_Entry.aspx.