Install Gravatar Effect!

I would like this effect as the "Photo Template" in the "Writer template" install!
And the picture is to be round!
Does anyone know how to do that?

gravatar.gif

Just like here!
https://demo.gavick.com/joomla25/photo/ ... le-article


Thanks in advance
Sakari

This effect is created by placing html element:

Code: Select all

<div class="itemAuthor">
<a rel="author" href="/gavick.com/j3/photo/index.php/blog/user-page">
<img src="/gavick.com/j3/photo/media/k2/users/19.jpg" alt="Devin Samuel Ewart">
</a>
</div>


(above is just html code, you need to get it generated by php)
and bunch of css:

Code: Select all

.single-page .itemAuthor {
  border: 5px solid #fff;
  border-radius: 50%;
  height: 95px;
  margin: -56px auto 65px;
  min-width: 95px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 95px;
  z-index: 1;
}
.itemAuthor > a,
.itemAuthor img {
   display: block;
   float: left;
   position: relative;
}
.itemAuthor > a:before {
   background: #212529;
   border-radius: 50%;
   color: #9ba3ab;
   content: "l";
   font-family: photo-pixellove;
   font-size: 34px;
   height: 100%;
   left: 0;
   line-height: 88px;
   opacity: 0;
   position: absolute;
   text-align: center;
   -webkit-transform: scale(0.5);
   -moz-transform: scale(0.5);
   -ms-transform: scale(0.5);
   -o-transform: scale(0.5);
   transform: scale(0.5);
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   transition: all .3s ease-out;
   top: 0;
   width: 100%;
   z-index: 1;
}
.itemAuthor > a:hover:before {
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
}
.itemAuthor img { height: auto; }


It also requires photo-pixellove custom font pack.

Thanks, it worked!
But the author's name, after I have inserted this code, no longer visible!
How do I get it back?

It should look like this!

authorname-1.jpg

So it looks now!

authorname-2.jpg

Could you post to a particular place on our photo demo server where it looks exactly as you have shown in the screenshot?

Do you think it looks like now?
Look here, so it looks now!
It is missing the author's name!

authorname-1.jpg

This requires some php editing of template core files as this was never designed to be displayed there. You need to get author via php and display it there.

You can find sample code in /html/com_content/article/default.php:

Code: Select all

$author_name = $this->item->created_by_alias ? $this->item->created_by_alias : $this->item->author;


And how can I change that?

I do not know me like this with PHP

Sorry but this customisation is beyond our technical support. You can hire any gavick moderator or any other fullstack developer for this job.