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

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

پیشنهاد میکنم مطالعه کنید : ایجاد افکت hover  | آموزش ساخت انیمیشن برای بلوک دروپال

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

stylesheets[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; ?>

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

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

امیدوارم این آموزش مفید بوده باشه و از اون استفاده کنید.
منتظر پیشنهادات شما برای آموزش های دروپالی هستیم.