+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom Widget Template with image as background and radio button choices

Custom Widget Template with image as background and radio button choices

4 posts, 0 answered
  1. ian
    ian avatar
    45 posts
    Registered:
    25 Feb 2013
    28 Mar 2014
    Link to this post

    I am trying to create a custom sliding banner. The images need to be set as the background so i need to get the images link and set that link as the background url. Ive tried a few things including trying to set (ContentLink[]) profileItem.GetValue("Picture"); as the link but this did not work. Any help?

     Also i want to take the choice made on a radio button on the back end for both color of text and position of text to change classes of divs. Can i just put if(choice==0){do this} in the template?

  2. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    01 Apr 2014
    Link to this post
    Hi Ian,

    You can get the MediaUrl of an image and then use it as you want. This is a code snippet for getting the profile image of the currently logged user:
    var identity = ClaimsManager.GetCurrentIdentity();
     
                if (identity != null && identity.UserId != Guid.Empty)
                {
                    UserProfileManager profileManager = UserProfileManager.GetManager();
                    UserManager userManager = UserManager.GetManager("Default");
                    User user = userManager.GetUser(identity.UserId);
                    SitefinityProfile profile = null;
     
                    if (user != null)
                    {
                        profile = profileManager.GetUserProfile<SitefinityProfile>(user);
                    }
     
                    var avatar = GetImageNativeAPI(profile.Avatar.ChildItemId);
     
                    string url = avatar.MediaUrl;
                 
            }
     
    ...
            private Image GetImageNativeAPI(Guid imageId)
            {
                LibrariesManager librariesManager = LibrariesManager.GetManager();
                Image image = librariesManager.GetImages().Where(i => i.Id == imageId).FirstOrDefault();
     
                return image;
            }

    You can use a similar approach for getting MediaUrl from a image field of a dynamic module:
    // Set the provider name for the DynamicModuleManager here. All available providers are listed in
    // Administration -> Settings -> Advanced -> DynamicModules -> Providers
    var providerName = String.Empty;
    DynamicModuleManager dynamicModuleManager = DynamicModuleManager.GetManager(providerName);
    Type pressReleasesType = TypeResolutionService.ResolveType("Telerik.Sitefinity.DynamicTypes.Model.Pressreleases.PressReleases");
     
    // This is how we get the pressReleases item by ID
    DynamicContent pressReleasesItem = dynamicModuleManager.GetDataItems(pressReleasesType).Where("Title = \"" + title + "\"")
        .FirstOrDefault();
     
    var pictures = pressReleasesItem.GetValue<ContentLink[]>("Picture");
     
    List<string> urls = new List<string>();
     
    foreach (var item in pictures)
    {
        var image = GetImageNativeAPI(item.ChildItemId);
        if (image != null)
        {
            urls.Add(image.MediaUrl);
        }
    }
     
    return pressReleasesItem;

    After getting the url you can use it wherever you want.

    About your second question, could you please elaborate the scenario you want to achieve? I will need more details about where exactly you use this radio buttons and what exactly you strive to do.

    Regards,
    Nikola Zagorchev
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. ian
    ian avatar
    45 posts
    Registered:
    25 Feb 2013
    03 Apr 2014 in reply to Nikola Zagorchev
    Link to this post

    I figured out the second issue using a sf:conditional statement. But as far as the background image...do i need to set the second code chunk you gave for the dynamic module in a code behind or can i use it right in the widget template.

  4. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    Registered:
    24 Nov 2016
    07 Apr 2014
    Link to this post
    Hi Ian,

    You should place the code snippet in the code behind of the widget template. You can use the code snippet for your dynamic module if you will get the url from it, after getting the url you want you can set it as a background image of any control in your template. Example:

    MyElement.Style.Add("background-image", @"url(""" + myImageUrl + @""")");
     
    Button1.Style.Add("background-color", "red");
     
    MyDiv.Attributes["bgcolor"] = "lightblue";

     Do not forget that the elements should have runat server property and probably some content.

    Regards,
    Nikola Zagorchev
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
4 posts, 0 answered