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


  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 14:32
    Jason Kunkle
    0

    Error when Query Builder displays image

    I was using this Create a Blog tutorial on YouTube for reference... https://www.youtube.com/watch?v=xMS-rtqhWzU&t=4s

    I have an Interior Page Document Type that has Interior Page Items and the child node.

    In the Interior Page Items Document Type I have a couple Image Media Pickers and a couple Rich Text Editors.

    In my template I use the Query Builder to display the Interior Page Items. See screen shot below... enter image description here

    When I try to preview the Content of the page I get the error in the screen shot below... enter image description here

    I've compaired the code I have with what was in the YouTube video I liked above and I can not see an issue. If I remove the image code from the tempate the error goes away and I can see the text I enter in the rich text editor. So I know it has something to do with these lines of code...

    var imageLeft = item.Value<IPublishedContent>("leftImage");
<div style="background-image('@imageLeft.Url()')"></div>

    What could I be doing wrong?

    Thank you for the help.

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 15:29
    Huw Reddick
    0

    The only thing I can think is that item does not think it is an IPublishedContent .

    Are able to add a breakpoint on the foreach line to see what it thinks selection is?

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 18:19
    Jason Kunkle
    0

    This is the value that gets returned from item.Value

    Umbraco.Cms.Core.Models.MediaWithCrops`1[Umbraco.Cms.Web.Common.PublishedModels.Image]

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 18:35
    Huw Reddick
    0

    Unsure if this is partly your problem, but your inline style is wrong, it should be background-image:url()

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 18:40
    Jason Kunkle
    0

    Here is the error I get when I user background-image:url()... enter image description here

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 18:46
    Huw Reddick
    0

    What umbraco version are you using and I will see if I can replicate your issue

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 18:46
    Jason Kunkle
    0

    11.3.1

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 19:07
    Huw Reddick
    0

    I can't see anything wrong, I ran a very simple test and it works ok for me.

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.HomePage>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    Layout = null;
    var selection = Umbraco.Content(1065).ChildrenOfType("plain");
}
@foreach (var item in selection)
{
    var leftImage = item.Value<IPublishedContent>("leftImage");
    <div style="height: 400px; width: 400px;background-image: url('@leftImage.Url()')"></div>
}
    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 19:21
    Jason Kunkle
    0

    I'm not getting the error now but the background image is not showing up. Instead of using a background image I'd actually rather do something this...

    When I try that there it just looks like a broken image link. How would I get just the image to display.

    Also I want to thank you for the help and quick responces. I really appreciate it!

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 19:22
    Jason Kunkle
    0

    The code I copyed didn't show up. Basically I want to display the image in a standared image tag.

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 19:51
    Huw Reddick
    0

    You just use @imageLeft.Url() in the src attribute of an img tag

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 19:56
    Jason Kunkle
    0

    When I try that I get this error... enter image description here

    Copy Link
  • Huw Reddick 1932 posts 6722 karma points MVP 2x c-trib
    Aug 29, 2023 @ 20:06
    Huw Reddick
    0

    You have two sets of quotes, remove the single ' from inside the " quotes

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 30, 2023 @ 15:25
    Jason Kunkle
    100

    I figured out my issue. I needed to use .MediaUrl() instead of .Url().

    Thank you for taking the time to help. I really appreciate it.

    Copy Link
  • Jason Kunkle 13 posts 123 karma points
    Aug 29, 2023 @ 20:13
    Jason Kunkle
    0

    I've tried it with just the single quote, just the double quote and with no quote and I keep getting the same error.

    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