Physical Path for Images

Posted by Community Admin on 27-Nov-2011 00:00

Hi, I know there is another thread similar to this but it is quite dated and a little different to my issue.

When I convert asp.net sites to Sitefinity 3.7 I could still use the physical path to the image and other folders for general site, template and css images. Now I have a Sitefintiy 4.2 project and can't use the already uploaded static images that were already uploaded to the ~/images folder and sub folders. I want to be able to insert an image from one of the folders when I am editing a generic content area of a page. Simple I thought but now I'm very concerned as it seems like it maybe quite complicated to use existing files in a Sitefinity 4.x site.

I went to ~/Sitefinity/Administration/Settings/Advanced>Libraries>Images>UrlRoot and change the value to sf-images.
I created a new storage provider (I called it backgrounds and matched it to the physical path of ~/images/background. This should help me use the local "image" directory.

I went to the the template I had created from my own .master page and dragged a content area to the page. I was given a choice of images "From your computer" or "From already uploaded". The already uploaded images only had the "Default library" listed.

I then created a new Image Library and called it backgrounds and tried to map it to ~images/backgrounds but got an error "The URL contains invalid symbols." I could only enter a path like "background" so I created that. I uploaded a test image and the path for that is ~/sf-images/background/test.jpg but I can't see that physical path anywhere in the site. I can now upload to that library from a content area but that is all. There is now a new image in the ~/images/background folder but it looks like some sort of binary file called "13b91520-0d53-4e5e-b2d4-04def16a8e67"

All I am trying to do is 'easily' use files already in the site to add to the content areas of my templates and pages. I want physical image files to fall back on as well as keeping the database smaller by not having all image files contained in the database. I don't want to upload all the site images again via the SF admin. I have completely wasted an afternoon on this and becoming very frustrated. I can't charge my client for this extra time.

Can someone please help achieve this simple goal?

Posted by Community Admin on 28-Nov-2011 00:00

Dennis,

I gathered some code for you. :) You'll need to specify the name of the library you want to create along with the directory you want to scan for images. Also, I found a cool function to filter by a list of file extensions so you should only have to run it once. Hopefully this helps you get to where you need to be!

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

using Telerik.Sitefinity;

using Telerik.Sitefinity.Modules.Libraries;

using Telerik.Sitefinity.Libraries.Model;

public partial class MasterPages_FilesPage : System.Web.UI.MasterPage

protected void Page_Load(object sender, EventArgs e)

string albumName = "Backgrounds";

string imagesDirectory = Server.MapPath("~/sf-images");

var album = App.WorkWith().Albums().Where(al => al.Title == albumName).Get().SingleOrDefault();

if (album == null)

Guid albumId = Guid.Empty;

App.WorkWith().Album().CreateNew().Do(alb =>

albumId = alb.Id;

alb.Title = albumName;

alb.Visible = true;

).SaveChanges();

var manager = new LibrariesManager();

var parentAlbum = manager.GetAlbums().Where(a => a.Title == albumName).SingleOrDefault();

manager.RecompileItemUrls<Album>(parentAlbum);

string[] images = GetFiles(imagesDirectory, "*.gif;*.jpg;*.jpeg;*.png;*.bmp");

foreach (string imagePath in images)

FileInfo file = new FileInfo(imagePath);

var image = manager.CreateImage();

var extension = file.Extension;

var title = file.Name;

if (extension.Length > 0)

title = title.Substring(0, title.Length - extension.Length);

image.Parent = parentAlbum;

image.Title = title;

image.UrlName = title.ToLower().Replace(' ', '-');

manager.RecompileItemUrls<Telerik.Sitefinity.Libraries.Model.Image>(image);

using (var fileStream = file.OpenRead())

manager.Upload(image, fileStream, file.Extension);

manager.RecompileItemUrls<Telerik.Sitefinity.Libraries.Model.Image>(image);

manager.Publish(image);

manager.SaveChanges();

public static string[] GetFiles(string path, string searchPattern)

string[] m_arExt = searchPattern.Split(';');

List<string> strFiles = new List<string>();

foreach (string filter in m_arExt)

strFiles.AddRange(System.IO.Directory.GetFiles(path, filter));

return strFiles.ToArray();

Posted by Community Admin on 28-Nov-2011 00:00

Hi Tim, Thanks heaps for your code. I'm not a programmer so do I just paste that into an aspx page and load it?

It seems like your code will import the original physical files into the format and directories Sitefintiy uses. Does this mean Sitefinity just won't work with static files in their original format and location any more?

In the past if I edited a file, like a logo or something, I could just upload it via ftp and the changes were effective immediately. Am I now forced to use the Sitefinity interface to upload changed files? It seems like version 4.x is very different from what I am used to doing. I'm scared about what other surprises I'll get.

Anyway, thanks again for your help.

Posted by Community Admin on 28-Nov-2011 00:00

Dennis,

It's the entire code behind for a master page named "FilesPage.master" Here's that file:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="FilesPage.master.cs" Inherits="MasterPages_FilesPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

It's just the boilerplate master page created by Visual Studio. Create the two files and then specify the FilesPage.master as the template for any page on your site. The code will run once you navigate to that page in a browser. Hope that makes sense :/

As far as what it will do, the code pulls image files from the directory specified and puts them into a library that you choose; you'll then be able to use them in the CMS.

You can still hard code images into your templates using the img tag but I would recommend using the new structure to store the files instead of in a directory off the root.

To access images you can do this <img alt="" src="/Sitefinity/WebsiteTemplates/TemplateFolder/App_Themes/ThemeFolder/Images/Image1.jpg" />

It's a fantastic way to keep all of your template/theme assets in one place!

Good luck!

Posted by Community Admin on 29-Nov-2011 00:00

Thank you. I will try your suggestion. I still don't understand why there needs to be a "new structure" that converts files to binaries and restricts where a user can upload or user files from.

The link you gave and other SF documentation doesn't seem to explain much about this massive change in approach only "Sitefinity uses specific structure for organizing the templates and the themes for the backend and the frontend". It would have been a complete nightmare to get the site to work if you didn't provide the sample code for me - Telerik should employ you! :). Thankfully the static links to images in my master pages still work but it will take me so much time to convert all the static images and links to the Sitefinity virtual file structure.

I still think people should be given a choice of how to link to files in the pages of their site.

Cheers

This thread is closed

All Replies