Velocity - Child Paths & CSS

Chris's Avatar


30 Oct, 2014 08:40 PM

For some odd reason, I am unable to capture the correct URL to place in the CSS. Once I deploy this (shown below), it works wonderfully, but in the preview of the page, it is broken.

Even in the preview it uses "/uploads/island.jpg", not the ...render... folder as it does with everything else.

#set ( $img = $page.getChild("system-data-structure").getChild("banner_image").getChild("path").value )

.page-intro {
  background: url("${img}");


.page-intro {
  background: url("/uploads/island.jpg");
  1. 1 Posted by Chris on 30 Oct, 2014 08:58 PM

    Chris's Avatar

    I tried the following, but this is in a Format.

    background: url("[system-asset]/test1${img}[/system-asset]");
  2. 2 Posted by Ryan Griffith on 31 Oct, 2014 01:52 PM

    Ryan Griffith's Avatar

    Hi Chris,

    Referencing the image's path, or link, within a [system-asset] pseudo tag should do the trick. Curious, where is the /test1 coming from in your example? When you have a moment, try the following and let me know how it works out. Also, double check to make sure you are setting the $img variable correctly.

    #set ( $img = $page.getChild("system-data-structure").getChild("banner_image").getChild("link").value )
    .page-intro {
      background: url("[system-asset]${img}[/system-asset]");

    Note: I changed path to link so you can properly handle situations where the image is from another Site.

    Please let me know if you have any questions.


  3. 3 Posted by Chris on 31 Oct, 2014 09:16 PM

    Chris's Avatar

    You sir, are a gentleman and a scholar. Worked like a champ!!!

  4. Chris closed this discussion on 31 Oct, 2014 09:16 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac