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


  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 11:07
    Hubert Thalmann
    0

    Mediapicker in Combination with Lightbox Gallery

    Hello ourCommunity

    I have a Problem with the Mediapicker (with multiple images)

    i want to make a gallery with lightbox.

    i have 2 Document Types the first one is the bilder (german for images^^) and the bilder_item document type.

    enter image description here

    This is Bilder

    enter image description here

    and this is bilder_items

    now my Problem is how do i get the images-paths of all picked images of bilder_images into my bilder documenttype? (all picked images of "MediaIds")

    i think i have to make a macro and put : @Umbraco.RenderMacro("listBilder")

    into my "Bilder" Template.

    can someone give me a hint how i get the paths?

    thank you.

    enter image description here

    enter image description here

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 11:30
    David Peck
    1

    Can I suggest that you use Nested Content. This means that your bilder_items are items within a Bilder property rather than children.

    You then just need to do:

    @foreach(var bilderItem in Model.GetPropertyValue<IEnumerable<IPublishedContent>>("myLightboxGallery")){
    var mediaItem = Umbraco.TypedContent(bilderItem.GetPropertyValue<int>("mediaId"));
    <img src='@mediaItem.GetCroppedUrl(200, 300)' />
}

    Or something like that anyway

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 11:36
    Hubert Thalmann
    0

    what does the ("myLightboxGallery") stand for?

    forget about the lightbox gallery. I just want to have the paths of my images. For example you can get it out with <p>@item.xxx</p> or something like this.

    EDIT: i mean in an foreach like this:

    foreach(xxx)
{
<a href="@item.imagepath" data-lightbox="@item.gallerytitle"></a>
}

    no i don't use nested content.

    im working with this method: https://our.umbraco.org/documentation/tutorials/creating-basic-site/articles-parent-and-article-items

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 11:42
    David Peck
    1

    Ignore myLightboxGallery if you're sticking with your approach.

    So you'll need something like this:

    @foreach(var galleryItem in Model.Content.Children("bilder_item")){
    IEnumerable<int> mediaIds = galleryItem.GetPropertyValue<IEnumerable<int>>("mediaIds");
    IEnumerable<IPublishedContent> mediaItems = mediaIds.Select(i => Umbraco.TypeContent(i));
    foreach(var mediaItem in mediaItems){
        @mediaItem.Url
    }
}
    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 11:52
    Hubert Thalmann
    1

    sorry i'm new to umbraco.

    now it says: there is no definition for "TypeContent"

    why?

    EDIT:

    is it right to make a Makro and then in my "Bilder" Template i make:

    @Umbraco.RenderMacro("listBilder")

    and the makro looks like this:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage

@foreach(var galleryItem in Model.Content.Children("bilder_item")){
    IEnumerable<int> mediaIds = galleryItem.GetPropertyValue<IEnumerable<int>>("mediaIds");
    IEnumerable<IPublishedContent> mediaItems = mediaIds.Select(i => Umbraco.TypeContent(i));
    foreach(var mediaItem in mediaItems){
        @mediaItem.Url
    }
}
    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 12:33
    David Peck
    1

    Because it should be TypedContent. Sorry

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 12:42
    Hubert Thalmann
    0

    oh, i didnt see that. thank you

    um now there is a new error now.

    enter image description here

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 12:47
    David Peck
    1

    I think that would suggest the property mediaIds is not returning an IEnumerable<int>. Outputing @galleryItem.GetProperty("mediaIds").Value.GetType() will probably tell you what it is.

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 12:37
    Hubert Thalmann
    0

    please help

    @inherits Umbraco.Web.Macros.PartialViewMacroPage


    @{ var selection = CurrentPage.Children.Where("Visible"); }

    @if (selection.Any())
    {
            @foreach (var item in selection)
            {
                   <a href="@item.MediaIds" data-lightbox="@item.galerietitel"></a>
            }
    }

    but the @item.MediaIds doesn't work :/

    it could be something like this.. not?

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 12:45
    David Peck
    1

    item.MediaIds I think is going to be a collection of ids rather than a single one but I could be wrong.

    You could try outputing @item.MediaIds.GetType() to tell. If I'm right than this might help: @foreach (var mediaId in selection.SelectMany(s => s.MediaIds)){ }

    However they will give you an id (e.g. 1001) not the URL that you're after. You'll need to first convert 1001 in to a media item

    var mediaItem = Umbraco.Content(mediaId)

    and then you'll need to get the URL of that item e.g.

    @mediaItem.Url

    It might be getting ahead of ourselves but you might want to output a URL that returns a scaled image (see here).

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 12:50
    Hubert Thalmann
    0

    no i don't need a scaled image.

    and outputing @item.MediaIds.GetType() gives: System.String

    or did i do something wrong?

    EDIT: @galleryItem.GetProperty("mediaIds").Value.GetType() is also System.String

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 13:00
    Hubert Thalmann
    0

    okay now i get it i think. If i make

    @inherits Umbraco.Web.Macros.PartialViewMacroPage


@{ var selection = CurrentPage.Children.Where("Visible"); }

@if (selection.Any())
{
        foreach (var item in selection)
        {
            @item.mediaIds
        }
}

    it puts out: 1197,1200,1198,11991197,11981199,1266,1200 etc. (image ID if i understood you right)

    and now how do i get the URLs out of that "array maybe?"

    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 13:07
    Hubert Thalmann
    100

    i got it! finally^^

    @inherits Umbraco.Web.Macros.PartialViewMacroPage


@{ var selection = CurrentPage.Children.Where("Visible"); }

@if (selection.Any())
{
        foreach (var item in selection)
        {

    var caseStudyImagesList = (@item.mediaIds).Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var caseStudyImagesCollection = Umbraco.Media(caseStudyImagesList);

    foreach (var caseStudyImage in caseStudyImagesCollection)
    {
        <img src="@caseStudyImage.Url" style="width:300px;height:300px" />
    }
        }
}

    thank you very much for supporting

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 13:08
    David Peck
    1

    I'm not sure TBH. You're using dynamics which I've not used for a while but let's go with this:

    @{ var selection = CurrentPage.Children.Where("Visible"); }

@foreach (var item in selection)
{
    foreach(var mediaId in (item.mediaIds ?? "").Split(',')){
        var mediaItem = Umbraco.Media(mediaId);
        if(mediaItem != null){
            <p>Url is @mediaItem.Url</p>
        }
    }
}
    Copy Link
  • Hubert Thalmann 57 posts 263 karma points
    Aug 25, 2016 @ 13:12
    Hubert Thalmann
    0

    oh yes this is the shorter version, thank you so much

    Copy Link
  • David Peck 690 posts 1896 karma points c-trib
    Aug 25, 2016 @ 13:14
    David Peck
    1

    Great. Well done

    Copy Link

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

Please Sign in or register to post replies