aliali100

ریسپانسیو کردن عکس پستها؟

9 پست در این موضوع قرار دارد

سلام

من میخوام زمانیکه در صفحه سینگل مطلب یک عکی میزارم اون عکس ریسپانسیو باشه

الان اینکار رو به صورت دستی انجام میدم

یعنی وقتی عکس میزارم بعدش میرم تو منبع کد پست و این خاصیت رو به عکس اصافه میکنم

class="img-thumbnail"

حالا من باید چیکار کنم که دیگه وقتی عکس میزارم خودش اتومات ریسپانسیو باشه

ممنون میشم راهنمایی کنید

0

به اشتراک گذاری این پست


لینک به پست

سلام

منظورتون از ریسپانسیو چیه؟ و ربطش به این کد چیه؟


class="img-thumbnail"

در هر صورت اگر منظورتون این هست که همون‌طور که قالب ریسپانسیو هست تصاویرتون هم ریسپانسیو باشه

تنها کافی به کلاس مورد نظر استفاده شده در تصاویر عرض ۱۰۰٪ و طول آیتو بدید


img{
width:100%;
height:auto
}

4

به اشتراک گذاری این پست


لینک به پست

سلام

منظورتون از ریسپانسیو چیه؟ و ربطش به این کد چیه؟


class="img-thumbnail"

در هر صورت اگر منظورتون این هست که همون‌طور که قالب ریسپانسیو هست تصاویرتون هم ریسپانسیو باشه

تنها کافی به کلاس مورد نظر استفاده شده در تصاویر عرض ۱۰۰٪ و طول آیتو بدید


img{
width:100%;
height:auto
}

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

دوست عزیز

این

class="img-thumbnail"

کلاسی هستش که خود سایت

getbootstrap.com

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

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

حالا میخوام اینکار به صورت اتومات انجام بشه یعنی هر وقت عکس توی پستم گذاشتم خودش ریسپانسیو باشه

0

به اشتراک گذاری این پست


لینک به پست

الان متوجه منظورتون شدم با جی‌کوئری کلاس بدید


$('body').find('img').each(function (){
if ( !$(this).hasClass("img-thumbnail") ) {
$(this).addClass("img-thumbnail");
}
});

2

به اشتراک گذاری این پست


لینک به پست

الان متوجه منظورتون شدم با جی‌کوئری کلاس بدید


$('body').find('img').each(function (){
if ( !$(this).hasClass("img-thumbnail") ) {
$(this).addClass("img-thumbnail");
}
});

داداش مرسی ولی من اصلا جکوئری بلد نیستم

میشه بگی دقیقا این کد رو کجا باید بزارم؟

0

به اشتراک گذاری این پست


لینک به پست

توی قالب‌تون یه فایل به نام js درست کنید

از اینجا آخرین نسخه jquery رو دریافت کنید

یک notpade باز کنید و کد گفته شده رو با نام custom.js ذخیره کنید

در نهایت این دو کد زیر رو قبل از بسته شدن body در فایل footer.php قالب‌تون اضافه کنید


<script src='<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/js/custom.js'></script>

توجه داشته باشید در صورتی نیاز به فایل اصلی جی‌کوئری دارید که قبلا در قالب‌تون این کد فراخوانی نشده باشه

2

به اشتراک گذاری این پست


لینک به پست

توی قالب‌تون یه فایل به نام js درست کنید

از اینجا آخرین نسخه jquery رو دریافت کنید

یک notpade باز کنید و کد گفته شده رو با نام custom.js ذخیره کنید

در نهایت این دو کد زیر رو قبل از بسته شدن body در فایل footer.php قالب‌تون اضافه کنید


<script src='<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/js/custom.js'></script>

توجه داشته باشید در صورتی نیاز به فایل اصلی جی‌کوئری دارید که قبلا در قالب‌تون این کد فراخوانی نشده باشه

داداش خیلی ممنونتم ولی مشکل حل نشد

من دقیقا این کار رو کردم

فوتر رو باز کردم و این رو اضافه کردم

<script src="<?php echo get_template_directory_uri(); ?>/js/custom.js"></script>

البته یک نکته : به نظرت برای فراخوانی از این استفاده کنم بهتر نیست

<script src="<?php bloginfo('template_url'); ?>/js/custom.js"></script>

خلاصه بعدش

custom.js رو ساختم و این کدها رو درونش نوشتم


if ( !$(this).hasClass("img-thumbnail") ) {
$(this).addClass("img-thumbnail");
}
});
$('body').find('img').each(function (){

برای این کد نیازی نیست مثل پی اچ پی علامت سوالی چیزی اول و آخرش اضافه کنم؟

خلاصه اوکی نشد

0

به اشتراک گذاری این پست


لینک به پست

قالب‌تون کد زیر رو داره؟


<script src='<?php echo get_template_directory_uri(); ?>/js/jquery-1.11.1.js'></script>

کد خیلی ساده هست، چیزه خاصی نداره که بگم مثلا یه طور دیگه‌ای تست کنید؛ البته قبل از این‌که کد رو اینجا قرار بدم خودم تستش کردم و کار هم می‌کرد

در هر صورت اول این‌که مطمئن شید هسته اصلی جی‌کوئری لود شده باشه و کد رو هم به صورت زیر تست کنید


$(document).ready(function() {
$('body').find('img').each(function (){
if ( !$(this).hasClass("img-thumbnail") ) {
$(this).addClass("img-thumbnail");
}
});
});

0

به اشتراک گذاری این پست


لینک به پست

اینو توو شیوه نامه قرار بده


img,img[class*=align],img[class*=wp-image-] {
height:auto;
max-width:100%
}

اگه جواب نداد آدرس سایتت رو اینجا بزار یه نگاه بندازیم

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری