ساخت ثانیه شمار با تصویر GIF

در این آموزش یاد میگیریم که چگونه یک countdown به صورت gif با پلتفرم پینوکس ایجاد کنیم و از آن در readme گیت‌هاب، قالب ایمیل و ... استفاده کنیم.

در بعضی از سایت‌ها بدلیل محدودیت امکان ساخت countdown به وسیله js ممکن نیست مثل قالب ایمیل فرض کنید شما میخواهید یک ایمیل به مشتری خود بزنید که تا دو روز دیگه وقت دارید از تخفیف فوق العاده شما استفاده کنند برای اینکه بتونید در داخل متن خود یک countdown قرار دهید باید به صورت تصویر داینامیک یعنی به شکل زیر اون رو اضافه کنید:

ابتدا پلتفرم پینوکس رو نصب کنید: دانلود | آموزش نصب

حالا فایل پروژه اپلیکیشن countdown رو دریافت کنید و در مسیر زیر در پینوکس قرار بدهید (از فایل فشرده خارج کنید):

pinoox\apps\

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

http://localhost/pinoox/manager

در تصویر زیر میبینید که اپلیکیشن countdown به لیست اپلیکیشن های پینوکس اضافه شده:

حالا روی اپلیکیشن کلیک کنید و وارد قسمت مسیریابی بشین و برای اون یک آدرس مشخص کنید به شکل زیر:

حالا اگر روی لینکی که ساختید کلیک کنید یک تصویر gif به شکل زیر رو خواهید دید

حالا کافیه همون لینکی که ساختید یعنی:

http://localhost/pinoox/countdown

در یک تگ img در html قرار دهید :

<img src=&quothttp://localhost/pinoox/countdown&quot alt=&quotcountdown&quot />

حالا شما یک تصویر countdown به صورت داینامیک ایجاد کرده اید اما اگر بخواهید فونت و تصویر بک گراند را تغییر بدین میتوانید این تغییرات رو ایجاد کنید وارد مسیر زیر در اپلیکیشن بشین و فایل gif.config.php را ویرایش کنید :

pinoox\apps\ir_yoosefap_countdown\config\gif.config.php

return [
 'datetime' => '1399/02/30 20:06:30',
'format' => '%a   %H:%I:%S',
 'jalali' => true,
'background'=> 'bg',
'font-size'=>55,
'angle'=>0,
'x-offset'=>40,
'y-offset'=>70,
'font'=> 'shabnam',
'color'=>[255, 255, 255],
];

تصویر بک گراند باید به فرمت png و در پوشه background قرار بگیرید و در فایل بالا اسم اون وارد شود و همچنین فایل فونت باید به فرمت ttf باشد و در پوشه font قرار بگیرید و اسم اون به فایل بالا معرفی گردد برای مثال میتونید این بک گراند زیر رو با فرمت png قرار بدین