شما اینجا هستید

ساخت افکت
ارسال شده در ش, 07/22/1396 - 14:01 -- توسط mehrdadk69

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

در این بخش از آموزش های دروپالی میخوایم یک کتابخانه (Library) برای ایجاد افکت های Hover بر روی تصاویر رو معرفی کنیم.قطعا پیش اومده که بخواین برای بخش های مختلف سایت دروپالی که طراحی میکنید مثل بلاگ ، آخرین محصولات یا اخبار که فیلدهایی مختلفی رو دارن یک افکت زیبا و جذاب رو پیاده سازی کنین.دراین آموزش دروپالی کار با کتابخانه imagehover رو توضیح خواهیم داد.

مرحله اول کتابخانه رو دانلود میکنیم.
مرحله دوم استفاده از این کتابخانه در دروپال هستش ، این کتابخانه شامل فولدهایcss , less , sass هستش که بسته به نیاز میتونیم از اونها استفاده کنیم.در اینجا ما از فولدر css فایل imagehover.min.css و یا imagehover.css رو انتخاب میکنیم و در پوشه css دروپالی خودمون قرار میدیم.
حالا نیاز به فراخوانی این فایل css هستش ، فایل .info   رو باز میکنیم و کد زیر رو بهش اضافه میکنیم :

 

stylesheet[all][] = css/ imagehover.css

نکته : بعد از هر تغییری در فایل .info باید کش دروپال رو خالی کنیم.
مرحله سوم .tpl نوشتن هستش ، ما میخواهیم این بخش رو برای محتوای article خودمون پیاده سازی کنیم.
برای اینکار یک ویوز views  ایجاد میکنیم ، و فیلدهای عنوان ، تصویر و توضیحات رو اضافه میکنیم.
 بعد از قسمت advanced روی theme:Infarmation  کلیک میکنیم ، و از قمست
Row style output یک نام برای tpl خودمون انتخاب میکنیم .بطور مثال : views-view-fields--article.tpl.php
این فایل رو در پوشه views   که در فولدر قالب سایت هست ذخیره میکنیم و کد زیر رو به اون اضافه میکنیم.

 

<figure class="imghvr-push-right">
   <?php print $fields['field_image']->content; ?>
            <figcaption>
              <h3> <?php print $fields['title']->content; ?> </h3>
<?php print $fields['body']->content; ?>
            </figcaption><a href="javascript:;"></a>
          </figure>

روی گزینه Rescan template files کلیک میکنیم تا فایل ساخته شده شناسایی و فراخونده بشه. ویوز رو ذخیره میکنیم  ؛ صفحه یا  بلاک رو توی هر ناحیه که نیاز باشه فراخوانی خواهیم کرد.
نکته :

  • فیلد هایی که در ویوز ایجاد میشن حتما باید در کدی که نوشتیم هم اضافه بشه.
    بطور مثال اگر فیلد ادامه مطلب (link) رو هم اضافه کردیم پس باید اون رو هم با دستور زیر  هرجای کدمون که خواستیم  اضافه کنیم.
  • <?php print $fields[view_node]->content; ?>

    برای تغییر افکت کافی هستش یکی از کلاس های موجود در لینک دمو رو جایگزین  کلاس موجود در خط اول کنیم .

پیوست :
- دمو
- فایل

 

دسته بندی: 

درباره mehrdad keshavarz

تصویر mehrdadk69
مهرداد کشاورز رضایی متولد سال 1369 صادره از قزوین ،دارای مدرک کارشناسی نرم افزار کامپیوتراز دانشگاه ازاد و کارمند فعلی استانداری قزوین در دفتر فناوری اطلاعات، ارتباطات و امنیت و همچنین در بخش توسعه و فناوری شرکت طراحی سایت پویا پزداز مشغول هستم.

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.