اضافه کردن تصویر به مقاله

مقدمه 

بهترین روش برای اضافه کردن تصاویر به مقاله بستگی به نسخه جوملا و ویرایشگر مورد استفاده دارد. این مقاله شامل تصاویری برای جوملا 5 است با ویرایشگر پیش‌فرض جوملا یعنی TinyMCE.

برای شروع، یک مقاله را برای ویرایش باز کنید:

1. از منوی مدیریت، گزینه محتوا ←  مطالب را انتخاب کنید.

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

3. پس از وارد کردن متن مقاله، مکان‌نما را در محلی که تصویر باید نمایش داده شود قرار دهید.

اضافه کردن تصویر محلی 

اگر تصویر در پوشه images نصب جوملا قرار دارد، باید تصویر را با استفاده از دکمه «CMS Content» ← تصویر در نوار ابزار ویرایش TinyMCE وارد کنید

در پنجره بازشو، به پوشه ای که تصویر مورد نظر در آن قرار دارد، بروید و آن را انتخاب کنید. پس از انتخاب، فرمی ظاهر می‌شود که اطلاعات اضافی را درخواست می‌کند.

پس از انتخاب، خصوصیات تصویر را مطابق نیاز تنظیم کنید. در بیشتر موارد حتماً فیلد Image Description (Alt Text) را پر کنید(این فیلد در سئو سایت تاثیر دارد). سایر فیلدها برای سفارشی‌سازی ظاهر تصویر با CSS شخصی استفاده می‌شوند.

- توضیحات تصویر (Image Description): این متن به عنوان ویژگی alt برای تصویر استفاده می‌شود که برای دسترسی‌پذیری و رعایت استانداردهای وب و سئو مهم است.

- کلاس تصویر (Image Class): اگر تصویر بدون عنوان استفاده شود، برخی کلاس‌های سفارشی در اینجا اعمال می‌شوند. مثلاً در جوملا ۴، `float-end ms-2 mb-1` تصویر را به راست تراز کرده و متن را با حاشیه‌هایی در سمت چپ و پایین دور آن قرار می‌دهد تا متن با تصویر تماس نداشته باشد. در جوملا ۳ معادل این استایل `pull-right` است.(اختصاص کلاس بر پایه قالب سایت است)

- کلاس شکل (Figure Class): اگر عنوانی برای تصویر تنظیم شود، کلاس تراز (در صورت وجود) باید به Figure اعمال شود. این یک تگ HTML است که تگ img را دربرمی‌گیرد. توجه کنید که در قالب Cassiopeia حاشیه‌ها توسط استایل‌sheet قالب اعمال می‌شوند.

- عنوان Figure (Figure Caption): عنوانی که زیر تصویر نمایش داده می‌شود را فعال می‌کند.

اضافه کردن تصویر از راه دور 

اگر تصویر مورد نظر شما در پوشه images نصب جوملا نیست، روش کمی متفاوت است:

1. از نوار ابزار ویرایشگر بر روی دکمه بیشتر(فلش مشخص شده در تصویر زیر) کلیک کنید.

2. از نوار ابزار TinyMCE بر روی شکلکی که در تصویر پایین مشخص شده کلیک کنید تا کادر محاوره‌ای برای وارد کردن تصویر باز شود.

2. همانطور که در شکل زیر می بینید این کادر محاوره ای دارای دو زبانه (عمومی و پیشرفته)است که بصورت پیش فرض در زبانه عمومی قرار گرفته. در این قسمت یک فیلد به نام منبع وجود دارد که اصلی ترین فیلد این کادر است. آدرس تصویر را در فیلد «منبع» وارد کنید. این آدرس می تواند یک تصویر در سایت ما یا هر سایت دیگری باشد.

3. فیلد Alternative description را حتما متناسب با تصویرتان پر کنید؛ چراکه این متن در سئو تاثیر مثبت دارد.

3. سایر فیلدها را مطابق نیاز پر کنید.

4. بخش Advanced برخی گزینه‌های فرمت‌دهی را به‌صورت استایل درون‌خطی اعمال می‌کند. می‌توانید مقادیری مثل `1rem`، `2` یا `groove` را آزمایش کنید (این ویژگی کامل نیست).

استفاده از کشیدن و رها کردن (Drag and Drop) برای تصاویر از راه دور 

می‌توانید تصویری را از یک وب‌سایت دیگر مستقیماً به داخل متن مقاله بکشید و رها کنید. اما توجه داشته باشید که این کار ممکن است HTML مربوط به ظرف تصویر را نیز کپی کند که شامل کلاس‌های نامعتبر برای سایت شما باشد.

ویرایش تصاویر درج شده در ویرایشگر

پس از اینکه تصویر را در ویرایشگر اضافه کردید ممکن است بخواهید برخی از اجزای آن را تغییر دهید.

در ابتدای آموزش یک تصویر از کهکشان را به متن اضافه کردیم. همانطور که احتمالا دیده اید این تصویر بسیار بزرگ است و حالا می خواهیم آن را ویرایش کنیم. برای اینکار مراحل زیر را دنبال کنید

1. تصویر مورد نظر را انتخاب کنید. دقت کنید که بعد از انتخاب احتمالا یک کادر آبی رنگ دور این تصویر قرار گرفته باشد و نشانگر این است که تصویر انتخاب شده است.

2. سپس بر روی شکلک ویرایش تصویر(مشخص شده با فلش قرمز در تصویر بالا) کلیک کنید تا کادر محاوره ای مورد نظر باز شود.

3. همانطور که در تصویر بالا هم می بینید عرض این عکس 1200 و ارتفاع آن 400 بر حسب پیکسل است که به نظر برای این مقاله بزرگ است. عرض آن را بر روی 600 قرار دهید و فیلد Class را بر روی گزینه «وسط»  تنظیم کرده و سپس دکمه ذخیره را کلیک نمایید تا تغییرات اعمال شود.

آپلود تصاویر با استفاده از صفحه درج تصویر 

روش اول: استفاده از صفحه رسانه

می‌توانید تصاویر جدید را با استفاده از صفحه رسانه آپلود کنید:

1. ابتدا توسط منوی اصلی وارد صفحه مدیریت رسانه شوید. محتوا ← رسانه

2. دکمه بارگذاری در بالای سمت راست صفحه «رسانه» را انتخاب کنید تا مرورگر فایل باز شود.

3. فایل‌های تصویری که می‌خواهید آپلود کنید را انتخاب کنید. در مرورگر فایل، Open را برای تأیید انتخاب بزنید. توجه: سبک و طرح مرورگر فایل به مرورگر و سیستم عامل شما بستگی دارد.

4. فایل(های) انتخاب شده به ترتیب الفبا در صفحه Media/Image نمایش داده می‌شوند.

5. پس از تکمیل آپلود، یک پیام تأیید سبز رنگ در بالای صفحه ظاهر می‌شود.

روش دوم: استفاده از آپلود تصویر در هنگام ویرایش مقاله

1. از منوی مدیریت، گزینه محتوا ←  مطالب را انتخاب کنید.

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

3. مکان‌نما را در محلی که تصویر باید نمایش داده شود قرار دهید.

4. بر روی دکمه «CMS Content» کلیک کنید تا لیست کشویی آن آشکار شود.

5. سپس گزینه تصویر را انتخاب کنید تا پنجره مربوط به مدیریت تصاویر باز شود.

6. همانطور که مانند تصویر زیر ملاحظه می کنید، دکمه بارگذاری در بالای پنجره در سمت راست مشخص است. با کلیک بر روی این دکمه مانند روش اول یک تصویر دلخواه از کامپیوتر خود انتخاب کرده و دکمه Open را کلیک کنید تا فایل مورد نظر بارگذاری شود.

7. بلافاصله بعد از بارگذاری تصویر مورد نظر تیک دار می شود و همچنین بخش «داده های اضافی» نیز فعال می شود تا موارد مورد نیاز برای این تصویر را وارد کنیم.

8. بعد از انجام تنظیمات دلخواه بر روی دکمه «درج رسانه» در گوشه سمت چپ – بالا کلیک کنید تا تصویر مورد نظر در جایی که مکان نما در آن قرار دارد وارد شود.