همانطور که اطلاع دارید در سیستم مدیریت محتوای دیتالایف انجین، شما فقط یک راه برای کوچک کردن تصاویر مطالب دارید و چنانچه تمایل داشته باشید در مطلب خود چند تصویر با چند سایز مختلف نمایش بدهید با مشکل سایز مواجه خواهد شد. هنگامی که شما در دیتالایف انجین مطلب ارسال میکنید، هنگام آپلود تصویر میتوانید گزینه ساخت تصویر بند انگشتی را انتخاب کنید تا اگر سایز تصویر شما بزرگ است، اتوماتیک به سایز کوچکتر تبدیل شود. اما اگر تمایل داشته باشید چندین تصویر با سایز های مختلف داشته باشید هیچ راه و یا امکانی در دیتالایف انجین وجود ندارد.
البته یک سری ترفند میتوانید بوسیله CSS انجام دهید اما همانطور که اطلاع دارید به هیچ عنوان نمیتوانید بوسیله CSS تصویر بند انگشتی بسازید، CSS فقط تصویر شما رو کوچک نشان میدهد اما در اصل همان تصویر با سایز بزرگ بارگذاری شده است و در ۹۹ مواقع تصویر شما دارای ظاهری نامناسب میباشد. چنانچه به دنبال یک نمونه حاضر و آماده از این مقاله میباشد، میتوانید از منو بالای همین سایت، بر روی گزینه "آخرین ارسالها" کلیک کنید، سپس متوجه میشوید که تصاویر مطالب به صورت بند انگشتی نمایش داده میشود، اما بوسیله خود دیتالایف انجین درست نشده است. در ضمن، دوستانی که قصد دارند مطالب و تصاویر را از هم به صورت جدا نمایش بدهند و بتوانند به راحتی قالب خود را ویرایش کنند، میتوانند از این اسکریپت استفاده کنند تا هم تصویر را از متن جدا کنند و هم تصویر بند انگشتی داشته باشند.
حال، میپردازیم به آموزش:
۱. برای اینکه بتوانید تصاویر خود را در سایز کوچک به نمایش بگذارید، ابتدا فایل ضمیمه این مقاله را دانلود کنید و در پوشه engine دیتالایف انجین خود آپلود کنید.
۲. وارد قسمت مدیریت سیستم شوید، سپس بر روی گزینه "فیلدهای اضافی مطالب" کلیک کرده و یک فیلد اضافی جدید با مشخصات زیر ایجاد کنید:
توضیح کوتاه: img
نمایش در موضوع: همه
نوع فیلد: فیلد کوچک (یک خطی)
متن پیشفرض: این قسمت را خالی بگذارید.
در آخر تیک گزینه "اختیاری" را بزنید.
۳. حال، فایل fullstory.tpl قالب خود را باز کرده و کد زیر را در جای مناسب قرار دهید:
حالا چنانچه هنگام ارسال مطلب، در فیلد اضافی ساخته شده، لینک تصویر خود را، چه تصویری که بر روی سایت خود آپلود کردید و یا لینک تصویر را از یک سایت دیگر قرار بدهید، در قسمت ادامه مطلب میتوانید تصویر کوچک شده را ببینید.
تا اینجای کار قصد ما فقط آموزش روش نصب و استفاده از این اسکریپت ساده اما پر کاربرد بود. شما میتوانید از این اسکریپت در تمامی مطالب حتی صفحات اضافی سیستم و یا قسمت مطلب کوتاه نیز استفاده کنید. نحوه استفاده آن بستگی به خود شما دارد.
حال میپردازیم به امکانات اسکریپت. این اسکریپت به ظاهر ساده، دارای امکانات بسیار زیاد و فوق العاده میباشد. توجه داشته باشید که در این مقاله نمیتوانیم تمامی امکانات آن را برای شما شرح دهیم، اما میتوانید به سایت سازنده آن سر بزنید و تمامی امکانات این اسکریپت را مشاهده کنید. در پایان مقاله لینک سایت سازنده را مشاهده خواهد کرد.
در حالت عادی، این اسکریپت تصاویر شما را در سایز 100x100 پیکسل نمایش میدهد و کیفیت تصاویر 100 میباشد. برای تغییر سایز و کیفیت تصاویر میتوانید از روش های زیر استفاده کنید:
شکل کلی کد ما با استفاده از فیلد اضافه به این صورت میباشد:
در کد بالا، لینک تصویر ما تگ زیر میباشد:
که ما لینک تصویر را بعد از لینک اسکریپت قرار داده ایم و به شکل زیر در آمده است:
حال برای تغییر سایز، از تگهای زیر استفاده میکنیم:
برای تغییر عرض تصویر به 200 پیکسل:
برای تغییر ارتفاع تصویر به 150 پیکسل:
حال شکل کلی کد ما به صورت زیر میباشد:
فقط تغییر عرض:
تغییر عرض و ارتفاع:
برای تغییر کیفیت تصویر از کد زیر استفاده میشود:
اگر عدد ما از 100 کمتر باشد، تصویر ما کیفیت آن کمتر میشود. نمونه:
این دو قسمت، مهمترین تنظیمات ما برای نمایش تصویر بود. اما این اسکریپت امکانات دیگری مانند ایجاد فیلتر بر روی تصاویر، زوم کردن بر روی تصاویر، تغییر محل برش تصویر را نیز دارا میباشد..
برای مثال با استفاده از کد زیر محل برش تصویر را مرکز تصویر انتخاب میکنیم:
شکل کلی کد ما:
شما میتوانید لیست امکانات و دمو تمامی تنظیمات از جمله استفاده از کش، مسدود کردن لینک تصاویر از سایتهای دیگر و ... را در سایت سازنده اسکریپت مشاهده کنید.
یک نمونه از کد ما برای نمایش تصویری با ارتفاع 200 پیکسل، عرض 300 پیکسل، کیفیت 90 و برش تصویر از وسط:
برای تصاویری که قبلا در مطالب کوتاه ارسال کرده اید و یا اینکه قصد دارید در قسمت مطالب کوتاه و یا ادامه مطلب تصویر را از متن جدا کنید، هم میتوانید از این اسکریپت استفاده کنید. برای این روش نیاز به ساخت فیلد اضافی نیست. میتوانید برای نمونه از کد زیر استفاده کنید:
نکات مهم:
توجه داشته باشید در فیلد اضافی مطالب که لینک تصویر را قرار میدهید، لینک تصویر حتمآ باید به صورت مستقیم باشد.
شما میتوانید چندین فیلد اضافی درست کنید و با توجه به نیاز خود از این اسکریپت استفاده کنید.
چنانچه اطلاعات کافی در زمینه PHP ندارید فایل اسکریپت را زیاد تغییر ندهید.
لینک وبسایت سازنده اسکریپت و مشاهده امکانات و دمو های اسکریپت: