Thực đơn
trang chủTiểu sử

Cách xóa hình ảnh khỏi Joomla 3. Mẹo làm việc với hình ảnh trong Joomla. Cách thêm hình mờ vào hình ảnh

Trong bài học này tôi sẽ nói về cách xóa ID tài liệu trên trang web. ID là số sê-ri của tài liệu, được gán cho nó trong quá trình tạo và trong cài đặt công cụ mặc định, nó được ghi để id được hiển thị trong liên kết dẫn đến tài liệu. Điều này không làm phiền nhiều chủ sở hữu trang web và họ khá hài lòng với các liên kết kiểu này. Nhưng đối với những người khác, điều quan trọng là ID của vật liệu không được hiển thị và do đó họ thực hiện thay đổi mã để loại bỏ những con số này. Về nguyên tắc, chức năng này đã được cài đặt sẵn trong Joomla, bắt đầu từ phiên bản 1.6, nhưng vì lý do nào đó mà nó không được hiển thị trong bảng quản trị nếu không có một số bổ sung nhất định. Để hiển thị nó, bạn cần thực hiện một số sửa đổi.

Với mục đích này, chúng tôi cần tệp config.xml, có thể tìm thấy tệp này tại địa chỉ trên máy chủ: yoursite/administrator/comComponents/com_content/config.xml. Đi qua trình quản lý tệp của bạn để đến trang web của bạn và tìm tệp này, sau đó tải nó xuống máy tính để bàn của bạn và mở nó.

gõ = "đài"
mặc định="1"
label="SEF: Xóa ID tài liệu trong liên kết?"
description="Xóa ID tài liệu trong liên kết?">


Tôi thường viết mục này sau dòng này: description="COM_CONTENT_CONFIG_ARTICLE_SETTINGS_DESC">, mặc dù về nguyên tắc, không có nhiều khác biệt về vị trí chính xác để viết mã này.

Tiếp theo, file phải được lưu lại nhưng để tránh lỗi nên lưu ở định dạng UTF-8 và phải bỏ chọn chức năng BOM. Nhưng vấn đề ở đây là trình soạn thảo văn bản thông thường Notepad mà chúng ta thường sử dụng để mở các tệp loại này không hiển thị chức năng cần thiết nên chúng ta sẽ cần một trình soạn thảo văn bản bổ sung, chẳng hạn như AkelPad. Nó không cần cài đặt và bắt đầu ngay lập tức. Vì vậy, hãy mở notepad AkelPad, sao chép nội dung của tệp config.xml vào đó và lưu ở định dạng UTF-8 và nhớ bỏ chọn hộp BOM:

Bây giờ hãy đóng notepad thông thường và tải nó lên máy chủ kèm theo một bản thay thế. Tiếp theo, đi tới bảng quản trị trang và kiểm tra cài đặt - Vật liệu - Trình quản lý vật liệu - Cài đặt:

Hiện tại có thể tắt ID tài liệu trong bảng quản trị:

Bây giờ hãy xóa bộ nhớ đệm lỗi thời: Hệ thống - Xóa bộ nhớ đệm lỗi thời. Sau đó vào trang web và kiểm tra xem các cài đặt có hoạt động không. Nếu ID tiếp tục được hiển thị, hãy thử truy cập một trang khác của trang web và từ đó quay lại tài liệu bằng liên kết trong menu (bạn nên kiểm tra liên kết của tài liệu, không phải phần hoặc danh mục phụ, mở bất kỳ tài liệu cụ thể nào ).

Nếu mọi thứ được thực hiện chính xác thì ID sẽ biến mất và không còn xuất hiện trên bất kỳ tài liệu nào nữa.

Nếu không muốn viết mã, bạn có thể tải xuống tệp đã hoàn thành và chỉ cần tải tệp đó lên máy chủ, thay thế tệp của bạn. Nó sẽ dễ dàng hơn và nhanh hơn nhiều theo cách này. Để thực hiện việc này, hãy mở thư mục: yoursite/quản trị viên/thành phần/com_content/ và thay thế tệp config.xml trong đó bằng tệp đã tải xuống. Chà, nếu bạn muốn tự mình đi hết con đường này thì cũng tốt.

Chúng tôi đã viết về cách làm việc với các tài liệu trong các phiên bản trước của Joomla. Trong Joomla 3.x, giao diện bảng điều khiển đã thay đổi một chút, nhưng các nguyên tắc điều khiển chung vẫn không thay đổi.

Hãy để tôi nhắc bạn rằng lối vào bảng điều khiển vẫn ở địa chỉ: http://site_domain/administrator/, địa chỉ này phải được nhập vào thanh địa chỉ của trình duyệt. Như trước đây, một cửa sổ sẽ mở ra yêu cầu bạn nhập tên người dùng và mật khẩu. Và chỉ sau khi được ủy quyền, người dùng mới nhập bảng điều khiển, cái này còn được gọi là bảng điều hành.

Trong phiên bản thứ ba, các phần tử có thể quản lý được phân chia thành các nhóm rõ ràng hơn, mọi thứ có thể chỉnh sửa được đặt ở vị trí tương ứng. người quản lý. Bảng điều khiển có trình quản lý người dùng, trình quản lý menu, trình quản lý nội dung, trình quản lý danh mục, trình quản lý mô-đun, v.v.

Hình 1. Giao diện bảng điều khiển ngay sau khi đăng nhập

Tất cả các lệnh điều khiển đều tập trung ở menu ngang trên cùng.

Tất cả tài liệu văn bản của tôi ở đâu?

Tài liệu văn bản được đặt trong trình quản lý tài liệu và có thể truy cập được thông qua menu: Vật liệu - Quản lý vật liệu(xem hình 1).

Hình 2. Trình quản lý vật liệu

Để tạo ra một vật liệu mới bạn cần nhấp vào nút “Tạo” màu xanh lá cây, nằm ở góc trên bên trái của giao diện “Trình quản lý vật liệu”.

Để thay đổi (chỉnh sửa) tài liệu hiện có bạn cần phải bấm vào tên của anh ấy.

Quá trình chỉnh sửa và tạo tài liệu hầu như đơn giản, với điểm khác biệt là việc chỉnh sửa ngụ ý rằng tài liệu trên trang web đã tồn tại và được hiển thị ở đâu đó.

Chỉnh sửa (thay đổi) tài liệu


Hình 3. Biểu mẫu chỉnh sửa tài liệu

Biểu mẫu chỉnh sửa tài liệu trông giống như trong Hình 3. Giống như các phiên bản trước, Joomla 3.x sử dụng trình soạn thảo TinyMCE. Giao diện của nó tương tự như giao diện của Microsoft Word thông thường, vì vậy chúng tôi sẽ không xem xét cách làm việc trong đó. Chúng ta hãy nhìn vào các tính năng.

Dán văn bản từ trình soạn thảo văn bản

Việc gõ văn bản của tài liệu trực tiếp trên trang web không phải là một ý tưởng hay; tốt hơn hết là bạn nên gõ và hiệu đính tài liệu trước bằng một số loại trình soạn thảo văn bản trên máy tính của bạn (có thể là Microsoft Word hoặc Open Office Writer, hoặc thậm chí WordPad nguyên thủy), rồi dán nó vào dạng trình soạn thảo. Bạn có thể dán văn bản đã sao chép trước đó từ trình soạn thảo văn bản chỉ bằng bàn phím bằng tổ hợp phím Ctrl+V.

Sau khi chèn, bạn phải thực hiện quy trình để làm sạch định dạng khỏi các mảnh vụn vô hình. Việc này được thực hiện bằng cách sử dụng lệnh “Clear Format” trong menu “Format” (xem Hình 4). Văn bản được đánh dấu bằng tổ hợp phím Ctrl+A, sau đó " Định dạng - Xóa định dạng".

Hình 4. Xóa định dạng.

Chèn một hình ảnh

Các công cụ tích hợp sẵn trong TinyMCE (TinyMCE là tên của trình soạn thảo văn bản được sử dụng trong Joomla) để chèn ảnh vào văn bản rất bất tiện nên bên dưới trình soạn thảo (hoặc phía trên văn bản có thể chỉnh sửa nhưng dưới các nút chỉnh sửa) có chữ “màu xám”. Nút Image”, bằng cách nhấp vào đó người dùng sẽ nhận được một cửa sổ để chọn trực quan một hình ảnh trên trang web hoặc tải nó lên đó để lựa chọn. Chỉ cần nhấp vào hình ảnh và nhấp vào nút “Chèn” màu xanh lam để hình ảnh xuất hiện ở vị trí con trỏ(xem hình 5).

Hình 5. Chèn hình ảnh

Nút tải hình ảnh lên nằm ở cuối cửa sổ; bạn có thể phải cuộn xuống để xem các nút cần thiết. Trong mọi trường hợp, tốt hơn hết bạn nên tải trước tất cả các hình ảnh cần thiết thông qua "Trình quản lý phương tiện".

Lỗi là tải hình ảnh lên trang web ở trạng thái “từ máy ảnh”. Những hình ảnh như vậy có kích thước lớn (hơn 5 nghìn pixel ở một bên) và trọng lượng lớn, lên tới vài megabyte. Những hình ảnh như vậy sẽ chiếm nhiều dung lượng trên máy chủ, gần như không giới hạn, tải chậm khi xem trang và các chi tiết nhỏ của hình ảnh có thể bị mất khi bị trình duyệt giảm bớt. Vì vậy, trước khi tải hình ảnh lên trang web, chúng cần được xử lý, đặc biệt là giảm bớt. Chiều rộng 1000 pixel với chất lượng 70-80% và độ phân giải 72dpi là khá phù hợp. Chương trình miễn phí "FastStone Photo Resizer" sẽ thực hiện xuất sắc nhiệm vụ này.

Hình 6. Nút để xếp chồng các kiểu trên các phần tử vật liệu.

Để áp dụng kiểu cho các thành phần vật liệu, hãy sử dụng cái nút"Định dạng" (không phải thực đơn"Định dạng", xem Hình 6). Nút này mở ra danh sách tất cả các kiểu được xác định trước và có thể được sử dụng. Một số kiểu được hiển thị bằng màu xám nhạt - hiện tại chúng không thể được sử dụng. Ví dụ: bạn không thể áp dụng kiểu dành cho bảng cho hình ảnh.
Để áp dụng một phong cách, bạn cần chọn một thành phần (để chọn hình ảnh, nhấp vào nó một lần, đối với bảng, chỉ cần đặt con trỏ vào bảng)

Hình 7. Kiểu dáng.

Sau khi chèn hình ảnh vào tài liệu, bạn nên gán kiểu cho nó. Có ba kiểu được xác định trước cho hình ảnh (những kiểu này không được bao gồm trong phân phối tiêu chuẩn): img.img-intext, img.img-intext200-left và img.img-intext200-right. Cả ba kiểu đều đặt phần đệm, đường viền và bóng cho hình ảnh. Họ cũng kiểm soát độ rộng của hình ảnh. Kiểu img.img-intext200-left và img.img-intext200-right đặt hình ảnh ở mức nhỏ hơn một nửa chiều rộng có thể của nó, đẩy hình ảnh sang viền trái hoặc phải, đồng thời cũng ngắt dòng văn bản ở phía bên kia.

Kiểu img.img-intext đặt hình ảnh ở giữa nội dung và không chỉ định ngắt dòng văn bản.

Nếu trang web nằm trên miền Cyrillic thì các kiểu bổ sung có thể không được hiển thị

Để trả lời câu hỏi này, trước tiên chúng ta hãy nhìn vào các mục menu. Mục menu có thể hiển thị cho người dùng một trang có tài liệu cụ thể, tài liệu từ một danh mục nhất định dưới dạng blog hoặc dưới dạng danh sách.

Khi cài đặt phần mềm trang web, một danh mục sẽ được tạo ngay lập tức và tất cả văn bản được tạo sẽ tự động được gán cho danh mục này.

Các danh mục cần thiết để cấu trúc các vật liệu trong bảng điều khiển. Có thể tạo một cấu trúc thư mục phân cấp khá phức tạp và trang web càng lớn thì cấu trúc thư mục của nó càng phức tạp.

Cần nhớ rằng nếu bạn đặt tài liệu vào một danh mục được hiển thị trên “giao diện” của trang web dưới dạng blog hoặc danh sách theo một số mục menu thì tài liệu đó sẽ hiển thị cho tất cả khách truy cập trang web ngay sau khi nó được hiển thị. đã lưu.

Thay đổi danh mục tài liệu đó rất đơn giản, chỉ cần mở tài liệu cần chỉnh sửa và sử dụng nút nằm ở bên phải biểu mẫu chỉnh sửa để thay đổi danh mục. Và lưu các thay đổi.

Hình 8. Thay đổi danh mục

Xuất tài liệu dưới dạng blog

Nếu bạn hiển thị tài liệu dưới dạng blog, thì đừng quên tách phần giới thiệu của văn bản khỏi phần chính bằng nút “Chi tiết”, nằm bên dưới cửa sổ soạn thảo (xem nút trong Hình 3 hoặc 4 ). Hình 9 cho thấy cách hiển thị các tài liệu dưới dạng blog. Ở đây trong mỗi phần tử blog được hiển thị tiêu đề tài liệu, văn bản giới thiệu của tài liệu, hình ảnh phần giới thiệu của tài liệu và liên kết "Thêm chi tiết".

Hình 9. Hiển thị nội dung dưới dạng blog

Cách chèn ảnh giới thiệu

Trong biểu mẫu chỉnh sửa tài liệu, bạn cần chuyển đến tab “Hình ảnh và Liên kết” và nhấp vào nút “Chọn” trong phần “Hình ảnh cho phần giới thiệu của tài liệu” (xem Hình 10).

Hình 10. Chèn hình ảnh cho phần giới thiệu của tài liệu

Và sau đó, một cửa sổ chọn hình ảnh sẽ mở ra, trong đó bạn cần chọn hình ảnh một cách trực quan và nhấp vào nó một lần, sau đó nhấp vào nút “Chèn”. Tôi khuyên bạn nên chuẩn bị trước một số hình ảnh nhỏ (ví dụ: 100 x 100 pixel) và đặt chúng vào một thư mục riêng.

Hình ảnh phần giới thiệu của tài liệu không được hiển thị khi xem toàn bộ tài liệu (sau khi nhấp vào liên kết “Chi tiết khác”, một trang có đầy đủ tài liệu sẽ mở ra).

tái bút Tài liệu này không phải là một mô tả đầy đủ về tất cả các khía cạnh khi làm việc với các tài liệu trong Joomla 3.x - các câu hỏi có thể được đặt ra trong phần bình luận.

Một trang web không chỉ có văn bản. Những hình ảnh được xuất bản trên đó đóng một vai trò rất quan trọng trong nhận thức về trang web. Mọi thông tin sẽ được tiếp nhận dễ dàng hơn nhiều nếu nó được trang bị hình ảnh minh họa. Bất chấp sự đơn giản rõ ràng của chủ đề, làm việc với hình ảnh trong Joomla có một số tính năng hữu ích mà mọi người đều biết, không có ngoại lệ.

Bài viết này là hướng dẫn tạo, xử lý, xuất bản và tối ưu hóa hình ảnh trên trang web Joomla. Từ đó bạn sẽ học được:

  • Cách chụp ảnh màn hình kích thước đầy đủ của các trang trong trình duyệt và bất kỳ cửa sổ nào trên máy tính.
  • Cách xử lý hình ảnh hàng loạt
  • Cách thêm hình mờ vào hình ảnh.
  • Cách chuẩn bị hình ảnh để tải lên trang web.
  • Làm thế nào bạn có thể tạo các hình ảnh nhỏ (bản xem trước) trong Joomla một cách nhanh chóng và thuận tiện.
  • Cách hiển thị hình ảnh trang web Joomla trong cửa sổ bật lên.
  • Làm cách nào để tải các trang trên Joomla có chứa số lượng lớn hình ảnh dễ dàng hơn.

Giới thiệu.

Nếu bạn có trang web của riêng mình thì chắc hẳn bạn đã từng gặp phải nhiệm vụ thêm hình ảnh vào đó. Đó là điều không thể tránh khỏi. Khi tạo một trang web, nhiều quản trị viên web quên rằng rất có thể những người không có trình độ chuyên môn về CNTT sẽ làm việc với nó. Nhiều điều hiển nhiên đối với các chuyên gia CNTT có thể có vẻ xa lạ và phức tạp đối với họ.

Hãy thực hiện nhiệm vụ đơn giản nhất là tải một bức ảnh vào một bài viết trên một trang web. Ngay cả ở đây cũng có rất nhiều cạm bẫy: kích thước (trọng lượng) tệp hình ảnh, độ phân giải hình ảnh, tỷ lệ khung hình hình ảnh, phần mở rộng tệp hình ảnh - tất cả điều này đều quan trọng. Nhưng thật khó để giải thích tất cả những điều này cho khách hàng.

Tại sao bài viết này được viết? Do đặc thù công việc nên tôi thường xuyên phải giải thích những điều như vậy với khách hàng. Đó là lý do tại sao tôi quyết định tập hợp tất cả những “lời giải thích” này vào một bài viết. Đồng ý rằng, việc cung cấp cho một người một liên kết đến lời giải thích bằng hình ảnh sẽ dễ dàng hơn nhiều so với việc giải thích mọi thứ cho anh ta “bằng ngón tay” mỗi lần. Tôi hy vọng rằng bài viết sẽ hữu ích cho cả quản trị viên và chủ sở hữu trang web, những người không có trình độ học vấn chuyên nghiệp nhưng buộc phải làm việc với dự án của họ trên Internet cũng như quản trị viên web, những người cần truyền đạt một số tính năng của quản lý trang web cho người dùng của họ. khách hàng.

Tất cả các lời khuyên được mô tả dưới đây chỉ được lấy từ kinh nghiệm cá nhân. Tôi thực sự hy vọng rằng chúng sẽ hữu ích.

Cách chụp ảnh màn hình kích thước đầy đủ của các trang trong trình duyệt và bất kỳ cửa sổ nào trên máy tính.

Làm cách nào để chụp ảnh màn hình của một trang trình duyệt đầy đủ nếu nó có thanh cuộn? Thừa nhận đi, bạn có biết không? =). Thông thường, bạn không phải thường xuyên phải đối mặt với một nhiệm vụ như vậy, nhưng khi nó xảy ra, bạn thường rơi vào trạng thái sững sờ hoàn toàn.

Bạn có thực hiện được nhiệm vụ chụp ảnh màn hình như thế này không?

Không, thừa nhận đi? =)

Cách đây không lâu, khi hệ điều hành phổ biến nhất còn các cửa sổXP, ngay cả việc chụp ảnh màn hình như vậy cũng không hề dễ dàng. Tôi đã phải nhấn một nút In màn hình, mở Sơn, chèn ảnh chụp màn hình của hình ảnh, cắt khung hình mong muốn, lưu ở định dạng mong muốn. Tất nhiên, tất cả điều này phải được thực hiện nếu các chương trình chuyên dụng không được cài đặt trên máy tính.

Sau đó Windows XP thay thế Windows 7(Vista không được tính). Ở đây có một công cụ tuyệt vời như Kéo. Giờ đây, bằng cách sử dụng các công cụ Windows tiêu chuẩn, bạn không chỉ có thể chụp ảnh màn hình của toàn bộ trang mà còn có thể chụp một phần riêng biệt của trang đó, đồng thời cắt bỏ mọi thứ không cần thiết ngay tại đó. Bằng cách sử dụng Kéo, chúng ta đã có thể có được hình ảnh ở trên, nhưng còn một hình ảnh không vừa trên một màn hình (có thanh cuộn) thì sao? Ở đây tôi sử dụng hai công cụ bổ sung.

Nếu tôi cần chụp ảnh nhanh một trang trong trình duyệt, cắt nội dung nào đó ra khỏi trang đó và thêm nhận xét, tôi sử dụng tiện ích mở rộng của trình duyệt Bắn lửa. Tiện ích mở rộng này có sẵn ở phiên bản miễn phí và thương mại. Miễn phí là đủ.

Sau khi cài đặt, bạn có thể chụp ảnh màn hình đầy đủ của trang web chỉ bằng một cú nhấp chuột và quan trọng nhất là cắt ngay khối mong muốn khỏi trang web đó và thêm thông tin còn thiếu.

Ảnh chụp màn hình:

Cắt ra:

Thêm (nếu cần):

Cứu:

Mọi việc diễn ra rất nhanh chóng và thuận tiện. Ban đầu bạn có thể đặt chất lượng hình ảnh mong muốn và chất lượng này sẽ được duy trì trong tương lai.

Tuyệt vời. Nhưng nếu bạn cần chụp ảnh màn hình cửa sổ cuộn trong Windows thì sao? Đây là lúc chương trình thứ hai ra tay giải cứu: FastStoneChiếm lấy. Thật không may, chương trình được trả tiền. Nhưng khi nào điều đó đã ngăn cản người dân của chúng tôi? ;-). Tải xuống trực tuyến thật dễ dàng. Nhưng nếu nó thực sự là không thể thiếu, tại sao không hỗ trợ nhà phát triển bằng cách mua giấy phép? Hơn nữa, chương trình này không quá đắt.

Tóm lại FastStoneChiếm lấy.

Chúng tôi khởi chạy và thấy khối nổi này trên màn hình:

Ngài cho phép chúng ta làm bất cứ điều gì. Bạn có thể chụp ảnh màn hình, cửa sổ riêng, cửa sổ có thanh cuộn, vùng đã chọn, v.v. Trình tự ở đây hoàn toàn giống với FireShot: chụp màn hình, cắt, chỉnh sửa (nếu cần), lưu.

Với một vài chương trình nhỏ này trong kho vũ khí của bạn, bạn sẽ mãi mãi quên đi những vấn đề khi tạo ảnh chụp màn hình.

Cách xử lý hình ảnh hàng loạt

Điều này xảy ra là bạn cần tải một số lượng lớn hình ảnh lên trang web của mình và nếu bạn có một cửa hàng trực tuyến thì có thể có hàng trăm, thậm chí hàng nghìn hình ảnh. Nếu bạn muốn mọi thứ xếp hàng đều đặn thì rõ ràng tất cả các hình ảnh cần phải có cùng kích thước và tỷ lệ. Làm thế nào để đạt được điều này?

Để xử lý ảnh hàng loạt, tôi sử dụng một chương trình miễn phí Trình xem ảnh FastStone. Tất nhiên, đây không phải là Photoshop, nhưng đối với một chương trình miễn phí, khả năng của FastStone Image Viewer rất rộng.

Cửa sổ chương trình chính được hiển thị trong hình dưới đây:

Theo tôi, một trong những chức năng tiện lợi nhất của chương trình này là khả năng xử lý ảnh hàng loạt. Hãy xem nó hoạt động như thế nào.

Mở thư mục có hình ảnh và thực hiện Công cụ -> Chuyển đổi hàng loạt/Đổi tên. Cửa sổ sau sẽ mở ra:

Trong đó chúng ta chọn ảnh để xử lý và nhấn nút Ngoài ra, thao tác này sẽ mở ra một cửa sổ có nhiều cài đặt bổ sung cho ảnh đã xử lý:

Ở đây chúng ta có thể:

  • Thay đổi kích thước hình ảnh, bao gồm cả một mặt
  • Xoay hình ảnh
  • Cắt hình ảnh
  • Đặt kích thước canvas (mọi thứ không vừa với nó sẽ bị cắt bỏ)
  • Đặt độ sâu màu, độ sáng, độ tương phản và các thông số hình ảnh khác
  • Thêm văn bản hoặc hình mờ vào hình ảnh
  • Thêm khung vào hình ảnh

Trong trường hợp này, không cần thiết lập tất cả cài đặt mỗi lần bạn sử dụng xử lý ảnh hàng loạt trong FastStone Image Viewer. Sau khi tạo, bạn có thể lưu cài đặt vào một tệp và sử dụng nó bất cứ khi nào cần thiết.

Sau khi thiết lập xong tất cả các cài đặt, chúng ta nhấn nút Bắt đầu và chương trình xử lý tất cả hình ảnh cho chúng tôi, đưa chúng về định dạng được chỉ định trong cài đặt.

Sử dụng FastStone Image Viewer, bạn có thể xử lý hình ảnh trong vài giây mà nếu không xử lý thủ công sẽ mất nhiều thời gian. Nó rất thoải mái.

Cách thêm hình mờ vào hình ảnh.

Nhiệm vụ thêm hình mờ vào ảnh cũng liên quan đến việc xử lý ảnh hàng loạt và công cụ tương tự cũng được sử dụng ở đây. TRONG Trình xem ảnh FastStone, V chuyển đổi/đổi tên hàng loạt, bạn có thể mở tab Chữ ký ảnh. Sẽ có các cài đặt sau:

Nói tóm lại, bạn sẽ cần chọn một tệp hình ảnh có hình mờ và đặt vị trí của nó trên các hình ảnh đã được xử lý. Tính năng duy nhất đáng nói đến là hình ảnh thủy ấn phải có nền trong suốt. Nếu không, nền của biển báo sẽ được chồng lên nền của hình ảnh đã được xử lý. Để nền trong suốt, hình mờ phải được lưu trong thư mục " . png» .

Sau khi áp dụng cài đặt hình mờ, nó sẽ được thêm vào tất cả các hình ảnh đã xử lý. Hãy nhớ rằng không thể xóa dấu như vậy khỏi hình ảnh được nữa, vì vậy hãy luôn lưu bản gốc của chúng.

Cách chuẩn bị hình ảnh để tải lên trang web.

Hãy xem xét một số tính năng của việc chuẩn bị hình ảnh để tải lên trang web. Chúng có vẻ hiển nhiên đối với một số người, nhưng chúng chắc chắn đáng được đề cập.

Không tải hình ảnh lên trang web lớn hơn độ phân giải màn hình tối đa của màn hình hiện đại.

Ví dụ: màn hình 24' thường hoạt động ở độ phân giải 1920x1080px. Không có ích gì khi tải hình ảnh có kích thước lớn hơn lên trang web. Chúng sẽ gây ra sự cố khi người dùng xem các trang, vì kích thước tệp (trọng lượng) của những hình ảnh như vậy thường là vài megabyte, sẽ được tính vào quá trình tải trang có hình ảnh như vậy. Nói chung, kích thước hình ảnh tối đa đủ để người dùng xem trên trình duyệt thường được đặt thành 800x860 pixel, tương đương với màn hình 14-15'.

Cố gắng giữ kích thước tệp hình ảnh càng nhỏ càng tốt.

Hãy luôn nhớ rằng kích thước tệp của mỗi hình ảnh sẽ được tính vào kích thước trang của trang nơi hình ảnh được xuất bản. Nếu bạn đăng lên trang 6 hình ảnh bởi 5MB mỗi trang thì trang của bạn sẽ có kích thước là 30MB. Nếu có ai xem nó 1000 khách truy cập thì tổng lưu lượng truy cập được gửi bởi máy chủ sẽ là 30GB! Hơn nữa, một trang như vậy sẽ tải rất chậm đối với mọi người. Lý tưởng nhất là kích thước tệp hình ảnh của bạn phải là XX KB, trong đó xx là số có hai chữ số bất kỳ và không vượt quá 300KB(trong trường hợp hình ảnh có độ phân giải cao).

Tên hình ảnh không được chứa ký tự Cyrillic hoặc dấu cách. Tên hình ảnh và phần mở rộng phải là chữ thường.

Sai: /hình ảnh của tôi/Hình ảnh của tôi.JPG

Phải: / tôi_kartinki/moya_hình ảnhjpg

Nếu hình ảnh được xuất bản trong danh mục hoặc thanh trượt thì tỷ lệ của chúng phải giống nhau.

Hãy nhớ rằng, nếu bạn muốn thêm nhiều hình ảnh cạnh nhau để chúng trông thẳng mà không bị kéo giãn hoặc méo mó, bạn phải làm cho tỷ lệ của chúng giống nhau. Nói một cách đơn giản, nếu một hình ảnh có kích thước 200x100 (2:1) thì tất cả các hình ảnh khác cũng phải có kích thước 2:1.

Sai: 300x200(3:2).

Phải: 400x200(2:1).

Bằng cách tuân theo các quy tắc đơn giản này, bạn sẽ đảm bảo rằng tất cả hình ảnh trên trang web của bạn sẽ được hiển thị mượt mà và đẹp mắt.

Làm thế nào bạn có thể tạo các hình ảnh nhỏ (xem trước) một cách nhanh chóng và thuận tiện trongJoomla và làm cho chúng mở rộng khi nhấp chuột.

Có một tính năng nữa khi làm việc với hình ảnh trên trang web. Không phải lúc nào cũng có thể hiển thị hình ảnh kích thước đầy đủ cùng một lúc. Ví dụ: một bài viết có thể hiển thị phiên bản nhỏ hơn của hình ảnh chính.

Nếu chúng ta chỉ thu nhỏ hình ảnh chính, tạo cho nó một chiều rộng và chiều cao cố định để hiển thị trên trang web thì sẽ không làm giảm kích thước tệp hình ảnh. Bằng cách thêm hàng tá hình ảnh “thu nhỏ” này vào trang, chúng ta sẽ có được kích thước trang rất lớn và tất cả các vấn đề phát sinh từ việc này.

Trong trường hợp này, một lựa chọn tốt là tạo một bản sao thu nhỏ của hình ảnh (với độ phân giải thực, thấp), được gọi là xem trước, với khả năng, khi bạn nhấp vào nó, sẽ xem hình ảnh có kích thước đầy đủ trong cửa sổ bật lên.

Vấn đề duy nhất là sự phức tạp của giải pháp như vậy. Cần phải:

  • Tạo bản xem trước
  • Tải hình ảnh chính và xem trước lên trang web
  • Thêm bản xem trước vào tài liệu
  • Thêm liên kết tới hình ảnh chính vào bản xem trước

Đồng ý rằng, danh sách rất lớn, đặc biệt nếu chúng ta đang nói về không phải một mà là hàng tá hình ảnh.

Để đơn giản hóa công việc này, có một plugin dành cho Joomla có tên là Hình thu nhỏ của mavik. Plugin được viết bởi nhà phát triển của chúng tôi (đây là một chủ đề trên Joomlaforum) và hóa ra rất tiện lợi, tiện lợi đến mức cá nhân tôi sẽ đưa nó vào bộ cơ bản của các tiện ích mở rộng Joomla.

Bản chất của plugin là gì? Hình thu nhỏ của mavik? Khi thêm hình ảnh vào trang web, bạn không cần tạo hình thu nhỏ riêng biệt. Bạn chỉ cần thêm hình ảnh gốc vào vật liệu và thu nhỏ chúng theo chiều rộng mong muốn, tương tự như cách bạn thu nhỏ các cửa sổ trong Windows. Khi người dùng xem trang, plugin sẽ kiểm tra kích thước ban đầu của hình ảnh và kích thước thu được sau khi nén/đặt chiều rộng. Nếu chúng không khớp, plugin sẽ tự động tạo bản xem trước của hình ảnh gốc trên máy chủ, chèn nó vào trang được máy chủ gửi cho người dùng và đóng khung nó trong một liên kết, khi được nhấp vào, sẽ mở hình ảnh gốc trong một cửa sổ bật lên.

Một lần nữa, nếu bạn không hiểu gì cả. Để có được hình ảnh thu nhỏ trong tài liệu, khi nhấp vào sẽ mở hình ảnh gốc trong cửa sổ bật lên, bạn cần:

  • Cài đặt và cấu hình plugin Hình thu nhỏ của mavik
  • Thêm hình ảnh gốc vào bài viết và nén nó “theo từng góc” theo kích thước bản xem trước được yêu cầu

Tất cả! Plugin sẽ làm phần còn lại cho bạn. Nếu bạn xuất bản các bài viết trên trang web của mình, plugin này có thể không thể thiếu đối với bạn.

Cách giúp tải trang web dễ dàng hơn trênJoomla chứa một số lượng lớn hình ảnh.

Mọi thứ chúng tôi đã thảo luận ở trên sẽ không bảo vệ chúng tôi khỏi một đặc điểm nữa của hình ảnh được đăng trên trang web. Hãy tưởng tượng rằng chúng ta cần xuất bản 30 bức ảnh trong một bài báo. Có những bài viết như vậy, có. Tôi tự viết đấy =)) Trong trường hợp này, trừ khi bản xem trước rất nhỏ, chúng ta vẫn sẽ gặp vấn đề về kích thước trang lớn. Hãy đếm: 200 KB x 30 = 6MB. Kích thước trang không được tốt lắm phải không? Phải làm gì trong trường hợp này?

Những người xảo quyệt đã nghĩ ra một giải pháp rất tao nhã. Khi trang được tải lần đầu, chỉ những hình ảnh được tải mới được đưa vào cái gọi là màn hình đầu tiên của màn hình người dùng (phần của trang web hiển thị trên màn hình ngay sau khi tải). Sau đó, khi người dùng bắt đầu cuộn xuống trang, các hình ảnh khác sẽ dần dần được tải bằng công nghệ AJAX. Phương pháp này được gọi là " Lười" Một ví dụ điển hình về Lazy Load là nguồn cấp tin tức vô tận của VKontakte. Đúng, theo cách này, không chỉ hình ảnh được tải ở đó mà tất cả thông tin nói chung.

Việc thực hiện tải chậm trong Joomla rất đơn giản. Tại sao? Điều này đã được thực hiện cho chúng tôi. Tôi giới thiệu với bạn một plugin miễn phí tuyệt vời khác - LLFJ - Tải nhanh cho Joomla!

Làm thế nào nó hoạt động?

  • Cài đặt và cấu hình