Get image referenced from custom module

Hello,

I have a custom module that has a reference to image:

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:

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.

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:

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.

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"):

Hello Svetoslav,

Thank you for information, but I can't get GetValue extension function work:

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.

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.  

Hi Svetoslav,

I made sure I have references to

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.

Hi Svetoslav,

Posting whole code as you asked:

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.

I have the same problem trying to get the image. Is this figured out already?

Thanks!
Daniel

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?

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.

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...

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:

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

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

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

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