Copied to clipboard

Flag this post as spam?

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


  • Jason Denousse 24 posts 93 karma points
    May 22, 2019 @ 13:10
    Jason Denousse
    0

    I've setup a property in my document type to select media from the media picker.

    I'm able to select the media, however, the image doesn't appear on my website.

    I placed a value inside my img tag

    Upon inspecting the code it shows the entry as

    What am I doing wrong?

  • Dennis Adolfi 1082 posts 6445 karma points MVP 5x c-trib
    May 22, 2019 @ 14:37
    Dennis Adolfi
    0

    Hi Jason. How does your markup look like? Seems like there is something wrong with your screenshots in the post.

  • Jason Denousse 24 posts 93 karma points
    May 22, 2019 @ 14:43
    Jason Denousse
    0
    <div class="card-image">
                        <img src="@Model.Value("pOIThumbnail")" />
                    </div>
    

    pOIThumbnail is the name of the Property using Umbraco.MediaPicker

    But upon inspecting the html the out put is

    <div class="card-image">
                        <img src="Umbraco.Web.PublishedModels.Image">
                    </div>
    
  • Amir Khan 1282 posts 2739 karma points
    May 22, 2019 @ 17:24
    Amir Khan
    0

    Hi Jason, might want to try this:

    The media picker has various properties you can retrieve, here's a good place for reference: https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Media-Picker/

  • Amir Khan 1282 posts 2739 karma points
    May 22, 2019 @ 17:24
    Amir Khan
    0

    Oops, looks like the forum is trying to render an image, here's the code without the img tag: @Model.Value("pOIThumbnail").Url

  • Jason Denousse 24 posts 93 karma points
    May 23, 2019 @ 08:11
    Jason Denousse
    0

    HI Amir

    No that still didn't work.

    I used to use Umbraco v6, it was very simple in terms of just dropping in simple values to replace text in the html.

    I am building a website, hosted by my own server, and want just certain parts of that site to be editable for a customer on Umbraco, simple things like text and images.

    So the documentation for the media picker, I'm a little bit confused as to where to place that code.

    Any thoughts?

  • Nancy A. 44 posts 175 karma points
    May 23, 2019 @ 12:02
    Nancy A.
    0

    Jason -

    It depends on how you've built your site. I've created controllers for the Umbraco pages and in there, pull in the URL for the images from the Umbraco tables using the following code:

    var getSingleImage = model.Value<IPublishedContent>("umbracoAlias");
    var getSingleImageUrl = getSingleImage.Url;
    

    Then I add the value to the view model and pass it to the view. It works great. You could also do the same thing in the view pages, using Razor, like: [at top of your view page]

        @model Umbraco.Web.Models.ContentModel
        @{
            Layout = "base.cshtml";
            var image = Model.Content.Value<IPublishedContent>("umbracoAlias");
            var imagePathway = image.Url;
        }
       <img style="width:500px" src="@imagePathway"/>
    

    Keep in mind, I'm still very new to Umbraco and still trying to understand how to navigate its data structure/models. Try the above and see if that works for you ...

  • Jason Denousse 24 posts 93 karma points
    May 23, 2019 @ 13:43
    Jason Denousse
    0

    Thanks Amir

    So the way I build my website is just traditional HTML with CSS and JS.

    The code you have provided, do I place that all into my HTML and if so, where? Into the head tag?

  • Jonathan Distenfeld 105 posts 618 karma points
    May 23, 2019 @ 14:18
    Jonathan Distenfeld
    0

    Hi Jason,

    are you using the ModelsBuilder? If so, try this snippet:

    <div class="card-image">
        @if (Model.POIThumbnail != null)
        {
            <img src="@Model.POIThumbnail.Url" />
        }
    </div>
    

    if not, this should actually work for you:

    <div class="card-image">
        @if (Model.Value("pOIThumbnail") != null)
        {
            <img src="@Model.Value("pOIThumbnail").Url" />
        }
    </div>
    

    Also this code is for a single media picker. If you want to use a multiple media picker you can do this by iterating over your "POIThumbnail" Property and use the "Url"-Property of those Images.

    ~Jonathan

  • Jason Denousse 24 posts 93 karma points
    May 23, 2019 @ 15:29
    Jason Denousse
    0

    Hi so unfortunately none of that works. However, I've deleted the project and started again v7.

    Now when using the media picker, the out put is just a 4 digit number. How can i convert that to a url?

    Is media picker the correct tool?

Please Sign in or register to post replies

Write your reply to:

Draft