اضافه کردن Edit به آواتار کاربران در ابزارک

[sir1 512]

با سلام. یک ابزارک برای نمایش مشخصات کاربران داریم. میخام یک کلمه edit مانند دموی زیر به عکس اضافه کنیم. لطفا با توجه به کد زیر راهنمایی کنید. تشکر

 کد:

			<div class="vip-widget user">
				<div class="top">
					<a target="_blank" href="https://fa.gravatar.com/">
						<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
					</a>
					<div class="name">
                        <?php echo $c_user->display_name ?>
					</div>
				</div>

 

ویرایش شده مهر 99 توسط sir1

[sir1 512]

دوستان یک یا دو خط کدنویسی کد نویسی لازم داره. لطفا راهنمایی کنید

[asadiy4n 2807]

سلام

این دکمه ویرایش باید چه قابلیتی داشته باشه ؟

قرار یکسری عکس های انتخابی شما رو بتونه انتخاب کنه یا خودش عکس آپلود کنه؟

یکم سخته راهنمایی کردن

فک کنم از افزونه خاصی هم استفاده نمیکنید درسته ؟

یکم راجب این موارد بالایی که عرض کردم توضیح بدید

 

[sir1 512]

در هم اکنون، asadiy4n گفته است :

سلام

این دکمه ویرایش باید چه قابلیتی داشته باشه ؟

قرار یکسری عکس های انتخابی شما رو بتونه انتخاب کنه یا خودش عکس آپلود کنه؟

یکم سخته راهنمایی کردن

فک کنم از افزونه خاصی هم استفاده نمیکنید درسته ؟

یکم راجب این موارد بالایی که عرض کردم توضیح بدید

 

آواتار لینک شده به سایت گراواتار

فقط میخام بدونه که میتونه عکسشو تغییر بده.

امکان اپلود عکس نداره فقط هدایت میشه به گراواتار و اونجا عکس پروفایلشو تعیین میکنه.

نه از افزونه خاصی اسنفاده نکردیم و برنامه نویسی شده.

کد اضافی شامل کلمه ادیت و رنگ بک گراوند مانند دمو باشد کفایت میکنه

[asadiy4n 2807]

الان منظورتون رو فهمیدم در واقع شما میخواید فقط یک کلمه ویرایش عکس اضافه بشه و مشکلتون استایلش هست

اگر اینطور هست لینک این صفحه رو به من بدید چک کنم براتون

[sir1 512]

در 5 دقیقه قبل، asadiy4n گفته است :

الان منظورتون رو فهمیدم در واقع شما میخواید فقط یک کلمه ویرایش عکس اضافه بشه و مشکلتون استایلش هست

اگر اینطور هست لینک این صفحه رو به من بدید چک کنم براتون

دمو را در سایت en.acgih.ir می توانید ببینید.

با مشخصات زیر وارد حساب کاربری شوید.

user: bahman

pass: YtNHtrVIAH

[asadiy4n 2807]

html

	<div class="top">
		<a class="avatar" target="_blank" href="https://fa.gravatar.com/">
          	<div class="edit">edit</div>
			<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
		</a>
		<div class="name">
            <?php echo $c_user->display_name ?>
		</div>
	</div>

css

.avatar {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 2px solid #0AAFF1;
  cursor: pointer;
}
.avatar img, .avatar .edit {
  position: absolute;
}
.avatar img {
  width: 100%!important;
  height: 100%!important;
}
.avatar .edit {
  width: 100%;
  height: 0px;
  z-index: 1;
  bottom: 0;
  font-weight: bold;
  color: white;
  background-color: rgba(10, 175, 241, 0.781);
  transition: all 1s;
  padding-top: 0px;
  text-align: center;
  padding-top: 10px;
  height: 40px;
}
.avatar span{
    display: none;
}

نتیجه در ضمیمه

 

[sir1 512]

در 20 ساعت قبل، asadiy4n گفته است :

html

	<div class="top">
		<a class="avatar" target="_blank" href="https://fa.gravatar.com/">
          	<div class="edit">edit</div>
			<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>
		</a>
		<div class="name">
            <?php echo $c_user->display_name ?>
		</div>
	</div>

css

.avatar {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0 auto;
  border: 2px solid #0AAFF1;
  cursor: pointer;
}
.avatar img, .avatar .edit {
  position: absolute;
}
.avatar img {
  width: 100%!important;
  height: 100%!important;
}
.avatar .edit {
  width: 100%;
  height: 0px;
  z-index: 1;
  bottom: 0;
  font-weight: bold;
  color: white;
  background-color: rgba(10, 175, 241, 0.781);
  transition: all 1s;
  padding-top: 0px;
  text-align: center;
  padding-top: 10px;
  height: 40px;
}
.avatar span{
    display: none;
}

نتیجه در ضمیمه

 

ممنون.

ولی یک مشکل دیگه الان وجود داره. آواتار کاربران در قسمت نظرات هم اندازش 160 شده ولی میخام در نظرات همون 80 بمونه.

برای ابزارک از کد زیر برای اندازه اواتار استفاده شده:

<?php echo get_avatar(wp_get_current_user()->ID, '160'); ?>

 

[sir1 512]

درست کردم. کلاس css را از avatar به avatarkarbar تغییر دادم و در سایر کدهای css هم این تغییرات را انجام دادم.