• การแชร์เนื้อหาข่าวพร้อมภาพประกอบไปยัง Facebook

    มีเคสพิเศษจากลูกค้ามา พอดีทำ website ด้วย typo3 แต่พอเวลาแชร์เนื้อหาข่าวจากเว็บไปยัง Facebook ภาพประกอบที่มีอยู่ไม่ขึ้น ทำไงดี วันนี้แอดมินมีคำตอบ เพิ่ม Facebook Meta ให้กับหน้ารายละเอียดก่อน (single view) ให้เรากำหนดค่า TS Setup ดังต่อไปนี้ temp.ogFBImage = COA temp.ogFBImage{ wrap = <meta property=”og:image” content=”http://{$config.domain}/uploads/pics/|”> 5 = RECORDS 5 { source = {GP:tx_ttnews|tt_news} source.insertData = 1 tables = tt_news conf.tt_news > conf.tt_news = TEXT conf.tt_news.field = image conf.tt_news.stdWrap.split.token = , conf.tt_news.stdWrap.split.cObjNum = […]

    Read more »
  • การใช้งาน ad gallery และ fancy box ร่วมกับ tt_news media

    เมื่อเดือนที่แล้วเจอเคสที่น่าสนใจอยู่เคสนึง นักพัฒนา typo3 ท่านนึง ได้ใช้ feature ของ tt_news เข้ามาจัดการเรื่อง product เพื่อความสะดวกในการปรับปรุงข้อมูลสำหรับ editor และมีความต้องการใช้ของ media ที่จัดการเกี่ยวกับภาพเปลี่ยนมาเป็น Gallery ที่แสดงผลแบบ carousel เมื่อคลิ๊กที่ภาพใหญ่จะปรากฎเป็น lightbox ภาพใหญ่ โดยมีวิธีการทำดังนี้… 1) เริ่มจาก เราต้องเตรียม js ของ Gallery และ Lightbox ก่อน ดาวน์โหลดได้จาก http://adgallery.codeplex.com/ และ http://fancyapps.com/fancybox/ หรือ ดาวน์โหลด souce พร้อมใช้งาน [ ที่นี่ ] 2) ให้ อัพโหลด source js ต่าง ๆ ไว้ที่ fileadmin เพื่อความสะดวกในการแก้ไขต่อไป 3) สร้าง HTML template […]

    Read more »
  • เพิ่มลูกเล่น Accordion ให้กับ tt_news ด้วย JQuery ใน TYPO3 แบบง่าย ๆ

    หลาย ๆ คนคงกำลังมองหา feature ที่สามารถปรับแต่งให้เกิดความน่าสนใจกับเว็บไซต์ ด้วยการนำสิ่งที่มีอยู่ในระบบเช่น ระบบข่าวสาร มาใส่ลูกเล่นเพื่อให้เกิดการตอบโต้กับผู้ใช้งาน เช่น การคลิ๊กแล้วเปิดเนื้อหาข่าว แทนที่จะลิ้งก์ไปที่หน้าใหม่ เพื่อดูรายละเอียดของข่าวนั้น ๆ แล้วต้องเตรียมอะไรบ้างหล่ะ? 1. tt_news HTML Template ที่มีการ Customize ใส่ Class และตำแหน่งที่ต้องการเช่น <div class=”news-list-container”> <!– ###CONTENT### begin –> <!– ###NEWS### begin –> <div class=”news-list-item-accordion”> <h2 class=”acc_trigger”>###NEWS_TITLE###</h2> <div class=”acc_container”> <div class=”block”> ###NEWS_CONTENT### </div> </div> </div> <!– ###NEWS### end–> <!– ###CONTENT### end –> </div> 2. CSS […]

    Read more »

Back to Top