Image URLs

@iamtimbo
10 years ago
301 posts

I'm trying out some conditional formatting to override the CSS in a template for certain quotas. What I would like to happen is that if a profile image has been added, then that is used as the background image for the profile name div.

I know I can do this with an inline style tag, and an if/else requirement for the opening div tag, but I can't fathom how to get the profile image url into the inline styling:



             div.specbackground
              {
                background: url(shouldbethelinktotheprofileimage);
                border: 2px solid black;
                background-width: 100%;
                background-size:100%;
                background-repeat: no-repeat;  
                background-size: cover;
                background-position: center;
              }

I know how to display Images under normal circumstances using the jrImage functions, but not how to construct the URL......
updated by @iamtimbo: 07/19/15 06:09:22AM

@douglas
10 years ago
2,797 posts

You would need to add the background-image style directly to the div. Assuming your using the profile_name_box div for this it would be something like this:

<div class="profile_name_box"{if $profile_image_size > 0}style="background-image: url('shouldbethelinktotheprofileimage')"{/if}>

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@iamtimbo
10 years ago
301 posts

Hi, Douglas,

I managed that bit (getting there slowly with my smarty!) - it's how I deduce the profile image URL itself to use in the styling that I can't work out!

Tim

@douglas
10 years ago
2,797 posts

If its the profile image your using for the background-image, this should work:

<div class="profile_name_box"{if $profile_image_size > 0} style="background-image: url('{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$_profile_id size="xxlarge" class="img_scale img_shadow" alt=$profile_name width=false height=false}')"{/if}>

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@iamtimbo
10 years ago
301 posts

Hi again.

I didn't realise that literally output the URL you needed! Thank you!

Oddly, though, although I could see from Firebug that it was constructing the image source, for some reason, it doesn't load it. To take it apart, I've redone it as inline styling, but I'm encountering the same error. What I have now is this...

 
<style>
            div.specbackground
              {
                background: url('{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" size="xlarge" item_id=$_profile_id }');
                border: 2px solid black;
                background-width: 100%;
                background-size:100%;
                background-repeat: no-repeat;  
                background-size: cover;
                background-position: center;
              }
            </style>
            
            
            {if ($profile_image_size > 0) && ($profile_quota_id == '2')}
            <div class="specbackground">
            {else}
            <div class="covbackground">
            {/if}

Firebug reads that as:

div.specbackground {
    background: transparent url("<img src="http://ourtownstory.co.uk/profile/image/profile_image/29614/xlarge/_v=1422984525" width="384" alt="">") no-repeat scroll center center / cover;
    border: 2px solid #000;
}

but the image doesn't load - hovering over it in firebug just prompts "Could not load image" - even though the URLs for that and the 'actual' profile pic are exactly the same....

@douglas
10 years ago
2,797 posts

Yeah, that isn't going to work try this instead...

background: url('{$jamroom_url}/{jrCore_module_url module="jrProfile"}/{jrCore_module_url module="jrImage"}/profile_image/{$profile_id}/xlarge');
                border: 2px solid black;

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos