Thumb path and product page url

Hi everyone

I have implemented a carousel in Nopcommerce and I want to use the same Thumbnails created by Nopcommerce when adding pictures to products. But I need to find out when pictures are added to products and thumbnails are created, how do I get the path to the thumbnails being created from ProductPictures.ascx and also how can i get the product page name that will be generated for that product in Public Store.

Details.

In ProductPictures.ascxs I added a checkbox that if checked will save some information to an xml file that I have with my carousel settings. This is how the settings look

images.xml

<photo src="path" url="ProductPage.aspx">

So pretty much what I need is when I click upload picture in nopcommerce it will also add a new element to my image.xml file with the path of the thumbnail that I want to use and the link to the product page that will be generated.

Thanks in advance

Ed

If that is the case, don't implement an XML solution, implement a database solution. That way, when saving pictures, you can add a function that adds picture references to your carosel (correct spelling?) feature. Then when your page loads that contains the carosel feature, just bind the information from the database to your carosel.

Check out:

SEOHelper.GetProductUrl(ProductId);

This will get you the URL of the product by passing it the product ID.

The path to the thumbnails is always going to be the same. They reside in the images/thumbs folder and are always named for the product variant id - so if you can get that then you can build a path. The images are always 7 numbers long - i.e. if the product id is 343, then the image would be named 0000343.jpg. So get the product variant id and then add the appropriate number of zeros to the beginning based on the id's length. Assuming you only use one file type (.jpg), building a path should be easy.

BTW:
            //gets the product
            var product = this.ProductService.GetProductById(this.ProductId);
            //gets the variants
            var variants = product.ProductVariants;
            //gets the first variant's id - the product's product variant id
            var pvID = variants[0].ProductVariantId;

Then use pvID in your path like so:

string path = "http://www.mydomain.com/images/thumbs/" + pvID + ".jpg"

Remember to add the zeros to pvID (turn it to a string, find it's length, add the zeros, etc.)

Thanks a lot for the help.

Ok this is part of my code I'm going to work on it later. The only thing is I would like to capture the thumbnail name in creation time. But in the case that's not possible this will work.


private void addToCarousel()
        {
            string num ="";
            if(ProductId<9){num="000000";}
            if(ProductId>9 || ProductId<99){num="00000";}
            //and so on

            if (chkCarousel.Checked)
            {

                string strFilename = Server.MapPath("~/flash/images.xml");
                XmlDocument xmlPic = new XmlDocument();
                FileStream imgFile = null;

                if (File.Exists(strFilename))
                {
                    string image = Server.MapPath("~/images/thumbs/"+ num+ProductId+".jpg");
                    string url = "product page example";
                    string target = "_blank";

                    try
                    {
                        imgFile = new FileStream(strFilename, FileMode.Open, FileAccess.Read);
                        // Open the XML file
                        xmlPic.Load(imgFile);
                    }
                    finally
                    {
                        imgFile.Close();
                    }


                    // Create an element that the new attribute will be added to
                    XmlElement xmlNewPhoto = xmlPic.CreateElement("photo");

                    // Create a Continent element and set its value to
                    // that of the new continent
                    xmlNewPhoto.SetAttribute("image", image);
                    xmlNewPhoto.SetAttribute("url", url);
                    xmlNewPhoto.SetAttribute("target", target);

                    // Add the element and its attribute to the document
                    xmlPic.DocumentElement.AppendChild(xmlNewPhoto);

                    // Save the XML file
                    xmlPic.Save(Server.MapPath("~/flash/images.xml"));
                }
            }
        }

This would be too many if statements:
cubanoemg wrote:

Try this instead:

            string num = productId.ToString();
            if (num.Length < 7)
            {
                for (int i = 0; i < 7 - productId.ToString().Length; i++)
                {
                    num = string.Format("0{0}", num);
                }
            }
            num = string.Format("{0}.jpg", num);
            ...
            string image = Server.MapPath("~/images/thumbs/" + num);

That should work.

Also, you may want to play around with this to see what you can get from it:

            string path = this.PictureService.GetPictureLocalPath(picture, 300, true);

You should be able to get the path that way... haven't tested it, don't know what the path looks like when it is returned. With this you can choose the size - thumbnail or whatever. I just found that :)

Andrei is the one who has probably written the majority of the code for nopCommerce, and if there is one thing I can tell you about Andrei's code its that he has put in a way to find anything about an object, whether it is a product or picture or whatever... there really isn't too much that I can't find with code that exists already.

Thanks bfranklin825

I will play with your code. It looks good to me and also makes more sense.

Thanks for the time and effort.

Eduardo

Thanks to bfranklin825

I want to share with the Nopcommerce community the implementation of a FlashXML components and Nopcommerce in my code.

First take a look to see if one of these components fill your expectations http://www.flashxml.net/components/
Components are free to use and install (watermarked) and $12(no watermark). You can try all the components and their configuration on the same site. Follow the steps for General Installation. In my case I wanted to be able to each time I was uploading pictures for my products to ask me if I want one of those pictures to be included in the control(carousel in my case). If yes then it will update the xml settings with the new uploaded picture.



Modification required.
admin/modules/ProductPictures.ascx -----Add a checkBox

<td class="adminData">
                <nopCommerce:NumericTextBox runat="server" CssClass="adminInput" ID="txtProductPictureDisplayOrder1"
                    Value="1" RequiredErrorMessage="<% $NopResources:Admin.ProductPictures.New.DisplayOrder.RequiredErrorMessage %>"
                    RangeErrorMessage="<% $NopResources:Admin.ProductPictures.New.DisplayOrder.RangeErrorMessage %>"
                    MinimumValue="-99999" MaximumValue="99999" ValidationGroup="UploadNewProductPicture">
                </nopCommerce:NumericTextBox><asp:CheckBox runat="server" ID="chkCarousel"
                    Checked="True" ForeColor="#0033CC" Text="Add to Carousel" />

admin/modles/ProductPictures.ascx.cs


private void addToCarousel()
        {
            var product = this.ProductService.GetProductById(this.ProductId);
            //var variants = product.ProductVariants;
            //var pvID = variants[0].ProductVariantId;

            string num = product.ProductPictures[0].PictureId.ToString();

            if (num.Length < 7)
            {
                for (int i = 0; i < 7 - product.ProductPictures[0].PictureId.ToString().Length; i++)
                {
                    num = string.Format("0{0}", num);
                }
            }
            num = string.Format("{0}.jpeg", num);

            if (chkCarousel.Checked)
            {

                string strFilename = Server.MapPath("~/flash/images.xml");
                XmlDocument xmlPic = new XmlDocument();
                FileStream imgFile = null;

                if (File.Exists(strFilename))
                {
                    string image = "../images/thumbs/" + num;
                    string url = SEOHelper.GetProductUrl(ProductId);
                    string target = "_self";
                    string ccData= product.ShortDescription.Substring(0,15);

                    try
                    {
                        imgFile = new FileStream(strFilename, FileMode.Open, FileAccess.Read);
                        // Open the XML file
                        xmlPic.Load(imgFile);
                    }
                    finally
                    {
                        imgFile.Close();
                    }


                    // Create an element that the new attribute will be added to
                    XmlElement xmlNewPhoto = xmlPic.CreateElement("photo");

                    // Create a Continent element and set its value to
                    // that of the new continent
                    xmlNewPhoto.SetAttribute("image", image);
                    xmlNewPhoto.SetAttribute("url", url);
                    xmlNewPhoto.SetAttribute("target", target);
                    XmlCDataSection cData;
                    cData = xmlPic.CreateCDataSection(ccData);
                    xmlNewPhoto.AppendChild(cData);
                    // Add the element and its attribute to the document
                    xmlPic.DocumentElement.AppendChild(xmlNewPhoto);
                    
                    // Save the XML file
                    xmlPic.Save(Server.MapPath("~/flash/images.xml"));
                }
            }
        }

This carousel is in flash? I'd like to see that implementation on an nopCommerce site...

You should post this to Community Contributed Add-Ons

This is is just a test for a website that I,m building for a friend of mine.To see implementation go to www.fixmyclick.net    the carousel is the one in the middle. The one to the top lef is just a flash movie that I created. I've not remove the watermark yet but its only $12 and I'm still working on it.

Ed

The only problem that I'm facing is that If I go to Used Cars for example the flash movie doesn't show. I added the control to the three column master. But if you take a look the flash is there but it does not play. But it works good across new products, contact us, search etc.

Ed