Background Image Paths in Velocity Format

voltmer1's Avatar

voltmer1

17 Aug, 2016 03:18 PM

Hi,
I am having issues setting the correct path to apply a background image to a style attribute within a velocity. It doesn't like it when I using the [system-asset] tag within the script. What should I do to correct this?

    #if( 'Secondary' == $news_list_header_style )
        #set( $class = 'tier-secondary-header' )
        #if( 'Yellow' == $news_list_secondary_nav_style )
            #set( $background_image = 'img-t1-secondary-news.png' )
        #elseif( 'Blue' == $news_list_secondary_nav_style )
            #set( $background_image = 'img-t1-secondary-about.png' )
        #elseif( 'Pink' == $news_list_secondary_nav_style )
            #set( $background_image = 'img-t1-secondary-events.png' )
        #else
            #set( $background_image = 'img-t1-secondary-utility.png' )
        #end
        <div class="tier-secondary-header" style="background-image: url([system-asset]/assets/images/${background_image}[/system-asset]);">
            <div class="tier-secondary-header-holder">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="tier-secondary-header-content">
                                <h1 class="tier-secondary-header-title">$news_list_title</h1>
                                <div class="tier-secondary-header-text">$news_list_subtitle</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
  1. 1 Posted by Wing Ming Chan on 18 Aug, 2016 02:49 PM

    Wing Ming Chan's Avatar

    Hi Steve,

    Try the following:

    #set( $file_name = "dome.jpg" )
    #set( $s_system_asset = "[system-asset]" )
    #set( $e_system_asset = "[/system-asset]" )
    
    
    <!--<img src="${s_system_asset}site://Upstate-Globals/assets/images/about/${file_name}${e_system_asset}" alt="image" />--> <div style="width:300px;height:300px;background-image:url('${s_system_asset}site://Upstate-Globals/assets/images/about/${file_name}${e_system_asset}');background-color:red"></div>

    There are two things you need to pay attention to:

    1. You may need to use the img element to force the image to show up and cached. This is actually a good test for the path and [system-asset].

    2. You may want to store the variables $s_system_asset and $e_system_asset in a global format that can be reused.

    Wing

Comments are closed, but you can start a new discussion.

Keyboard shortcuts

Generic

? 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