Hi Mark

Not quite sure I understand why you want to render the invite path as the image source?

I mean if the path to the invite is not a website but an image then it makes sense I guess :-) But the way it's described above sounds to me like the path for the invite is a website?

But if the invite is an image at some other url you should be able to re-use the code you did for the link. So your above code would look like this instead

 var typedMediaPickerSingle = item.GetPropertyValue<IPublishedContent>("eventImage");
if (typedMediaPickerSingle != null)
{
   <a href="@Umbraco.Field("eventLink", encoding: RenderFieldEncodingType.Url)" target="_blank">
   <img src="@Umbraco.Field("eventLink", encoding: RenderFieldEncodingType.Url)" />
   </a>
}

I hope this helps? :-)

/Jan

Thanks Jan

Let me explain further what I am trying to achieve.

The user pastes in a URL to an external website in the field "eventLink" and then uploads a small image to the field "eventImage". What I am trying to achieve is when the viewer on the web site clicks on the image they go to the URL that has been pasted into the "eventLink" field. Currently the image has the link https://marks-friendly-lion.s1.umbraco.io/1135.aspx

Hi Mark

I'm unable to see the site since it requires authentication - I get prompted for username and password when I click the link so I can't see the site.

Perhaps you can add a screendump so we can see the context? And perhaps you can also post a screendump of what your setup in the Umbraco backoffice looks like for the document type.

/Jan

Thanks Jan

I am new to Umbraco and some of these simple actions seem very complex to achieve. The site is not published yet and I am having problems with Umbraco. But the concept is simple I have an image that I wish to add an external link to a web site so you click on the image and you go to the web site. Currently I just get the link to the image number 1135.

Hi Mark

I'm trying my best to help ease the pain for you - I know it can be a tough feeling starting to learn something new and the learning curve can be very steep and some of the answers you're getting are from people with the best intentions but who may forget that they're "cursed by knowledge" and therefore don't think about that what seems easy and logical to them because they know the stuff may not seem that easy and logical to you. I just hope that you keep the spirit high and overcome the mountain - We've all been there and when it starts to just "click" that's an amazing and rewarding feeling.

But when you're asking questions you also have a bit of the "course by knowledge" since you know your full context and we don't - As you have probably experienced by now there are often more ways of achieving the same thing when doing an Umbraco website. Therefore it can also sometimes be hard to give you the best answers because we need to see some details before being able to provide you with a proper explanation and solution. For instance I have not seen the newer videos on umbraco.tv so I'm not able to know the context of what is being taught in the video and how you have setup your site based on the video for instance :-)

If you could please let me know what version of Umbraco you're currently using and let me see a screendump of your document type where you have the link and the media item I'll recreate it locally and provide you with the working code and explanation for that code.

Looking forward to hearing from you!

/Jan

Thanks Jan for the support.

I am currently working directly on the Umbraco cloud. We are mac based, so to start, we are finding this easier. Hope the image helps.

I wish to click on the green image ("eventImage") and that takes you to a web site ("eventLink").

Hi Mark

Thank you for the screendump.

Is it possible you can also provide us with one from the backoffice displaying the properties where the data is entered? That would be ace :)

/Jan

Hi Mark

Ok so I tried to re-create your setup as I imagine you have done it based on your descriptions above. I'm not sure if it's possible to actually render the image url by using the Umbraco.Field...Something tells me that it probably should be possible but I've been out of the game for a while so don't know if it showing the image id instead of rendering the url of the image is a bug or not.

Therefore the solution that I'm providing is based on Dynamic Razor.

It looks like this

@if(CurrentPage.HasValue("eventImage")){

if(CurrentPage.HasValue("eventLink")){
    <a href="@CurrentPage.eventLink" target="_blank" rel="noopener">
        <img src="@CurrentPage.eventImage.Url" alt="" />
    </a>
}
else{
    <img src="@CurrentPage.eventImage.Url" alt="" />
}

}

So before I even try to render the image I make a check to see if the "eventImage" property has a value or not. This ensures that we don't get to see a nasty yellow screen of death (YSOD) - One of those annoying error pages that you have probably seen sometimes when implementing your site if the image field has been left empty.

If we have an image we move on to check if the eventLink property has a value before trying to render the link and the image. If the link field is empty we only render the image. The last bit is of course optional if it would not make sense to render the invitation without the link of course.

In the beginning of my template I inherit from

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.Events>

This is why I can "CurrentPage" because this is what allows for the dynamic rendering of the content.

In order to get an idea about the differences in rendering using Dynamic vs. Strongly typed Razor I recommend that you read this article by Dave Woestenborghs https://24days.in/umbraco-cms/2015/strongly-typed-vs-dynamic-content-access/

In the backoffice my document type has been setup like this

It's also a good idea to consult the documentation for Dynamic Razor in Umbraco here https://our.umbraco.org/documentation/Reference/Querying/DynamicPublishedContent/

And even though this cheatsheet is 5 years old it's still relevant and can come in handy for you https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets - Make sure to pick the one to the left since it's the Dynamic one.

In regards to dealing with the link field instead of using a text-field you could consider using the Multi Url Picker package, which allows you to select internal umbraco pages or point to external links - You can find the package here https://our.umbraco.org/projects/backoffice-extensions/multi-url-picker/ - It is compatible with Umbraco cloud. But maybe that's a next step once you're feeling more comfortable with Umbraco and Razor in general.

I hope this helps you. Otherwise please let us know :-)

/Jan

Thanks Jan for your patients

That does make sense but it does not display anything. At least I did not get the yellow screen.

The link is to our web site http://www.pictogram.com.au

and event link properties

Hi Mark

You're welcome :)

Thanks for the screendumps - Could you try to paste in the full code from your events template so we can see the full context of it? I'll try to re-create things later when I get off from work.

/Jan

We are using a partial view to display this. I tried pasting in the code but it did not display properly. Screen shot of code

.

Hi Mark

i think that the issue you are having is that the value that is coming out on line 20 is just the id of the media item. You then have to use this to create a Media object that will give you access to all the properties.

Inside the 'if' statement add an additional line

var m = Umbraco.Media(typedMediPickerSingle);

and then replace @typedMediPickerSingle on line 24 with @m.Url

If this works tidy up the variables names but then you should be good to go.

Just to add Jan steered you on a better path with strongly typed content and even if you simply implement the Models Builder for this it makes things a lot better in the long run.

Thanks Barry Have I done this correctly because I get the yellow screen.

@{
var typedMediaPickerSingle = item.GetPropertyValue<IPublishedContent>("eventImage");
if (typedMediaPickerSingle != null )
{
   var m = Umbraco.Media(typedMediPickerSingle);
   <a href="@Umbraco.Field("eventLink", encoding: RenderFieldEncodingType.Url)" target="_blank">
   <img src="@m.Url" />
   </a>
}

}

Hi Mark

What does the yellow screen say? Can you copy it in here?

I would be puzzled if this work but could you quickly try using

var m = Umbraco.TypedMedia(typedMediaPickerSingle);

/Jan

Thank Jan I got the following for both options enter image description here

I am starting to get a little concerned about Umbraco.

This is a Business catalyst site and this is all we did to get this to work

<a href="{tag_event image link}" target="_blank">{tag_event image}</a>

To do this in html

<a href="http://website" target="_blank">image.jpg</a>

This seems incredible complex for such a simple task and this is one of our simple sites. I appreciate there is a learning curve but this is probably too steep for non programmers?

Image

Hi Mark

I understand your concern and I'm equally frustrated that we have not managed to solve this yet. As you say it should be simple and I don't think we're that far from the goal really - But that's easy for me to say.

Is there anyway that I can get access to your solution? It might be easier to have the full context and avoid further misunderstandings along the communication too :-)

If you're ok with giving me access then you can find me either on Twitter: @TheRealBatJan or connect with me at LinkedIn so we can exchange e-mails. I'm not too keen on writing it in public in regards to spam etc.

/Jan

Hi Mark

Thank you for the access - It helped a lot to see the full context.

1: I should have realised this sooner - Since you're using a partial you can't use @Umbraco.Field() since it does not have any context like it does on a template. I think this might be a bug That is why the link never rendered and I can see that it's confusing that it is possible to use the "Insert Value" option in this context. Therefore you never get the link value. <-- Forget this part! It's gibberish and me suffering from bad memory and mixing up concepts! SORRY! #H5IS

The reason why @Umbraco.Field() does not render any value in your previous example is because it lacks the context of where it should get the field value from. When used in a partial you will need to pass in the "item" as a parameter to the @Umbraco.Field() method. So currently you have asked for the "eventLink" value only. But since it's a partial it does not have the same context as on the template level - Therefore you need to tell @Umbraco.Field() where it should get the "eventLink" from.

So since we're in a loop where we loop over each event (item) you will need to write it like this @Umbraco.Field(item, "eventLink") and then it will work. I show an example of both in step 3 so you can see the context.

If you in a partial would like to render something from the CurrentPage for instance the EventPageTitle then you could place this just before the loop @Umbraco.Field(CurrentPage, "eventPageTitle")

So when you're using @Umbraco.Field() in a partial then you'll need to pass in the context and when you use it in a template it's not necessary. I'm very sorry about the first part of my answer and hope I have not been causing you too much confusion.

The documentation is currently not being very clear about it either - But shortly after having added this correction to the post I'm going to have a look at that.

2: The image is being rendered for the 2 first events without any issues and for the last 2 no image has been selected yet so therefore it does not render. So all the advice we have given you above about rendering the image seems to rely on a misunderstanding, which is why you get YSOD's when trying out our suggestions :)

3: In order to render the links I modified the code to be

@{
    var selection = Model.Content.Site().FirstChild("eventPage").Children("eventItem")
                        .Where(x => x.IsVisible());
}
    @foreach(var item in selection){



    <div class="event-details">

    <div style="float:left;padding-right:10px;">

@{
    var typedMediaPickerSingle = item.GetPropertyValue<IPublishedContent>("eventImage");
    var eventLink = item.GetPropertyValue("eventLink");

    if (typedMediaPickerSingle != null )
    {
       <a href="@eventLink" target="_blank">
        <img src="@typedMediaPickerSingle.Url" />
       </a>
    }

}     

        </div>


<h3>@item.GetPropertyValue("eventName")</h3>
<h4 class="date">
@(item.GetPropertyValue<DateTime>("eventStartDate").ToString(" dddd dd/MM/yyyy")) 

@if(item.HasValue("eventEndDate")){
@(item.GetPropertyValue<DateTime>("eventEndDate").ToString(" - dddd dd/MM/yyyy"))
 }

</h4>
<p class="location"><em>@item.GetPropertyValue("eventLocation")</em></p>
<p class="description">@item.GetPropertyValue("eventInformation")</p>
</div>
<hr />

}

But you could also use @Umbraco.Field() like your initial intention was like this - But since you're using @item.GetPropertyValue() everywhere else in your partial I think the first approach is better so you do things in a consistent way.

@{
    var selection = Model.Content.Site().FirstChild("eventPage").Children("eventItem")
                        .Where(x => x.IsVisible());
}
    @foreach(var item in selection){



    <div class="event-details">

    <div style="float:left;padding-right:10px;">

@{
    var typedMediaPickerSingle = item.GetPropertyValue<IPublishedContent>("eventImage");

        if (typedMediaPickerSingle != null )
        {
            <a href="@Umbraco.Field(item,"eventLink")" target="_blank">
                <img src="@typedMediaPickerSingle.Url" />
            </a>
        }

}     

        </div>


<h3>@item.GetPropertyValue("eventName")</h3>
<h4 class="date">
@(item.GetPropertyValue<DateTime>("eventStartDate").ToString(" dddd dd/MM/yyyy")) 

@if(item.HasValue("eventEndDate")){
@(item.GetPropertyValue<DateTime>("eventEndDate").ToString(" - dddd dd/MM/yyyy"))
 }

</h4>
<p class="location"><em>@item.GetPropertyValue("eventLocation")</em></p>
<p class="description">@item.GetPropertyValue("eventInformation")</p>
</div>
<hr />

}

This renders the link you have entered in the eventLink field on the event.

I hope this makes sense? :-)

/Jan

Thanks Jan for your help. I hopped it would be not to complicated.

Hi Mark

You're welcome - That @Umbraco.Field thing was indeed confusing. I created a PR to the documentation adding an example on how to render it in the context of partial views.

Happy coding! :)

/Jan

is working on a reply...