How to add images to website from Media Picker

How is this done?

I'm currently using the following method which does not display images for me:

@{ if(Model.Content.HasValue("sliderImage4")){ var mediaItem = Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage4")); <img src="@mediaItem.GetPropertyValue("umbracoFile")" alt="@mediaItem.GetPropertyValue("Name")"/>} }

Thanks,

Jon

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 14, 2015 @ 17:14

Hi Jon

Are you by any chance using the image cropper? Then there is some documentation about how to do it here http://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper

Have you tried simply writing @Umbraco.TypedMedia(Model.Content.GetPropertyValue("yourimagealias")).Url

/Jan

Copy Link

Jon 23 posts 53 karma points

Jan 15, 2015 @ 12:22

Hi Jan,

I am not using Image Cropper, though it looks quite interesting! I will play around with that.

So I tried your solution and it seemed to work for 1 child template of Master but it will not work on my master template at all. It starts throwing odd messages at me and not liking other @Umbraco declarations at me like:

Server Error in '/' Application.

The value of parameter 'id' must be either a string or an integer

@Umbraco.Field("slider1Header")

Not really sure why.

Thanks,

Jon

Copy Link

Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Jan 15, 2015 @ 16:32

Hi Jon

Could you paste what the code from your masterpage please? :)

/Jan

Copy Link

Jon 23 posts 53 karma points

Jan 15, 2015 @ 18:14

Sure :)

Here is my slider code:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
}

<html>
<head></head>

<body>
  <div class="index-banner">
         <div class="wmuSlider example1">
               <div class="wmuSliderWrapper">
                   <article style="position: absolute; width: 100%; opacity: 0;"> 
                    <div class="banner-wrap">
                        <div class="slider-left">

                            @Umbraco.Field("slider1Header")


                            <button class="sliderBtn"><a class="popup-with-zoom-anim" href="#">REQUEST A DEMO</a></button>
                            <!--<img src="images/Slider/1.png"/> -->
                            <img src='@Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage1")).Url'>

                         </div>
                         <div class="clear"></div>
                     </div>
                    </article>

                   <article style="position: relative; width: 100%; opacity: 1;"> 
                     <div class="banner-wrap">
                        <div class="slider-left">

                            @Umbraco.Field("slider2Header")

                            <button class="sliderBtn"><a class="popup-with-zoom-anim" href="#">REQUEST A DEMO</a></button>
                            <!--<img src="images/Slider/2.png"/>-->
                         </div>
                         <div class="slider-right">
                            <img src='@Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage2")).Url'>
                         </div>
                        <div class="clear"></div>
                     </div>
                   </article>

                   <article style="position: absolute; width: 100%; opacity: 0;">
                    <div class="banner-wrap">
                        <div class="slider-left">


                            @Umbraco.Field("slider3Header")

                            <button class="sliderBtn"><a class="popup-with-zoom-anim" href="#">REQUEST A DEMO</a></button>
                            <!--<img src="images/Slider/3.png"/>-->
                         </div>
                        <div class="slider-right">
                            <img src='@Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage3")).Url'>
                         </div>
                         <div class="clear"></div>
                     </div>
                   </article>

                   <article style="position: absolute; width: 100%; opacity: 0;">
                    <div class="banner-wrap">
                        <div class="slider-left">


                            @Umbraco.Field("slider4Header")

                            <button class="sliderBtn"><a class="popup-with-zoom-anim" href="#">REQUEST A DEMO</a></button>
                            <!--<img src="images/Slider/4.png"/>-->
                         </div>
                         <div class="slider-right">
                            <img src='@Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage4")).Url'>
                         </div>
                         <div class="clear"></div>
                     </div>
                   </article>

                   <article style="position: absolute; width: 100%; opacity: 0;"> 
                        <div class="banner-wrap">
                        <div class="slider-left">


                            @Umbraco.Field("slider5Header")

                            <button class="sliderBtn"><a class="popup-with-zoom-anim" href="#">REQUEST A DEMO</a></button>
                            <!--<img src="images/Slider/5.png"/>-->
                         </div>
                         <div class="slider-right">
                            <img src='@Umbraco.TypedMedia(Model.Content.GetPropertyValue("sliderImage5")).Url'>
                         </div>
                         <div class="clear"></div>
                     </div>
                  </article>

                </div>
                <a class="wmuSliderPrev">Previous</a><a class="wmuSliderNext">Next</a>
                <ul class="wmuSliderPagination">
                    <li><a href="#" class="">0</a></li>
                    <li><a href="#" class="">1</a></li>
                    <li><a href="#" class="wmuActive">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                  </ul>
        </div>
        <script src="Scripts/jquery.wmuSlider.js"></script> 
        <script type="text/javascript" src="Scripts/modernizr.custom.min.js"></script> 
        <script>
            $('.example1').wmuSlider();         
        </script>                    
</div>

</body>

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

How to add images to website from Media Picker

Server Error in '/' Application.

The value of parameter 'id' must be either a string or an integer