ข้ามไปที่เนื้อหาหลัก

CSS Tricks : การจัดรูปภาพให้สวยงาม โดยไม่ใช้ image-background



ช่วงหลังๆ มานี้ ทำงาน Frontend บ่อยมาก โปรแกรมเมอร์กากๆ แบบผมก็จัดต้องหาวิธีแก้ไขปัญหากันไปครับ เมื่อก่อนนึกถึงปัญหาเกี่ยวกับรูปภาพที่แก้กันแบบง่ายๆ คือย่อภาพ หรือให้จัดภาพให้มีขนาดพอดีมาก่อนแล้วค่อยอัพโหลด

ช่วงหลังๆ เป็นอะไรที่ CSS บูมขึ้นเรื่อยๆ เมื่องานบางครั้งก็ต้องการให้แสดงภาพได้อย่างสวยงาม และที่สำคัญใช้งานง่ายๆ การที่เราจะมาบอกคนใช้งานว่าไปอัพรูปมาก่อนสิคงยาก




See the Pen Image Crop by ALTELMA (@ALTELMA) on CodePen.
ป้ายกำกับ:

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

การเพิ่ม Font ภาษาไทยอื่นๆ เข้าไปใช้งานใน MPDF

เนื่องมาจากผมได้มีโอกาสจับงานที่ต้องแปลงหน้าเว็บให้เป็น PDF ลองๆ หาข้อมูลก็ไปเจอเจ้าตัวนี้ MPDF  ซึ่งจริงๆ แล้วก็มีให้ใช้งานอีกหลายๆ ตัว สาเหตุที่เลือกใช้งานตัวนี้เพราะมัน ค่อนข้างจะติดตั้ง และใช้งานง่าย และยังสามารถอ้างอิง CSS เข้ามาช่วยจัดหน้าตาใน PDF ได้อีกด้วย ซึ่งผลที่ได้เพี้ยนไปจากตัวจริงไม่มากครับ แต่ที่ทำให้เลือกใช้งานเพราะการเพิ่มฟ้อนท์ภาษาไทย เข้าไปนั้นค่อนข้างง่ายครับ เลยจะขอมาแนะนำดังนี้
6 ความคิดเห็น
อ่านเพิ่มเติม

มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ

มีช่วงหนึงผมเคยนำ datatable มาพัฒนาในงานแต่เกิดปัญหาเนื่องจากมีข้อมูลขนาดใหญ่ ทำให้เกิดการโหลดในครั้งแรกที่โหลดหน้าเพจนั้นๆ เนื่องจากผมใช้ Ajax ในการโหลดข้อมูลทั้งหมดมาในครั้งเดียวด้วยจำนวนข้อมูล 1000 ขึ้น ซึ่งตอนนั้นผมคิดว่าการทำ preload น่าจะช่วยได้ แต่ว่าถ้า user เกิดเผลอไปกด refesh หรือแก้ไขข้อมูลเวลากลับมาที่หน้าข้อมูลก็ต้องโหลดใหม่อีก ทำให้ผมเลิกใช้ datatable ไปเลย เพราะคิดว่ามันคงไม่เหมาะ แต่ในความจริงแล้ว datatable ก็ได้มีสิ่งที่มาแก้ในจุดนั้นได้ ซึ่งเรียกว่า server-side โดยการที่อนุญาตให้เรา query ข้อมูลออกมาก่อนแล้วส่งมาให้ datatable อ่านข้อมูลในจำนวนที่น้อยลง หลักการก็เหมือนๆ กับบทความการทำสร้าง XML จากข้อมูลขนาดใหญ่นั่นแหละครับ แต่มีเงื่อนไขเพียงแต่ว่า ต้อง Filter และส่งข้อมูลออกมาในรูปแบบที่ตรงตามหลักของ datatable เท่านั้น ( บางครั้งเวลาเข้าไปอ่าน Document หรือดู Example จะงงๆ ว่าอะไรเยอะแยะ ) โดยวันนี้จะมาแนะนำการใช้งานแบบง่ายๆ กันเลย :D
แสดงความคิดเห็น
อ่านเพิ่มเติม

การใช้งาน คำสั่ง file_exists() อย่างเข้าใจ

นี่อาจจะไม่เรื่องใหม่อะไรสำหรับ Professional ทั้งหลาย แต่ว่าสำหรับผมที่เข้าใจ และใช้งานอย่างผิดๆ มาตลอด จนบางทีก็เข้าใจว่า เราเขียนผิด หรือ คำสั่งมันใช้งานไม่ได้ วันนี้จะขอมาพูดถึงเรื่องของคำสั่ง PHP ที่ชื่อ file_exists เป็นคำสั่งที่ใช้สำหรับตรวจสอบไฟล์ว่ามีอยู่จริงหรือไม่? ตัวอย่างการใช้งานแบบผิดๆ ที่ผมใช้ก็คือ file_exists('/images/news/helloworld.jpg'); ผลลัพธ์ที่ได้คือ FALSE ถึงแม้ว้าจะมีไฟล์นั้นอยู่จริงก็ตาม ซึ่งในความเป็นจริงแล้ว การใช้งานที่ถูกต้องคือ file_exists($_SERVER['DOCUMENT_ROOT'] . '/images/news/helloworld.jpg'); จากตัวอย่างที่ถูกต้อง ทำให้เข้าใจแบบง่ายๆ ว่าคำสั่ง file_exists นั้นใช้สำหรับเช็ค path ในโฟลเดอร์จริงๆ เท่านั้น ไม่สามารถเช็คจาก URL ได้ อันนี้เป็นเรื่องง่ายๆ ที่ผมเข้าใจผิดมาอยู่นานเลยทีเดียวเลยต้องขอลงบันทึกเตือนตัวเองไว้อีกที :3
แสดงความคิดเห็น
อ่านเพิ่มเติม