or Create a profile

Home → Velocity Formats →

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

Discussions are closed to public comments.
If you need help with Cascade CMS please start a new discussion.

  • New Issue

  • Conversation Started

    A conversation has been started with the Cascade CMS staff to resolve this discussion.

  • Close the discussion

Private Permissions

This discussion is private. Only you and Cascade CMS support staff can see and reply to it.

Public Permissions

This discussion is public. Everyone can see and reply to it.

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

Recent Discussions

26 Oct, 2017 08:45 PM Incorrect path in submenus
31 Jan, 2017 08:08 PM example of php (web services) that reads a page and writes a new one
15 Sep, 2016 04:50 PM Best way to convert title tags to h1 tags
30 Aug, 2016 12:28 PM Query using selected option value from select
26 Aug, 2016 02:40 PM Are we suppose to use the new help/support website?

 

26 Aug, 2016 01:19 PM Links in PDF Output
25 Aug, 2016 03:02 PM Site Import Issues
25 Aug, 2016 12:50 PM Velocity syntax for conditional statement with two or more conditions
24 Aug, 2016 08:43 PM Increment integer on loop
24 Aug, 2016 07:20 PM Multi-select
21 Aug, 2016 01:20 PM Include contents from a rendered page