FANDOM


  • Is there any way for photos to appear circle? Like say that I wanted to have something like this:

    Screenshot 2017-02-11 at 7.01.00 PM
    Is there a way to acheive this and how would I do it? 
      Loading editor
    • Is this what you are looking for?

      [1]

        Loading editor
    • Here's another way... based on: http://sixrevisions.com/css/circular-images-css/

      You can see it work by copying the CSS part below into your Special:MyPage/wikia.css and visiting User:Fandyllic/sandbox-circular-crop-test.

      HTML/wikitext
      <div class="circular--landscape">[[File:Desert.jpg|270px]]</div>
      
      CSS
      .circular--landscape > a > img {
        display: inline-block;
        position: relative;
        height: 200px;
        width: 200px;
        overflow: hidden;
        border-radius: 50%;
      }
      

      You will have to tweak the height: and width: in the CSS to match the height of the image. It just happened that the image I chose to test with was approx 200 px tall when you make it 270 px wide.

        Loading editor
    • @Fandyllic copying the CSS part and visiting that test site worked for me, but how can I make a gallery with 3 pictures that are circular? like, for my profile?

        Loading editor
    • MaknaeLivi wrote: Is there any way for photos to appear circle? Like say that I wanted to have something like this:

      Screenshot 2017-02-11 at 7.01.00 PM
      Is there a way to acheive this and how would I do it? 

      Do you mean avatars? There is this stylesheet.

        Loading editor
    • Gagahs wrote: @Fandyllic copying the CSS part and visiting that test site worked for me, but how can I make a gallery with 3 pictures that are circular? like, for my profile?

      Once you've added the code to your CSS it'll work for any picture wrapped in that tag.

      So if you want 3 circular pictures in your profile, it'd just be:

      <div class="circular--landscape">[[File:ProfilePic1]][[File:ProfilePic2]][[File:ProfilePi3]]</div>
        Loading editor
    • @MZD thank you so much, that worked just fine for me, but somehow the pictures i chose are kind of distorted, do they have to be like 300x300px? And how can I add a spinning effect and a white border to these pictures? 

        Loading editor
    • and also: how can I change the size of the rounded pictures? with widths=...px?

        Loading editor
    • I was wondering how I could add a spinning effect too.

        Loading editor
    • I believe the spinning effect has to be done using JS, not CSS.

      With regards to the sizes, changing the size of the circle can be done by changing the "height" and "width" properties in the CSS.

      For now, you images are going to need to be squares to avoid skewing. I tried looking into an alternative but it didn't work out.


      Try adding the following property to the CSS.

      object-fit: cover;

      It won't work for Internet Explorer but it seems most people don't care about that. Also, I am not convinced using the overflow property is necessary. However, it doesn't seem to hurt if you keep it.

        Loading editor
    • The spinning can actually be done through CSS, depends on how you want it spin. Do you want the circle images to constantly spin or to only spin when they're hovered over?

        Loading editor
    • I want it to spin when they're hovered over.

        Loading editor
    • Here's 2 different hover codes

      This one will make the image steadily spin as long as you're hovered over it CSS:

      .circular {
        display: inline-block;
        position: relative;
        height: 290px;
        width: 290px;
        overflow: hidden;
        border-radius: 50%;
      }
       
      #spin-wrapper:hover {
          position: absolute;
      }
       
      #spin:hover {
         display: block;
          position: relative;
          -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
          animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
      }
       
      @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg); 
        transform: rotate(0deg);
          }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
          }
      }
      @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg); 
        transform: rotate(0deg);
          }
      100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
          }
      }

      This one will just make the image spin once when it's hovered over CSS:

      .circular {
        display: inline-block;
        position: relative;
        height: 290px;
        width: 290px;
        overflow: hidden;
        border-radius: 50%;
      }
       
      #spin-wrapper:hover {
          position: absolute;
      }
       
      #spin:hover {
         display: block;
          position: relative;
      transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      -webkit-transition: all .9s ease;
      -moz-transition: all .9s ease;
      -o-transition: all .9s ease;
      }

      Use either on your page like:

      <div id="spin-wrapper"><div id="spin"><div class="circular">[[File:ProfilePic1]]</div></div></div>
      
        Loading editor
    • ΜΖD wrote:

      Gagahs wrote: @Fandyllic copying the CSS part and visiting that test site worked for me, but how can I make a gallery with 3 pictures that are circular? like, for my profile?

      Once you've added the code to your CSS it'll work for any picture wrapped in that tag.

      So if you want 3 circular pictures in your profile, it'd just be:

      <div class="circular--landscape">[[File:ProfilePic1]][[File:ProfilePic2]][[File:ProfilePi3]]</div>

      This code worked for me, now I have three circular pictures on my profile. But where do I have to put the latest code you sent?

      (div id spin wrapper)

      Also, how can I change the size of the circular pictures? 

      (This is so difficult to me, sorry if I'm such a noob omg)

        Loading editor
    • All CSS should go in the same place.

        Loading editor
    • Personal CSS should go in yourwiki.wikia.com/wiki/Special:MyPage/wikia.css (for default Oasis skin) or /common.css (for all skins). See Help:Personal CSS and JS.

      Wiki-wide CSS should go in yourwiki.wikia.com/wiki/MediaWiki:Wikia.css (for default Oasis skin) or /MediaWiki:Common.css (for all skins), but may depend on how old your wiki is. See Help:Community CSS and JS.

        Loading editor
    • Yea I know, but I want to put the code down below in my profile, like in the classic editor. So far I've got:

      <center><div class="circular--landscape">[[File:example.png]][[File:example.png]][[File:example.png]]</div></center>

      And I just want to know where I should put this code.

      <div id="spin-wrapper"><div id="spin"><div class="circular">[[File:ProfilePic1]]</div></div></div>

      Do I combine these two like so? (I just don't know lmao)

      <center><div id="spin-wrapper"><div id="spin"><div class="circular"><div class="circular--landscape">[[File:example.png]][[File:example.png]][[File:example.png]]</div></div></div></div></center>

      (Also, English isn't my mother tongue so please excuse if you misunderstood something)

        Loading editor
    • You can combine classes and you shouldn't use <center> since it's deprecated.

      Maybe this will work?

      <div id="spin-wrapper spin circular circular--landscape" style="margin-auto; text-align:center;">[[File:example.png]][[File:example.png]][[File:example.png]]</div>
        Loading editor
    • That doesn't work :c

        Loading editor
    • Can you give a link to where you are trying to get this to work? Without seeing your actual code, it's very hard to troubleshoot.

        Loading editor
    • I see a problem immediately in w:c:de.americanhorrorstory:Benutzer:Gagahs/wikia.css...

      Remove the tags: <nowiki> and </nowiki>

      I also screwed up my code suggestion, since spin-wrapper and spin are id's...

      MZD would be the best person to ask about how to finish the code, but you can try:

      <div id="spin-wrapper" style="margin-auto; text-align:center;">
      <div id="spin" class="circular circular--landscape">[[Datei:lg2.png]][[Datei:lg1.png]][[Datei:lg3.png]]</div>
      </div>
        Loading editor
    • Alright, thank you! :-)

      ( That code also doesn't work :/ )

        Loading editor
    • Okay, if MZD doesn't reply I will see if I can get some code to work in a sandbox and give you a new set.

      My previous code was mostly guessing, so it doesn't surprise me it doesn't work.

        Loading editor
    • I did test the code on another site, but not on Wikia itself so maybe the issue lies there. I'll test it on my wiki in a few here and see what I can do.

        Loading editor
    • Alright, here's a working example using the second hover code
      http://popn-music.wikia.com/wiki/User:ΜΖD/Sandbox

      This is the CSS. If you want other users to be able see the effect as well you have to put it in your Wikia.css (height and width under .circular can be changed to your liking)

      .circular {
        display: block;
        position: relative;
        height: 250px;
        width: 250px;
        overflow: hidden;
        border-radius: 50%;
      }
       
      .circular:hover {
      transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      -webkit-transition: all .9s ease;
      -moz-transition: all .9s ease;
      -o-transition: all .9s ease;
      }

      Then the code you'll use on your page is:

      <div class="circular">[[Datei:lg2.png]]</div>
      <div class="circular">[[Datei:lg1.png]]</div>
      <div class="circular">[[Datei:lg3.png]]</div>
        Loading editor
    • http://de.americanhorrorstory.wikia.com/wiki/User:Gagahs/wikia.css

      I don't know what I'm doing wrong, but somehow it still doesn't work.. Could you take a look at it?

        Loading editor
    • Gagahs wrote: http://de.americanhorrorstory.wikia.com/wiki/User:Gagahs/wikia.css

      I don't know what I'm doing wrong, but somehow it still doesn't work.. Could you take a look at it?

      Your CSS is buggy (missing a { )...

      Try this:

      .circular {
        display: block;
        position: relative;
        height: 450px;
        width: 450px;
        overflow: hidden;
        border-radius: 50%;
      }
       
      .circular:hover {
      transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      -webkit-transition: all .9s ease;
      -moz-transition: all .9s ease;
      -o-transition: all .9s ease;
      }
        Loading editor
    • Yes, it finally worked!! Thank you all so much, though I have one more question: How can I get all three pics in a row? And I want the pics to be centered, like, right now you can only see the hair, you know? But I want the face to show.

      But again, thank you so much for your effort, you all really helped me!

        Loading editor
    • Also, if I log out with my account and go on my profile, the pictures are no longer circular, but I want even unregistered users to see them circular :S

        Loading editor
    • Gagahs wrote: Also, if I log out with my account and go on my profile, the pictures are no longer circular, but I want even unregistered users to see them circular :S

      That is because you only have it in your personal CSS at the moment. To apply the style for all users, you need to put it in the site's CSS.

        Loading editor
    • Ahhh, okay.

      Thank you, I'll do that right away

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message