Creating custom content blocks where the user can select an image - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Creating custom content blocks where the user can select an image

  • Creating custom content blocks where the user can select an image
  • Hi,

    I have a requirement to create several custom content blocks of varying sizes that can dropped into templates (these will be formatted and styled using css and will have headers, images, text and links to pages), however they need to be fully customizable so that the content editor can select an image to load from the library, change the text, the header and the link as they are used in multiple places across the site.

    The problem I am having at the moment is determining the best way of developing this to read an image from the Sitefinity library so that a content editor can add this to a user control. At present I will be developing about 7/8 user controls that will be used all over the site for consistent layout design, they will all include images that need to be selected.

    I'm thinking along the lines of developing a custom control to read an image from the library but I think I'm not sure whether I'm over complicating this or whether something already exists in Sitefinity that I can already use to plug in to the user control?

    Any advice appreciated...
    Thanks
  • Hi, 

    In regards to selecting images, I have worked from the following example:  www.sitefinity.com/.../how-to-create-a-simple-image-selector

    I have then spoken to support and modified the example to use a built-in image selector/uploader uploader controls. 
  • Hi,

    Thanks, I've had a look at that. The example after that shows use of the thumbnail selector in the News but I need a thumbnail selector that I can put inside my own user control (do you know how this would be done?). I want the user to be able to drag the widget onto the form, edit the properties to load an image, set text etc.

    Thanks,
    Paul
  • Hi Paul,

    Could you please give more details about what you try to achieve? Does your user control have its own designer where you can put the image selector? If this is the case you could check the following blog post

    http://www.sitefinity.com/blogs/joshmorales/posts/11-10-05/selecting_sitefinity_4_content_inside_widget_designers.aspx 

    Greetings,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi,
    Thanks for the link, I will go through that and see if it solves my problem.

    At present my ascx user control file contains the following:
    <div class="box380Wrapper">
        <div class="box380ImgHr">  
            <h3><asp:Literal ID="TitleLiteral" Text="" runat="server"></asp:Literal></h3>
            <span class="gradientTitleBoxoutDetailed"></span>
             
            <asp:HyperLink ID="ImageLink" NavigateUrl='' runat="server">
                <img src="images/anyimage380x176.jpg" width="380" height="176" alt="Description" />
            </asp:HyperLink>
     
            <div class="copyBoxoutDetailed">
                <p>
                    <asp:Literal ID="Content380" Text="Lorem ipsum dolor sit amet, etc" runat="server"></asp:Literal>
                    <br />
                    <span class="linkText">
                        <asp:HyperLink ID="CopyLink" NavigateUrl='' runat="server" Text="Call to action" />
                    </span>
                </p>
            </div>
        </div>
    </div>

    This is just a simple template of a content block that will be used all over the site, it is styled to user requirements. However, the user will need to change the image, the image link, the content area link, the text on the content area link, the text in the content area and the Title. Most of the stuff I know how to do in a simple user control, what I don't understand is how to allow the user to select and change the image. I've looked at lots of things but seem to be going around in circles looking at writing custom image selectors, writing modules, using the module builder (my module wouldn't activate) and using shared content controls. It seems like a very simple task to do but every potential solution seems very complex and involved and I cannot work out which is the best one to use for my requirement.

    Basically, I need to replace the image in the code above with something that the user can choose from the library when they drop the user control onto the Page. Shouldn't that be simple?

    Thanks,
    Paul
  • Hello Paul,

    Well you could use the following markup in your designer .ascx file -

    <sf:MediaContentSelectorView id="selectorView" runat="server"
     MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="true">
    </sf:MediaContentSelectorView>

    This will allow you to select images from albums. Did the blog post I sent you not work out for you?

    Kind regards,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Lubomir,
    The code in the blog post did not work, there seems to be some sort of error in it as the edit dialog is blank. I removed some of the code and eventully got something on the edit dialog but it is still unable to select a page or an image from the library.

    Regarding use of the MediaContentSelectorView, I previously raised a support ticket to ask if I should use this and I believe that you replied and said that it would not be appropriate. Are you now saying that this would be appropriate? I have been around the houses with this and am becoming very disillusioned with Sitefinity. What should have been an easy 1hr task to add an image to a control has taken days, which is crazy!

    Is there anybody who can actually tell me what will work 100%? This is getting quite urgent now!

    Thanks
    Paul
  • Hi Paul,

    Could you please elaborate what is the error that you get when you use the code from the blog post? It also would really help us if you could send us some of your code so we could install it on our side and see what is going wrong.

    All the best,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Lubomir,

    I Just came back to this after a few days on something else and the PageField and ImageField seem to work perfectly now. I compiled several times the first time but I guess it just wasn't having the JavaScript for some reason. There is one slight problem I'm just looking at however, whilst the PageSelection appears to work fine, the ImageSelection won't populate the user control image below if it is inside a HyperLink, any reason for this? I ideally want my image to link to a page! Additionally, If I remove it from the Hyperlink the image will be displayed but it appears degraded in quality from that in the library which is a concern as well!

    <asp:HyperLink ID="ImageLink" NavigateUrl='' runat="server">
        <asp:Image ID="Thumbnail" runat="server" />
    </asp:HyperLink>


    Thanks,
    Paul
  • Hi Paul,

    About the quality - could you check what is the exact URL to the image? Does it contain ".tmb" in it? Also about your other question - I'm not sure why the image isn't populated when inside a link - I suppose sending us the code for your designer would help us a lot.

    Greetings,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi Lubomir,

    Please see this thread regarding the image size, I have got everything working now apart from this...

    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/developing-with-sitefinity/imageloader-is-resizing-my-images-in-user-control.aspx#1984969

    Thanks,
    Paul
  • Hello Paul,

    I'm not sure if you have noticed but one of the images has .tmb in its name, so it is in fact the image's thumbnail. Maybe this is why there are differences in the sizes?

    Greetings,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  • Hi again,

    So I've looked at my other images on the site and they are all .tmb (thumbs), yet it is only the 380x176 image which is being resized to 345x160, all the others remain the same. Any reason why?

    Paul
  • Hi Paul,

    I couldn't quite understand what did you mean exactly. What does "my other images on the site" mean? Do you refer to images inside content block widgets that are inside pages?

    Greetings,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items