Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Jon 23 posts 53 karma points
    Jan 14, 2015 @ 16:46
    Jon
    0

    How to add images to website from Media Picker

    Using Umbraco 7

    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 10x admin c-trib
    Jan 14, 2015 @ 17:14
    Jan Skovgaard
    0

    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
    Jon
    0

    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 10x admin c-trib
    Jan 15, 2015 @ 16:32
    Jan Skovgaard
    0

    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
    Jon
    0

    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
Please Sign in or register to post replies

Write your reply to:

Draft