This topic contains 9 replies, has 3 voices, and was last updated by Sean Sean 2 years, 8 months ago.

SASS variable for image paths


  • craig-digitonic
    Participant

    Posts: 3
    Member Reply #5537

    Hi,

    The URL paths for CSS images should be configurable rather than being hard-coded. Can this be implemented in the next release?

    Thanks,

    Craig

     

     

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5541

    Hi :),

    Sure. We will implement this in the next update. If you don’t mind can you please advise with image paths are you referring to ?

    Thanks.

     


    craig-digitonic
    Participant

    Posts: 3
    Member Reply #5544
    /sass/layouts/layout2/layout/_header.scss:136:		background-image: url(../img/sidebar-toggler.png); 
    /sass/layouts/layout2/layout/_header.scss:156:			background-image: url(../img/sidebar-toggler-inverse.png); 			
    /sass/layouts/layout2/layout/_header.scss:933:			background-image: url(../img/sidebar-toggler.png); 	     		
    /sass/layouts/layout4/themes/_base.scss:305:            background-image: url(../../img/#{$header-toggler-img});   
    /sass/layouts/layout6/layout/_content.scss:7:    background: $color-default url(../img/bg_01.jpg) no-repeat;
    /sass/layouts/layout3/layout/_header.scss:517:            background: url(../img/menu-toggler.png) center center;
    /sass/layouts/layout/themes/_base.scss:281:            background-image: url(../../img/sidebar_toggler_icon_#{$theme-name}.png);
    /sass/layouts/layout/themes/_base.scss:783:            background: url(../../img/sidebar_inline_toggler_icon_#{$theme-name}.jpg); 
    /sass/layouts/layout/layout/_theme-panel.scss:21:        background: lighten($theme-panel-bg-color, 20%) url(../img/icon-color.png) center no-repeat;
    /sass/layouts/layout/layout/_theme-panel.scss:38:        background: $theme-panel-bg-color url(../img/icon-color-close.png) center no-repeat !important;
    /sass/layouts/layout/layout/_theme-panel.scss:152:            background:#BFCAD1 url(../img/icon-color.png) center no-repeat;
    /sass/pages/coming-soon.scss:77:	background: url(../img/bg-white.png) repeat;  
    /sass/pages/profile-2.scss:207:  background:url(../../img/icon-img-up.png) no-repeat !important;
    /sass/pages/profile-2.scss:211:  background:url(../../img/icon-img-down.png) no-repeat !important;
    /sass/pages/lock-2.scss:28:   background: url(../img/bg-white-lock.png) repeat;
    /sass/pages/login-4.scss:20:  background: url(../img/bg-white-lock.png) repeat;
    /sass/global/_variables.scss:41:$general-img-path:                  '../img/' !default; 
    /sass/global/components/_metro-icons.scss:12:    background-image: url(../img/syncfusion-icons.png);
    /sass/global/components/_metro-icons.scss:23:    background-image: url(../img/syncfusion-icons.png);
    /sass/global/components/_metro-icons.scss:60:    background-image: url(../img/syncfusion-icons-white.png);
    /sass/global/components/_close.scss:14:	background-image: url("../img/remove-icon-small.png") !important;
    /sass/global/components/_panels.scss:38:            background: url("../img/accordion-plusminus.png") no-repeat;
    /sass/global/components/_social-icons.scss:47:        .amazon {background: url(../img/social/amazon.png) no-repeat;}
    /sass/global/components/_social-icons.scss:48:        .behance {background: url(../img/social/behance.png) no-repeat;}
    /sass/global/components/_social-icons.scss:49:        .blogger {background: url(../img/social/blogger.png) no-repeat;}
    /sass/global/components/_social-icons.scss:50:        .deviantart {background: url(../img/social/deviantart.png) no-repeat;}
    /sass/global/components/_social-icons.scss:51:        .dribbble {background: url(../img/social/dribbble.png) no-repeat;}
    /sass/global/components/_social-icons.scss:52:        .dropbox {background: url(../img/social/dropbox.png) no-repeat;}
    /sass/global/components/_social-icons.scss:53:        .evernote {background: url(../img/social/evernote.png) no-repeat;}
    /sass/global/components/_social-icons.scss:54:        .facebook {background: url(../img/social/facebook.png) no-repeat;}
    /sass/global/components/_social-icons.scss:55:        .forrst {background: url(../img/social/forrst.png) no-repeat;}
    /sass/global/components/_social-icons.scss:56:        .github {background: url(../img/social/github.png) no-repeat;}
    /sass/global/components/_social-icons.scss:57:        .googleplus {background: url(../img/social/googleplus.png) no-repeat;}
    /sass/global/components/_social-icons.scss:58:        .jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
    /sass/global/components/_social-icons.scss:59:        .last-fm {background: url(../img/social/last-fm.png) no-repeat;}
    /sass/global/components/_social-icons.scss:60:        .linkedin {background: url(../img/social/linkedin.png) no-repeat;}
    /sass/global/components/_social-icons.scss:61:        .picasa {background: url(../img/social/picasa.png) no-repeat;}
    /sass/global/components/_social-icons.scss:62:        .pintrest {background: url(../img/social/pintrest.png) no-repeat;}
    /sass/global/components/_social-icons.scss:63:        .rss {background: url(../img/social/rss.png) no-repeat;}
    /sass/global/components/_social-icons.scss:64:        .skype {background: url(../img/social/skype.png) no-repeat;}
    /sass/global/components/_social-icons.scss:65:        .spotify {background: url(../img/social/spotify.png) no-repeat;}
    /sass/global/components/_social-icons.scss:66:        .stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
    /sass/global/components/_social-icons.scss:67:        .tumblr {background: url(../img/social/tumblr.png) no-repeat;}
    /sass/global/components/_social-icons.scss:68:        .twitter {background: url(../img/social/twitter.png) no-repeat;}
    /sass/global/components/_social-icons.scss:69:        .vimeo {background: url(../img/social/vimeo.png) no-repeat;}
    /sass/global/components/_social-icons.scss:70:        .wordpress {background: url(../img/social/wordpress.png) no-repeat;}
    /sass/global/components/_social-icons.scss:71:        .xing {background: url(../img/social/xing.png) no-repeat;}
    /sass/global/components/_social-icons.scss:72:        .yahoo {background: url(../img/social/yahoo.png) no-repeat;}
    /sass/global/components/_social-icons.scss:73:        .youtube {background: url(../img/social/youtube.png) no-repeat;}
    /sass/global/components/_social-icons.scss:74:        .vk {background: url(../img/social/vk.png) no-repeat;}
    /sass/global/components/_social-icons.scss:75:        .instagram {background: url(../img/social/instagram.png) no-repeat;}
    /sass/global/components/_social-icons.scss:76:        .reddit {background: url(../img/social/reddit.png) no-repeat;}
    /sass/global/components/_social-icons.scss:77:        .aboutme {background: url(../img/social/aboutme.png) no-repeat;}
    /sass/global/components/_social-icons.scss:78:        .flickr {background: url(../img/social/flickr.png) no-repeat;}
    /sass/global/components/_social-icons.scss:79:        .foursquare {background: url(../img/social/foursquare.png) no-repeat;}
    /sass/global/components/_social-icons.scss:80:        .gravatar {background: url(../img/social/gravatar.png) no-repeat;}
    /sass/global/components/_social-icons.scss:81:        .klout {background: url(../img/social/klout.png) no-repeat;}
    /sass/global/components/_social-icons.scss:82:        .myspace {background: url(../img/social/myspace.png) no-repeat;}
    /sass/global/components/_social-icons.scss:83:        .quora {background: url(../img/social/quora.png) no-repeat;}
    /sass/global/components/_social-icons.scss:140:    &.amazon {background: url(../img/social/amazon.png) no-repeat;}
    /sass/global/components/_social-icons.scss:141:    &.behance {background: url(../img/social/behance.png) no-repeat;}
    /sass/global/components/_social-icons.scss:142:    &.blogger {background: url(../img/social/blogger.png) no-repeat;}
    /sass/global/components/_social-icons.scss:143:    &.deviantart {background: url(../img/social/deviantart.png) no-repeat;}
    /sass/global/components/_social-icons.scss:144:    &.dribbble {background: url(../img/social/dribbble.png) no-repeat;}
    /sass/global/components/_social-icons.scss:145:    &.dropbox {background: url(../img/social/dropbox.png) no-repeat;}
    /sass/global/components/_social-icons.scss:146:    &.evernote {background: url(../img/social/evernote.png) no-repeat;}
    /sass/global/components/_social-icons.scss:147:    &.facebook {background: url(../img/social/facebook.png) no-repeat;}
    /sass/global/components/_social-icons.scss:148:    &.forrst {background: url(../img/social/forrst.png) no-repeat;}
    /sass/global/components/_social-icons.scss:149:    &.github {background: url(../img/social/github.png) no-repeat;}
    /sass/global/components/_social-icons.scss:150:    &.googleplus {background: url(../img/social/googleplus.png) no-repeat;}
    /sass/global/components/_social-icons.scss:151:    &.jolicloud {background: url(../img/social/jolicloud.png) no-repeat;}
    /sass/global/components/_social-icons.scss:152:    &.last-fm {background: url(../img/social/last-fm.png) no-repeat;}
    /sass/global/components/_social-icons.scss:153:    &.linkedin {background: url(../img/social/linkedin.png) no-repeat;}
    /sass/global/components/_social-icons.scss:154:    &.picasa {background: url(../img/social/picasa.png) no-repeat;}
    /sass/global/components/_social-icons.scss:155:    &.pintrest {background: url(../img/social/pintrest.png) no-repeat;}
    /sass/global/components/_social-icons.scss:156:    &.rss {background: url(../img/social/rss.png) no-repeat;}
    /sass/global/components/_social-icons.scss:157:    &.skype {background: url(../img/social/skype.png) no-repeat;}
    /sass/global/components/_social-icons.scss:158:    &.spotify {background: url(../img/social/spotify.png) no-repeat;}
    /sass/global/components/_social-icons.scss:159:    &.stumbleupon {background: url(../img/social/stumbleupon.png) no-repeat;}
    /sass/global/components/_social-icons.scss:160:    &.tumblr {background: url(../img/social/tumblr.png) no-repeat;}
    /sass/global/components/_social-icons.scss:161:    &.twitter {background: url(../img/social/twitter.png) no-repeat;}
    /sass/global/components/_social-icons.scss:162:    &.vimeo {background: url(../img/social/vimeo.png) no-repeat;}
    /sass/global/components/_social-icons.scss:163:    &.wordpress {background: url(../img/social/wordpress.png) no-repeat;}
    /sass/global/components/_social-icons.scss:164:    &.xing {background: url(../img/social/xing.png) no-repeat;}
    /sass/global/components/_social-icons.scss:165:    &.yahoo {background: url(../img/social/yahoo.png) no-repeat;}
    /sass/global/components/_social-icons.scss:166:    &.youtube {background: url(../img/social/youtube.png) no-repeat;}
    /sass/global/components/_social-icons.scss:167:    &.vk {background: url(../img/social/vk.png) no-repeat;}
    /sass/global/components/_social-icons.scss:168:    &.instagram {background: url(../img/social/instagram.png) no-repeat;}
    /sass/global/components/_social-icons.scss:169:    &.reddit {background: url(../img/social/reddit.png) no-repeat;}
    /sass/global/components/_social-icons.scss:170:    &.aboutme {background: url(../img/social/aboutme.png) no-repeat;}
    /sass/global/components/_social-icons.scss:171:    &.flickr {background: url(../img/social/flickr.png) no-repeat;}
    /sass/global/components/_social-icons.scss:172:    &.foursquare {background: url(../img/social/foursquare.png) no-repeat;}
    /sass/global/components/_social-icons.scss:173:    &.gravatar {background: url(../img/social/gravatar.png) no-repeat;}
    /sass/global/components/_social-icons.scss:174:    &.klout {background: url(../img/social/klout.png) no-repeat;}
    /sass/global/components/_social-icons.scss:175:    &.myspace {background: url(../img/social/myspace.png) no-repeat;}
    /sass/global/components/_social-icons.scss:176:    &.quora {background: url(../img/social/quora.png) no-repeat;}
    /sass/global/plugins/_datatables.scss:217:  background: url("../img/datatable-row-openclose.png") no-repeat 0 0;
    /sass/global/plugins/_datatables.scss:221:  background: url("../img/datatable-row-openclose.png") no-repeat 0 -23px ;
    /sass/global/plugins/_bootstrap-toastr.scss:34:  background-image: url("../img/portlet-remove-icon-white.png") !important;
    /sass/global/plugins/_jquery-file-upload.scss:6:  background-image: url("../img/portlet-remove-icon-white.png") !important;
    
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5555

    Hi, Noted. Thanks for the clarifications.


    craig-digitonic
    Participant

    Posts: 3
    Member Reply #5593

    Hi,

    This wasn’t fixed in the recent update. Will it be fixed in the next? If so, when do you expect that to be released?

    Thanks,

    Craig

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5607

    Hi,

    This will be a global change so we needed some time to implement it properly. Hopefully we can implement this in the next update. May i know your use case ? How you are planning to reorganize the assets and its folders ?

    Thanks.


    craig-digitonic
    Participant

    Posts: 3
    Member Reply #5609

    Hi,

    I always favor configuration over convention. Without the ability to decide where images should be served from, I’m forced to conform to the theme’s convention.

    Supposing I have gulp compile my CSS into /assets/compiled/css/foo.css, then I’m required to host images at /assets/compiled/img/, which doesn’t make sense or suit my application.

    At the moment I’m using gulp-replace to hard-change the paths at compilation time, but this feels ugly and will only get more difficult to maintain. Implementing variable asset paths is the best solution (even Bootstrap lets you configure these paths e.g. $icon-font-path).

    Thanks,

    Craig

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5616

    Hi :),

    Noted. We will take this into account and try to provide this enhancement in the next update.

    Thanks.


    Shehi
    Participant

    Posts: 3
    Member Reply #5729

    +1

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #5798

    Noted 🙂

Tagged: 

You must be logged in to reply to this topic.