نحوه نمایش تفاوت تصاویر در وردپرس

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

اولین چیزی که باید انجام دهید این است که افزونه وردپرسی TwentyTwenty را نصب و فعال کنید. این پلاگین خودکار انجام می کند و تنظیماتی برای پیکربندی شما وجود ندارد.

به سادگی یک پست جدید ایجاد کنید یا یک پست موجود را ویرایش کنید. بعد، در صفحه ویرایش پست شما نیاز به آپلود قبل و بعد از عکس و قرار دادن آنها را در پست دارید .

شما باید اطمینان حاصل کنید که هر دو عکس دارای ابعاد مشابه هستند.

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

 
[twentytwenty]<imgsrc="http://www.example.com/wp-content/uploads/2014/12/before-photo.jpg"alt="Before photo"width="۶۰۴"height="۴۰۲"class="alignnone size-large wp-image-2367"/>
<imgsrc="http://www.example.com/wp-content/uploads/2014/12/after-photo.jpg"alt="After Photo"width="۶۰۴"height="۴۰۲"class="alignnone size-large wp-image-2366"/>[/twentytwenty
 

اکنون می توانید تغییرات خود را ذخیره کنید و پست را پیش نمایش دهید. شما می توانید هر دو تصاویر خود را در بالای یکدیگر با یک نوار لغزنده در مرکز ببینید که کاربران را قادر می سازد تا قبل و بعد از عکس ها اسلاید شوند.

تصویر اول تصویر قبل از سمت چپ می شود و تصویر دوم سمت راست می شود.

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

پست های مرتبط

No results found

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست