آموزش جوملا

5 1 1 1 1 1 1 1 1 1 1 امتیاز 5.00 (1 رای)

اضافه کردن تصویر به ماژول "مطالب-پر بازدید" جوملا

اضافه کردن تصویر به ماژول "مطالب-پر بازدید" جوملاماژول "Most Read" جوملا یا همان ماژول «مطالب- پربازدید» لینک های محبوب و پر بازدید مطالب شما را نمایش می دهد. با این حال، شما می توانید ماژول را با نمایش تصویر آغازین مطلب در بالای هر لینک جذاب تر کنید. با ایجاد یک عنوان برای قالب به ما اجازه می دهد تا این امکان را فراهم کنیم. در این آموزش قصد داریم نحوه افزونه تصویر مقدماتی را برای ماژول مطالب-پر بازدید با شما به اشتراک بگذارید. برای یادگیری این مبحث جالب با ما همراه باشید.


 مرحله 1. ایجاد ماژول پربازدید

  • بعد از وزود به مدیریت سایت خود، به افزونه ها > ماژول ها > جدید بروید.
  • نوع ماژول را «مطالب-پربازدید» انتخاب کنید.
  • گزینه ها را با توجه به نیاز سایت خود تنظیم کنید.
  • آن را ذخیره کرده و ببندید.

توجه داشته باشید عنوان را به دلخواه می توانید انتخاب کنید.

مطالب-پر بلزدید

در حال حاضر این یک نتیجه پیش فرض می باشد. یک لیست ساده از لینک های بدون تصاویر (در تصویر زیر ماژولی که ایجاد کرده ایم همراه با لینک ها البته بدون تصویر نشان داده شده است):

links with no images


 مرحله 2. ایجاد عنوان برای قالب

1. به افزونه ها بروید.

2. به قالب ها وارد شوید.

3. در سمت راست بر روی گزینه قالب ها کلیک کنید.

 template override

  • به قسمت مشخصات قالب خود وارد شوید (ما در این جا Protostar را به عنوان مثال ذکر کرده ایم).

Protostar

  • وارد سربرگ «ایجاد عنوان ها» شوید.
  • گزینه "mod_articles_popular" انتخاب کنید.

mod articles popular

 این مجموعه در فایل های واقع در templates/your-template/html/mod_articles_popular/  ایجاد می شود. یعنی در همان صفحه قالب شما در سربرگ اول یعنی «ویرایشگر» موجود در قسمت html می باشد.


مرحله 3. سفارشی سازی عنوان قالب

  •  به تب ویرایشگر > mod_articles_popular بروید و بعد از کلیک بر روی آن default.php را باز کنید.

 defaultphp

  • کد بارگذاری شده را با توجه به نیاز و امکانات خود ویرایش کنید. مثلا ما در این مثال از کد زیر استفاده می کنیم:
<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">
<?php foreach ($list as $item) : ?>
  
      <?php $images = json_decode($item->images); ?>
  
    <div class="span4">
      
      <?php if( $images->image_intro ) : ?>
          <img src="/<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
      <?php endif; ?>
      
        <a href="/<?php echo $item->link; ?>">
            <?php echo $item->title; ?></a>
    </div>
  
<?php endforeach; ?>
</div>
  • بعد از انجام این کار روی "ذخیره و بستن" کلیک کنید.

کلاس row-fluid از Bootstrap 2 می آید:

<div class="row-fluid mostread <?php echo $moduleclass_sfx; ?>">

ما در این جا از کلاس span4 در مثال خود استفاده می کنیم (همچنین از Bootstrap) برای نمایش 3 مطلب در هر ردیف:

<div class="span4">

استفاده از کلاس CSS که قالب شما را مجهز می کند، ممکن است از Bootstrap 2 یا 3 استفاده کند. با این حال اگر شما به ستون نیاز ندارید، این پیشنهاد را نادیده بگیرید.

اگر   تصویر اولین نوشته در مطلب شما وجود دارد قبل از چاپ، آن را بررسی کنید:

<?php if( $images->image_intro ) : ?>
<img src="/<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>

تصویر اولین نوشته در هر محتوا در قسمت تصاویر و لینک ها > تصویر اولین نوشته قابل تنظیم می باشد.

intro image


مرحله 4. نتیجه نهایی

صفحه مربوطه خود را برای دیدن تصاویر معرفی شده در بالای لینک هر مطلب را دوباره مشاهده کنید:

End result

لازم به ذکر است که این مطلب به کدنویسی و آشنایی با آن نیازمند می باشد.

 

این مطلب را به اشتراک بگذارید در :

نظرات (0)

تابحال برای این مطلب نظری داده نشده است .

نظر خود را اضافه کنید.

  1. ارسال نظر به صورت مهمان . ثبت نام یا ورود
پیوست ها (0 / 1)
Share Your Location