Get image referenced from custom module

Posted by Community Admin on 04-Aug-2018 01:46

Get image referenced from custom module

All Replies

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

I have a custom module that has a reference to image:
if (!type.Fields.ToList().Any(fld => fld.FieldName == "ItemThumbnail"))
    type.Fields.Add(ContentLinksExtensions.CreateContentLinkField("ItemThumbnail", "OpenAccessDataProvider", metaMan, RelationshipType.OneToOne));

Backend works as expected. And I can create items and assign images to it.

Now I create widget that lists custom module items and I need to pull images information.
But! Custom module item doen'st have "ItemThumbnail" field. I guess because it is just a link.

Question is probably simple:
How do I get image information that is referenced from custom module item.

Thanks,
Denis.
Posted by Community Admin on 30-Nov-2011 00:00
Hello Denis,

 Thank you for contacting us.
If the field is of type ContentLink, you can use the ImageField to display the image on the frontend like this:

<sf:ImageField ID="predefinedImageField" runat="server" DataFieldType="Telerik.Sitefinity.Model.ContentLinks.ContentLink"
                    DisplayMode="Read" ShowDeleteImageButton="false" DataFieldName="ItemThumbnail" />
Let me know if this didn't work for you.

Greetings,
Svetoslav Petsov
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
Posted by Community Admin on 30-Nov-2011 00:00
Svetoslav,
Thank you for reply. It worked.

Two quick questions:
1) Is there any way to avoid two extra divs that ImageField generates (see attachment).
2) What other way to have image as field for custom module. I thought contentlink is there only way. But looks like there is other way to do it. Can you please give me a hint here. If you have example this is the best.

Thanks!
Denis.
Posted by Community Admin on 01-Dec-2011 00:00
Hi Denis,

1) The only way to do that would be to change the template of the ImageField and remove/hide some of the elements there, but this could break the field. However, here's the default template for the ImageField:

<%@ Control Language="C#" %>
<%@ Register Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
 
<sf:ConditionalTemplateContainer ID="conditionalTemplateImageField" runat="server">
  <Templates>
 
    <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
        <div class="sfImg"><img ID="img_read" runat="server" alt="" /></div>
    </sf:ConditionalTemplate>
 
    <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
        <sf:ResourceLinks id="resourcesLinks" runat="server" UseEmbeddedThemes="True"  Theme="Default">
            <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.core.css"  Static="True"/>
            <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.dialog.css" Static="True"/>
            <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.jQuery.jquery.ui.theme.sitefinity.css"  Static="True"/>
        </sf:ResourceLinks>
 
        <div id="viewPanel" runat="server" class="sfImgPreviewWrp">
            <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" />
            <div class="sfPreviewImgFrame">
                <img ID="img_write" runat="server" alt="" />
            </div>
            <asp:LinkButton ID="replaceImage" OnClientClick="return false;" runat="server" CssClass="sfLinkBtn sfChange sfSecondaryBtn">
                <span class="sfLinkBtnIn"><asp:Literal runat="server" ID="lReplaceImage" Text="<%$Resources:ImagesResources, ChangePhoto %>" /></span>
            </asp:LinkButton>
            <asp:LinkButton ID="deleteImage" OnClientClick="return confirm('Are you sure you want to remove your avatar?')" runat="server" CssClass="sfLinkBtn sfChange">
                <span class="sfLinkBtnIn"><asp:Literal runat="server" ID="lDeleteImage" Text="<%$Resources:ImagesResources, DeletePhoto %>" /></span>
            </asp:LinkButton>
            <sf:SitefinityLabel id="descriptionLabel_write" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
        </div>
 
        <div id="PostbackUploadPanel" runat="server">
            <div id="uploadPanel" runat="server" style="display:none" class="sfReuploadImgWrp">
                <telerik:RadUpload ID="photoUpload" runat="server" AllowedFileExtensions="jpg,jpeg,png,gif" ControlObjectsVisibility="None" MaxFileInputsCount="1" />
                <asp:LinkButton ID="cancelUpload" OnClientClick="return false;" runat="server" CssClass="sfCancel" Text="<%$Resources:ImagesResources, DontChangePhoto %>" />
            </div>
        </div>
        <div id="AsyncUploadPanel" runat="server">
            <sf:EditorContentManagerDialog runat="server" ID="asyncImageSelector" DialogMode="Image" HostedInRadWindow="false"  BodyCssClass="" />
        </div>
    </sf:ConditionalTemplate>
 
  </Templates>
</sf:ConditionalTemplateContainer>

What you can do is inherit the ImageField, override the LayoutTemplateName property and specify the path to your new template there. Then you can use your control instead of the default image field.
2) The way you did it is the best way. Another way would be to use a selector with a textfield and inside the textfield save the url or the id of the image, but this is mostly used when the ImageField is added as a custom field to the module.

Best wishes,
Svetoslav Petsov
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
Posted by Community Admin on 13-Dec-2011 00:00
Svetoslav,

I have one more question.
I have requirement to have links as images (in custom module master list).
On the other hand sf:DetailsViewHyperLink control doesn't support images inside itself.
I can override this control (OnDataBinding) and put <img> tag inside.
But I don't know how to get image URL information in the overridden OnDataBinding.
The way I reference image in my custom module you can find in the first message in this thread.

Please advice best way to achieve this.

Thanks!
Denis.
Posted by Community Admin on 14-Dec-2011 00:00
Hello Denis,

 You will have to use the manager for your module, get the desired item, then use the Telerik.Sitefinity.Model's extension method GetValue to get the value of the content link (Thumbnail in your case) and after you do that, you will find a property of the content link, called ChildItemID, which is the ID of the linked item - in this case the image (This is an example with a module that I have, called "Projects"):

ProjectsManager mng = ProjectsManager.GetManager();
            var project = mng.GetProjects().Where(p => p.Title == "Test").FirstOrDefault();
            var link = project.GetValue("Thumbnail") as ContentLink;
             
            LibrariesManager libMng = LibrariesManager.GetManager();
            var image = libMng.GetImage(link.ChildItemId);
Now you have all the properties that you need in the image object, including the URL.

All the best,
Svetoslav Petsov
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
Posted by Community Admin on 18-Dec-2011 00:00
Hello Svetoslav,

Thank you for information, but I can't get GetValue extension function work:
PortfolioItem p = dataItem as PortfolioItem;
var link = p.GetValue("Thumbnail") as ContentLink;
It  fails with the following message:
PortfolioItemsModule.Model.PortfolioItem' does not contain a definition for 'GetValue' and no extension method 'GetValue' accepting a first argument of type 'PortfolioItemsModule.Model.PortfolioItem' could be found (are you missing a using directive or an assembly reference?)   

In order to use extension method, I use
using Telerik.Sitefinity.Model;

And I have data item derived from IDynamicFieldsContainer:
[DataContract(Namespace = "http://blah.com", Name = "PortfolioItem")]
[ManagerType("PortfolioItemsModule.Data.PortfolioItemsManager, PortfolioItemsModule")]
public class PortfolioItem : Content, ILocatable, ILifecycleDataItemGeneric, IDynamicFieldsContainer
What else should I do to make GetValue work? It there any other ways to get this value? Thanks! Denis.
Posted by Community Admin on 20-Dec-2011 00:00
Hello Denis,

 Are you sure you have a reference to Telerik.Sitefinity.Model and Telerik.Sitefinity? As far as I see this is a compiler error, which can only be caused by a missing reference. I also see that you have implemented everything needed for your class to have such an extension method.
Another thing you could try is directly use DataExtensions.GetValue(obj item, string name) method.  

Kind regards,
Svetoslav Petsov
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
Posted by Community Admin on 22-Dec-2011 00:00
Hi Svetoslav,

I made sure I have references to
using Telerik.Sitefinity;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.Model.ContentLinks;
using Telerik.Sitefinity.Modules.Libraries;
using Telerik.Sitefinity.Web;
using Telerik.Sitefinity.Web.UI.ContentUI;

Also I tried to call extension method directly
IDynamicFieldsContainer p = dataItem as IDynamicFieldsContainer; // verified - this is not null
var link = DataExtensions.GetValue(p, "Thumbnail") as ContentLink;

It fails with "Object reference not set to an instance of an object."
If I try to use "GetValue" it fails with the same error (see previous message).
Should I file support ticket and send you project?

Thanks,
Denis.
Posted by Community Admin on 27-Dec-2011 00:00
Hi,

 Can you send me the whole code that you are executing? Where is this "dataItem" that you are casting coming from? I suppose this is what causes the problem.

All the best,
Svetoslav Petsov
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
Posted by Community Admin on 08-Jan-2012 00:00
Hi Svetoslav,

Posting whole code as you asked:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using PortfolioItemsModule;
using PortfolioItemsModule.Model;
using Telerik.Sitefinity;
using Telerik.Sitefinity.Model;
using Telerik.Sitefinity.Model.ContentLinks;
using Telerik.Sitefinity.Modules.Libraries;
using Telerik.Sitefinity.Web;
using Telerik.Sitefinity.Web.UI.ContentUI;
 
namespace PortfolioItemsModule.Controls
    public class WWDetailsViewHyperLink : DetailsViewHyperLink
    
        protected override void CreateChildControls()
        
            base.CreateChildControls();
        
 
        protected override void OnDataBinding(EventArgs e)
        
            base.OnDataBinding(e);
            var container = this.GetDataItemContainer();
            object dataItem = null;
            if (container == null && this.DataItem != null)
            
                dataItem = this.DataItem;
            
            if (container == null && this.DataItem == null)
                throw new InvalidOperationException("This control can be used only within a data bound item template.");
 
            if (container != null)
                dataItem = container.DataItem;
 
            if (dataItem != null)
            
                var host = this.GetHostControl<ContentView>();
                if (host == null)
                    throw new InvalidOperationException("This control must be hosted by ContentView control or one that derives form it.");
 
                if (!String.IsNullOrEmpty(this.TextDataField))
                
                    PortfolioItem p = dataItem as PortfolioItem;
                    //var link = DataExtensions.GetValue(p, "Thumbnail") as ContentLink;
                    var link = p.GetValue("Thumbnail") as ContentLink;
 
                    LibrariesManager libMng = LibrariesManager.GetManager();
                    var image = libMng.GetImage(link.ChildItemId);
                    this.ImageUrl = image.Url;
                
            
 
            string url = this.NavigateUrl;
        
    

As you can see I'm getting data item as this.DataItem.

Thanks,
Denis.

PS: just upgraded to 4.4 the issues remains.
Posted by Community Admin on 11-Jan-2012 00:00
Hi,

 Can you try using the GetValue method with another property and see if it will succeed (try with something that can give us 100% insurance that it should be working, for example "Title" or another property that you have exposed in your module items' model class.). Also, try calling the GetValue method outside of this control, just create a test .aspx page in your solution and in the Code Behind, use your manager to get a "Porftolio Item" and then call the GetValue method for some property. If this fails again, then you can open a support ticket and send me the project, together with the module, so I can inspect where this could be coming from.

Greetings,
Svetoslav Petsov
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
Posted by Community Admin on 18-Jan-2012 00:00
I have the same problem trying to get the image. Is this figured out already?

Thanks!
Daniel
Posted by Community Admin on 20-Jan-2012 00:00
Hi Daniel,

 What is your specific case? Is the image again registered as a field for the content items of a custom module or you have added it as a custom field to the built-in modules?

Kind regards,
Svetoslav Petsov
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
Posted by Community Admin on 27-Feb-2012 00:00
Can you try using the GetValue method with another property and see if it will succeed (try with something that can give us 100% insurance that it should be working, for example "Title" or another property that you have exposed in your module items' model class.). Also, try calling the GetValue method outside of this control, just create a test .aspx page in your solution and in the Code Behind, use your manager to get a "Porftolio Item" and then call the GetValue method for some property. If this fails again, then you can open a support ticket and send me the project, together with the module, so I can inspect where this could be coming from.

I tried to call GetValue for 'Title' and it worked great. But for 'Thumbnail' it still returns "Object reference not set to an instance of an object." Same happens in the separate Test.aspx page.
What is our next step?

Thanks,
Denis.
Posted by Community Admin on 29-Feb-2012 00:00
Hi Denis,

 Is there a chance that you could open a support ticket and send us your module to test the behaviour? The problem seems very odd (and does not reproduce for the regular case, as I've tested this with Products module), so we may need to debug it in order to determine what is the problem.

All the best,
Svetoslav Petsov
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
Posted by Community Admin on 21-May-2013 00:00
In using MVC i have brought the code of my module into a control and collected the date do i need to pass this to the view through the model or can i pass it straight from the control. I have a ist of images and want to list the images inside a div with a for each statement or something. end result needs to look something like this

<div id="carousel">
                <img src="./images/CharityIcons/ABAW.jpg" alt="Alliance for Biking and Walking"/>
                <img src="./images/CharityIcons/ACS.jpg" alt="American Cancer Society"/>
                <img src="./images/CharityIcons/BikeMS.jpg" alt="BikeMS"/>
                <img src="./images/CharityIcons/BikesBelong.jpg" alt="Bikes Belong"/>
                <img src="./images/CharityIcons/BPSA.jpg" alt="BPSA"/>
                <img src="./images/CharityIcons/imba.jpg" alt="IMBA"/>
                <img src="./images/CharityIcons/LAB.jpg" alt="League of American Bicyclists"/>
                <img src="./images/CharityIcons/Nica.jpg" alt="NICA"/>
                <img src="./images/CharityIcons/PCAP.jpg" alt="Prostate Cancer Awareness Project"/>
                <img src="./images/CharityIcons/Pelotonia.jpg" alt="Pelotonia"/>
                <img src="./images/CharityIcons/PFB.jpg" alt="People for Bikes"/>
                <img src="./images/CharityIcons/RTT.jpg" alt="Rails to Trails"/>
                <img src="./images/CharityIcons/TDC.jpg" alt="Tour de Cure"/>
                <img src="./images/CharityIcons/TFK.jpg" alt="Trips for Kids"/>
</div>

and i want to pull those list of images from the module i created...
Posted by Community Admin on 27-May-2013 00:00
Hi Ian,

 You could use the API reference from your Dynamic module to get an array of ContentLinks, which is what the Multiple images field persists. Then, from the ContentLinks, you can select the relevant Image items, using the ChildItemId property and save them into the model.
Then inside your view, you can do the following, which will display a thumbnail for each image in your model:

<div id="carousel">
                @foreach (var item in Model.Images)
                                
                            <img src="@item.ThumbnailUrl" />
                
            </div>

There is also an AlternativeText property on the Image model, which you can use for your alt property.
Let me know if you need further help on this.

Regards,
Svetoslav Petsov
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 Public Issue Tracking system and vote to affect the priority of the items
Posted by Community Admin on 06-Dec-2013 00:00
Hello i had solved that issue via creating a function in code behind
file at our custom control, and called that method inside control.ascx
file where i have added a repeater &  asp.net image control field to
show the image here is the solution with example in my site

Get Images in custom control from Custom module image asset field
Posted by Community Admin on 23-May-2014 00:00

I have created custom module with image field and renderd image on page.Page is in two languages i.e English and Arbic.I used same template for both the pages.But Image not get displayed on Arabic page.Any solution??

Template used is:

<%@ Control Language="C#" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Comments.Web.UI.Frontend" TagPrefix="sf" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
  <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Images" TagPrefix="sf" %>      
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI" TagPrefix="sf" %>
<%@ Import Namespace="Telerik.Sitefinity.Web.UI" %>
<%@ Import Namespace="Telerik.Sitefinity.Modules.Comments" %>
<sf:SitefinityLabel id="title" runat="server" WrapperTagName="div" HideIfNoText="true" HideIfNoTextMode="Server" CssClass="sfitemFieldLbl" />
<telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
          <div class="title-section">
                        <div class="but-img">
                          <img src="/Image/media-title-image.png" /></div>
                        <div class="text">MEDIA COVERAGE</div>
                    </div>

                    <ul class="media-slider">
            <asp:PlaceHolder ID="ItemsContainer" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li>                      <div class="detail-section">
                                <div class="image">
          <sf:ImagesView ControlDefinitionName="ImagesFrontend" runat="server" Title="Image" UrlKeyPrefix="">
                <RelatedDataDefinition RelatedFieldName="Image" RelatedItemType="Telerik.Sitefinity.DynamicTypes.Model.MediaCoverages.Mediacoverage" RelationTypeToDisplay="Child" RelatedItemSource="DataItemContainer">
                </RelatedDataDefinition>    
                <ControlDefinition ControlDefinitionName="ImagesFrontend" runat="server" ProviderName="OpenAccessDataProvider">
                    <Views>
                        <sf:ImagesViewMasterDefinition  SortExpression="" ViewName="ImagesFrontendThumbnailsListSimple" runat="server">
                        </sf:ImagesViewMasterDefinition>
                    </Views>
                </ControlDefinition >
            </sf:ImagesView>
            </div>
            <div class="title-date">
              <div class="long-title">
                <sf:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Title")%>' />
                </div>
                <div class="date">
            <sf:FieldListView ID="PublicationDate" runat="server" Format="PublicationDate.ToLocal():MMM dd, yyyy" WrapperTagName="div" WrapperTagCssClass="sfitemPublicationDate" />
                </div>
              </div>
            </div>
          <div class="intro-detail">
            <sf:TextField runat="server" DisplayMode="Read" Value='<%# Eval("Summary")%>' />
          </div>
           <div class="button-arrow">
                                <div class="view-aricle-button">
          <sf:DetailsViewHyperLink ID="DetailsViewHyperLink" runat="server">
                                  <img alt="VIEW ARTICLE" src="/Image/view-article-button.png" />
                                  </sf:DetailsViewHyperLink>
            </div>
             </div>
        </li>
    </ItemTemplate>
</telerik:RadListView>
<sf:Pager id="pager" runat="server"></sf:Pager>
<asp:PlaceHolder ID="socialOptionsContainer" runat="server"></asp:PlaceHolder>
 
<script type="text/javascript">
  $(document).ready(function()
     $('.media-slider').bxSlider(
                  pager: false,
                  captions: true,
                  nextText: '<img src="/Image/media-left-arrow.png" />',
                  prevText: '<img src="/Image/media-right-arrow.png" />'
                  
                );
    );
  </script>

Screenshots are attched here

Posted by Community Admin on 28-May-2014 00:00
Hi all,

@Tejal

The most probable reason why your image does not display in the Arabic culture is if the image itself is not translated in the culture. Please make sure that Content->Images->YourLibrary->YourImage has an Arabic translation published.

Regards,
Ivan D. Dimitrov
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
 
Posted by Community Admin on 29-May-2014 00:00

Hi Ivan,

Thanks for reply.Issues has been sorted out.I created different libraries to upload the images for both the languages.Sitefinity doesn't provide the localization of image.

Thanks,

Tejal Satre

 

 

This thread is closed