Sign in Register
Go to solution
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 1929 posts 6697 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 1929 posts 6697 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 1929 posts 6697 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 1929 posts 6697 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 1929 posts 6697 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 1929 posts 6697 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
Please Sign in or register to post replies

Write your reply to:

Draft