در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

محمدرضا سرفراز

سئو تصاویر

با سلام خدمت همه دوستان بنده چند سوال داشتم خدمت اساتید گرامی خیلی ممنون میشم به سوالاتم پاسخ بدهید:

(لطفا از ارایه نام پلاگین پرهیز کنید چون من خود کد php مربوط به پاسخ ها رو میخوام نه پلاگین)

به اضافه فرض ما بر این است که سایت دارای تصاویر زیادی است و ما نمیتوانیم به صورت دستی این کار ها رو بکنیم حالا بیایم توسط php یا java script یا jquery یا htaccess این کار ها رو بکنیم؟

1)چه طور میتونم تصاویر سایت خود را به صورت lazy load درآورم؟(مثل tosinso.com)

2)چطور میتونم بر روی تصاویر سایت به صورت خودکار واترمارک ایجاد کنم؟(مثل itpro)

3)چطور میتونم به تصاویر مطالب سایت (نه تمام تصاویر سایت مثل تصاویر قالب و ...) یک اندازه خاص بدهم؟مثلا 400*500

4)چطور میتونم عنوان پست (عنوان مقاله یا مطلب) رو به صورت اتوماتیک به مقدار تگ title و alt تصاویر بدهم؟

5) چطور میتونم از حجم تصاویر بکاهم؟(در زمان آپلود تصاویر ، توسط سایت این عمل انجام شود نه قبل از آپلود)تا حدی که به کیفیت تصویر زیاد لطمه وارد نشود؟

6)آیا امکان دارد که بعد از آپلود به صورت اتوماتیک تصویر به اندازه اصلی خودش لینک داده شود؟

بسیار ممنون وسپاس گذارم

#سئو_تصاویر #watermark_اتوماتیک_بر_روی_تصاویر #بهینه_سازی_تصاویر #lazy_load_کردن_تصاویر
لذت یادگیری با توسینسو
به عنوان شخصی که مدت هاست از سایت توسینسو استفاده می کنم باید بگم که واقعاً یکی از بهترین مرجع ها برای ارتقاء دانش شخصی هست. دوره های سایت، راهکارها و مطالب، همگی عالی هستند.
prober

برای سوال1 باید از jquery استفاده کنید و خیلی ساده است. تنها کافیه در ابتدا به جای تمامی img ها تصویر lazy load دلخواه رو show کنید و بعد با دستور jquery بگبن هر وقت لود کامل شد تصویر lazyLoad مخفی (hidden) بشه و تصویر اصلی show بشه:

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

برای سوال 2 لینک نکته زیر رو مشاهده کنید:

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

البته روش ITPRO متفاوت هست.

برای سوال 3:

می تونید برای همه اون دسته تصاویری که می خواین سایز مورد نظر رو بگیرن یه کلاس css تعریف کنید و خاصیت کلاس مورد نظر رو به تگ اون تصاویر اضافه کنید. css-propertyهای اون کلاس به صورت کد زیر باشن:

.unicSize{
   width:500px;
   height:auto;   
}

اگه تصاویر در background-image یک div باشن:

.unicSize{
   width:500px;
   height:auto;
   background-size: contain;
}
کسانی که عاشـق کیفیت اند بیشتر از کسانی که متخصص کیفیت اند باعث بهبود کیفیت می شوند. - پروفسور کندو- کتاب Human Motivation

دوست عزیز ممنون ولی درباره سوال سوم باید بگم در صورتی که یک کلاس برای یک سری تصاویر که قرارند یک اندزه خاص داشته باشند باید به تمام تصاویر به صورت دستی کلاس css اضافه شوند:

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

prober

اوکی خوب با jquery کلاس رو add کنید

$(document).ready(function(){
    $("img").addClass("UnicSize");
});

البته کد بالا به همه تگ های img اعمال میشه. می تونید هم مثلا در زمان آپلود تصویر دکمه submit آپلودی که در نظر گرفتید براش کد بنویسید .

ولی کلا متوجه نمیشم چه جوری تعداد تصاویر زیاد مشکل ایجاد می کنه؟ یا زمان تایید آپلود برای تگ img مربوط به تصویر دریافتی کلاس اضافه می کنید با jquery و یا هم این تصاویر زیاد در یک بانک اطلاعاتی از قبل هستند و شما می خواین در زمان لود سایتتون اون ها رو از بانک بخونید و در تگ img یا در بکگراند تگ div قرار بدید که با حلقه for انجام میشه و تگ با کلاس یکسان برای تمام چرخش های حلقه استفاده می کنید. نباید مشکلی باشه

کسانی که عاشـق کیفیت اند بیشتر از کسانی که متخصص کیفیت اند باعث بهبود کیفیت می شوند. - پروفسور کندو- کتاب Human Motivation
پاسخ شما
برای ارسال پاسخ خود وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....