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

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

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

مرحله اول کتابخانه رو دانلود میکنیم.
مرحله دوم استفاده از این کتابخانه در دروپال هستش ، این کتابخانه شامل فولدهای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; ?>

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

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

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

mohamad.arabshahi
محمد عربشاهی - در حال یادگیری
مرکز دروپال ايران

راه های ارتباط با ما

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing