Jump to content

Image Rotator for Characters in the Character Mod
   (0 reviews)

Kit the Human
  • The rotating avatars is for character accounts, with the wonderful character mod

     

    But you can adapt for use with regular accounts if you want. You will need to use different variables.

    Software: Invision Power Services (IPS) 166,165

First, set up the custom profile fields.

My set up is this:

  • Field Name: Rotating Avatar One
  • Key: rotate1
  • Description: Want a rotating avatar? Upload your first image here! Leave blank and use the edit character option to upload your single avatar. You must upload an image here for it to work. Recommended image size is 300px by 300px
  • Field Type: Upload
  • Required: No
  • Show on Character Profile: No
  • Show on Character Posts: No

 

Rinse and repeat, subsequent descriptions are the following: "Your second rotating image. Recommended image size is 300px by 300px." Make sure you change the key, so rotate1, rotate2, rotate3 etc

 

Now the code

Go to themes and click on the button with </> in it.

In the Templates tab, go to characters > character > authorpane

 

Put the following anywhere

{{if $character->fields('rotate1')}}
  <!-- ZERO -->
  {{$zero = \IPS\File::get( 'core_theme', $character->avatar)->url;}}
  <!-- BUILD Array -->
  	<!-- ALL THE IMAGES -->
  	<!-- IMAGE ONE -->
	{{if $character->fields('rotate1')}}
  		{{$string = ''.$character->fields('rotate1').'';}}
  		{{$avrotate1 = explode('"',strstr($string,'https://'))[0];}}
	{{endif}}
  	<!-- END ONE -->
	<!-- IMAGE TWO -->
  	{{if $character->fields('rotate2')}}
  		{{$string = ''.$character->fields('rotate2').'';}}
  		{{$avrotate2 = explode('"',strstr($string,'https://'))[0];}}
  	{{endif}}
	<!-- END TWO -->
	<!-- IMAGE THREE -->
  	{{if $character->fields('rotate3')}}
  		{{$string = ''.$character->fields('rotate3').'';}}
  		{{$avrotate3 = explode('"',strstr($string,'https://'))[0];}}
  	{{elseif $avrotate3 = $avrotate1}}
  	{{endif}}
  	<!-- END THREE -->

	<!-- IMAGES ABOVE THIS POINT -->

	<!-- RANDOM-->
  	{{$charimages = array("{$avrotate2}", "{$avrotate1}", "{$zero}");}}
  	{{$random_av = array_rand($charimages);}}
  	<!-- END RANDOM -->

  	<!-- END array -->
 {{endif}}

 

Explanation

So the first line says, if the player has uploaded something to the custom field with the key, rotate1, then do the following. In other words, this prevents the rest of the code from loading for players who have not uploaded any images to the custom profile fields we made earlier.

 

zero is the normal character profile. This is how I get it into a legible string (url) for use in the array later in the code.

 

What follows are two custom profile fields. As before, I need to get it into a legible string, not a lightbox link. Read more about that here.

 

However, once you get to three images, it is reasonable to assume that your users might not upload an image. Say, you have set up ten custom profile fields, you may have members who only have two avatars to add to the rotation. So, fields from 3 onwards should include an else. This is why image 3 looks like this

 

<!-- IMAGE THREE -->
  {{if $character->fields('rotate3')}}
  	{{$string = ''.$character->fields('rotate3').'';}}
  	{{$avrotate3 = explode('"',strstr($string,'https://'))[0];}}
  {{elseif $avrotate3 = $avrotate1}}
  {{endif}}
<!-- END THREE -->

 

The argument is this:

IF rotate3 is uploaded, avrotate3 will equal the image URL. IF nothing is uploaded to rotate3, then avrotate3 will equal avrotate1.

 

If you leave the above out, you will have broken images for any user who has not uploaded something for every rotating spot.

 

So if you want to keep adding images after the third one, you should use the following code

 

<!-- IMAGE NUMBER -->
  {{if $character->fields('YOUR_CUSTOM_PROFILE_FIELD_KEY')}}
  	{{$string = ''.$character->fields('YOUR_CUSTOM_PROFILE_FIELD_KEY').'';}}
  	{{$YOUR_VARIABLE_YOUR_CHOICE_BE_UNIQUE = explode('"',strstr($string,'https://'))[0];}}
  {{elseif $YOUR_VARIABLE_YOUR_CHOICE_BE_UNIQUE = $AVROTATE1_OR_ZERO_OR_AVROTATE2}}
  {{endif}}
<!-- END NUMBER -->

 

Enough about adding images! Let's learn about the array!

 

<!-- RANDOM-->
  {{$charimages = array("{$avrotate2}", "{$avrotate1}", "{$avrotate3}", "{$zero}");}}
  {{$random_av = array_rand($charimages);}}
<!-- END RANDOM -->

 

I am saying, $charimages is a list of things. It is, avrotate2, avrotate1, avrotate3 and zero.

Then I say, $randomav is a random selection from the charimages list.

 

If you have added more images, you need to add them to the array:

 

<!-- RANDOM-->
  {{$charimages = array("{$avrotate2}", "{$avrotate1}", "{$avrotate3}", "{$zero}", "{$ANOTHER_VARIABLE}", "{$ANOTHER_ANOTHER_VARIABLE}");}}
  {{$random_av = array_rand($charimages);}}
<!-- END RANDOM -->

 

Hallelujah! We finally have a variable that returns a random custom profile field.

 

Displaying the Avatar

Find the following:

<li class='cAuthorPane_photo'>
  <a href="{$character->url()}">
    <span class="ipsUserPhoto ipsUserPhoto_large">
      {{if $avatar = $character->avatar()}}
      	<img src="{$avatar->url}" alt="{$character->name}">
      {{else}}
      	<img src='{resource="default_photo.png" app="core" location="global"}' alt="{$character->name}">
      {{endif}}
    </span>
  </a>
</li>

Delete the above and replace with the following:

<li class='cAuthorPane_photo'>
  <a href="{$character->url()}">
    <span class="ipsUserPhoto ipsUserPhoto_large">
      {{if $character->fields('rotate1')}}  
      	<!-- ROTATOR -->
      	<img src="{$charimages[$random_av]}" id="rotatorav" alt="{$character->name}">
      	<!-- END ROTATOR -->       
      {{elseif $avatar = $character->avatar()}}
      	<img src="{$avatar->url}" alt="{$character->name}">
      {{else}}
      	<img src='{resource="default_photo.png" app="core" location="global"}' alt="{$character->name}">
      {{endif}}
    </span>
  </a>
</li>

The argument is this:

IF there is something uploaded to rotate1, then display our random variable.

OTHERWISE if the user has uploaded an avatar, display that.

OTHERWISE if the user has done none of the above, display the default avatar.

 

That's it! You just need to rinse and repeat in all of your other themes.

 

Some things to note:

  • You need to add this to the authorpanesmall for it to work on mobile
  • Every post will have a random avatar

  • Love 1

Related Guides




User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.