Cover Image - Easy Install

[leif]

Cover images! They're amazing and super simple. I rather like them on website profiles, don't you? Well, a long time ago I developed them for ProBoards for this little Harry Potter RPG known as Fidelius. It's a bit crazy there. Our cover images sometimes gets a bit crazy, but, I like it that way. If you credit me, you can link to Fidelius.

Previews:
fidelius.forums.net/user/640
fidelius.forums.net/user/478

Anyways it's super easy!

Templates > User Profile > Find:
div class="container show-user">
<div class="title-bar">
<h1>View Profile - $[user.name] ($[user.username])</h1>
</div>

Add Under:
           <div style="width:100%;height:300px;background-image: url('http://i.imgur.com/npcoBXg.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Cover Image"}background-image:url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;background-position: right center;display:none;{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Show Cover Image"}{if $[user.mini_custom_field.value] == "Yes"}display:inline-block;{/if}{/if}{/foreach}"></div>


Save:

Go to Members > Custom Profile Fields > Add fields:
- add a field for a link to a cover image. Title this Cover Image
- add a field for Show Cover Image, Radio or dropdown with one answer being 'Yes'. Title this Show Cover Image.
- Select show on Mini-Profiles only otherwise ProBoards won't allow repeat fields on profile pages!

That's it!

[Tiffy-Bean]

If I may ask what are the general dimensions for a cover? I know the height is 300 px and I know it re-sizes itself to accommodate the width and height but I want to know what's generally the size a person should shoot for?

This works beautifully and was easy to install. Using here: thecityofsin.freeforums.net/

[Phear]

Is it possible to set this to display by default?

[leif]

the dimensions depend on your skin/template Tiffy-Bean

Phear yes / no. By default this isn't a feature of custom profile fields as stated here. But, you can remove the show field option and force it to show to everyone and have a default.

[Phear]

Aug 21, 2015 20:24:10 GMT -8 leif said:

the dimensions depend on your skin/template Tiffy-Bean

Phear yes / no. By default this isn't a feature of custom profile fields as stated here. But, you can remove the show field option and force it to show to everyone and have a default.

How exactly would I go about doing that? Just keep the field private, and force it to be set to Yes by default?

[leif]

Remove it from the code.

           <div style="width:100%;height:300px;background-image: url('http://i.imgur.com/npcoBXg.jpg');{foreach $[user.mini_custom_field]}{if $[user.mini_custom_field.name] == "Cover Image"}background-image:url('$[user.mini_custom_field.value]');{/if}{/foreach}background-size:cover;background-position: right center;display:inline;"></div>

Try that


Also if you don't want to mess with the code much just edit the display:none to display:inline and it'd force it on for everyone

[FogBeam]

For some reason, leif , those didn't work for me. The cover photo just doesn't show up period when I do either of these options, but it shows up perfectly fine with the original code ):

EDIT: In your original help post, you said "Also if you don't want to mess with the code much just edit the display:none to display:inline and it'd force it on for everyone", and I figured out that simply changing it to display:inline-block instead does the job. Thank you for this code! (:

[leif]

Jun 13, 2016 15:00:35 GMT -8 FogBeam said:

For some reason, leif , those didn't work for me. The cover photo just doesn't show up period when I do either of these options, but it shows up perfectly fine with the original code ):

EDIT: In your original help post, you said "Also if you don't want to mess with the code much just edit the display:none to display:inline and it'd force it on for everyone", and I figured out that simply changing it to display:inline-block instead does the job. Thank you for this code! (:

Thanks for sharing the fix you figured out. I rather love cover images myself!

[Ben Goodman]

It used to work, i have changed nothing, and now it disappeared.

The image link is still aviable.