How to delete images from joomla 3. Tips for working with images in Joomla. How to add a watermark to images

In this lesson I will talk about how to remove material ID on the site. ID is the serial number of the material, which is assigned to it during creation and in the engine settings by default it is written so that the id is displayed in the link that leads to the material. This does not bother many site owners and they are quite satisfied with links of this type. But for others, it is important that the ID of the material is not displayed, and therefore they make changes to the code to remove these numbers. In principle, this function is already preinstalled in Joomla, starting from version 1.6, but for some reason it is not displayed in the admin panel without certain additions. To display it you need to make some modification.

For this purpose, we need the config.xml file, which can be found at the address on the server: yoursite/administrator/components/com_content/config.xml. Go through your file manager to your website and find this file, then download it to your desktop and open it.

type="radio"
default="1"
label="SEF: Delete material ID in link?"
description="Delete material ID in the link?">
JNO
JYES

I usually write this entry after this line: description="COM_CONTENT_CONFIG_ARTICLE_SETTINGS_DESC">, although in principle, there is not much difference where exactly to write this code.

Next, the file must be saved, but to avoid errors, it should be saved in UTF-8 format and the BOM function must be unchecked. But the problem here is that the regular text editor Notepad, which we usually use to open files of this type, does not display the required function, so we will need an additional text editor, for example, AkelPad. It does not require installation and starts immediately. So, open the AkelPad notepad, copy the contents of the config.xml file into it and save it in UTF-8 format and be sure to uncheck the BOM box:

Now close the regular notepad and upload it to the server with a replacement. Next, go to the site admin panel and check the settings - Materials - Materials Manager - Settings:

It is now possible to disable material ID in the admin panel:

Now clear the outdated cache: System - Clear outdated cache. Then go to the website and check if the settings work. If the ID continues to be displayed, try going to another page of the site, and from there back to the material using the link in the menu (you should check the link of the material, not the section or subcategory, open any specific material).

If everything is done correctly, then the ID should disappear and will no longer appear in any material.

If you don’t want to write the code, you can download the finished file and simply upload it to your server, replacing your file. It will be much easier and faster this way. To do this, open the folder: yoursite/administrator/components/com_content/ and replace the config.xml file in it with the downloaded one. Well, if you want to go the whole way on your own, that’s also good.

We have already written about working with materials in previous versions of Joomla. In Joomla 3.x, the control panel interface has changed slightly, but the general principles of control have remained unchanged.

Let me remind you that the entrance to the control panel remains at the address: http://site_domain/administrator/, which must be entered in the address bar of the browser. As before, a window will open asking you to enter your username and password. And only after authorization the user enters control Panel, which is also called administrative panel.

In the third version, manageable elements are more clearly divided into groups; everything that can be edited is placed in the corresponding managers. The control panel has a user manager, menu manager, content manager, category manager, module manager and so on.

Figure 1. Appearance of the control panel immediately after logging in

All control commands are concentrated in the top horizontal menu.

Where are all my text materials?

Text materials are located in the materials manager and are accessible through the menu: Materials - Material Manager(see figure 1).

Figure 2. Material Manager

To create a new material you need to click on the green “Create” button, which is located in the upper left corner of the “Material Manager” interface.

To change (edit) existing material you need to click on his name.

The processes of editing and creating material are virtually straightforward, with the difference that editing implies that the material on the site already exists and is displayed somewhere.

Editing (changing) material

Figure 3. Material editing form

The material editing form looks like in Figure 3. As in previous versions, Joomla 3.x uses the TinyMCE editor. Its interface is similar to the interface of the usual Microsoft Word, so we will not consider how to work in it. Let's look at the features.

Pasting text from a text editor

Typing the text of the material directly on the site is not a very good idea; it is much better to first type and proofread the material in some kind of text editor on your computer (this could be Microsoft Word or Open Office Writer, or even a primitive WordPad), and then paste it in editor form. You can paste text previously copied from a text editor only using the keyboard using the Ctrl+V key combination.

After insertion, you must perform a procedure to clean the format from invisible debris. This is done using the “Clear Format” command in the “Format” menu (see Figure 4). Text is highlighted using the key combination Ctrl+A, and then " Format - Clear format".

Figure 4. Format clearing.

Inserting an image

The built-in tools for TinyMCE (TinyMCE is the name of the text editor used in Joomla) for inserting pictures into text are inconvenient, so under the editor (or above the editable text, but under the editing buttons) there is a gray “Image” button, by clicking on which the user gets a window for visually selecting an image on the site or uploading it there for selection. Simply click on the image and click on the blue “Insert” button so that the image appears where the cursor is located(see figure 5).

Figure 5. Inserting an image

The upload images button is at the bottom of the window; you may need to scroll down to see the required buttons. In any case, it is better to take care of pre-loading all the necessary images through the "Media Manager".

The error is uploading images to the site in the “from the camera” state. Such images are large in size (more than 5 thousand pixels on one side) and large in weight, amounting to several megabytes. Such images will take up a lot of space on the server, which is far from unlimited, will load slowly when viewing the page, and small details of the image may be lost when it is reduced by the browser. Therefore, before uploading images to the site, they need to be processed, in particular, reduced. 1000 pixels in width with a quality of 70-80% and a resolution of 72dpi is quite suitable. The free program "FastStone Photo Resizer" will do an excellent job with this task.

Figure 6. Button for overlaying styles on material elements.

To apply styles to material elements, use button"Format" (not menu"Format", see Figure 6). This button opens a list of all styles that are predefined and can be used. Some styles are displayed in pale gray - they cannot be used at the moment. For example, you cannot apply a style intended for tables to an image.
To apply a style, you need to select an element (to select an image, click on it once, for tables, just place the cursor in the table)

Figure 7. Styles.

After inserting an image into the material, you should assign a style to it. There are three predefined styles for the image (these styles are not included in the standard distribution): img.img-intext, img.img-intext200-left and img.img-intext200-right. All three styles set the padding, border, and shadow for the image. They also control the width of the image. The img.img-intext200-left and img.img-intext200-right styles set the image to less than half its possible width, push the image to the left or right border, and also wrap the text on the other side.

The img.img-intext style places the image in the middle of the content and does not specify text wrapping.

If the site is on a Cyrillic domain, then additional styles may not be displayed

To answer this question, let's first look at the menu items. The menu item can display to the user a page with a specific material, materials from a certain category in the form of a blog, or in the form of a list.

When installing the site software, one category is immediately created and all created texts are automatically assigned to this category.

Categories are needed to structure materials in the control panel. It is possible to create a fairly complex hierarchical directory structure, and the larger the site, the more complex its directory structure.

It should be remembered that if you place material in a category that is displayed on the “face” of the site in the form of a blog or list by some menu item, then such material will be visible to all site visitors immediately after it is saved.

Change category to which the material belongs is very simple, just open the material for editing and use the button located to the right of the editing form to change the category. And save the changes.

Figure 8. Changing category

Outputting materials in the form of a blog

If you display materials in the form of a blog, then do not forget to separate the introductory part of the text from the main one using the “Details” button, which is located below the editor window (see the button in Figure 3 or 4). Figure 9 shows how materials can be displayed in the form of a blog. Here in each blog element are displayed material title, introductory text of the material, image of the introductory part of the material and a link "More details".

Figure 9. Displaying content as a blog

How to insert an introductory image

In the material editing form, you need to go to the “Images and Links” tab and click the “Select” button in the “Image for the introductory part of the material” section (see Figure 10).

Figure 10. Inserting an image for the introductory text of the material

And then an image selection window will open, in which you need to visually select the image and click on it once, and then click the “Insert” button. I recommend preparing several small (for example 100 x 100 pixels) images in advance and placing them in a separate folder.

The image of the introductory part of the material is not displayed when viewing the full material (after clicking on the “More details” link, a page with the full material opens).

P.S. This material does not claim to be an exhaustive description of all aspects of working with materials in Joomla 3.x - questions can be asked in the comments.

A website is not only texts. The images published on it play a very important role in the perception of the site. Any information is perceived much easier if it is equipped with demonstration pictures. Despite the apparent simplicity of the topic, working with images in Joomla has a number of features that will be useful for everyone to know, without exception.

This article is a guide to creating, processing, publishing and optimizing images on a Joomla website. From it you will learn:

• How to take full-size screenshots of pages in a browser and any windows on a computer.
• How to process images in bulk.
• How to add a watermark to images.
• How to prepare images for uploading to the site.
• How can you quickly and conveniently create mini-images (previews) in Joomla.
• How to show Joomla site images in a popup window.
• How to make it easier to load site pages on Joomla containing a large number of images.

Introduction.

If you have your own website, then you have probably encountered the task of adding images to it. It's unavoidable. When creating a website, many webmasters forget that, most likely, people who do not have an IT education will work with it. Many things that are obvious to IT specialists may seem unfamiliar and complex to them.

Let's take the simplest task of loading a picture into an article on a website. Even here there are a lot of pitfalls: image file size (weight), image resolution, image aspect ratio, image file extension - all this is important. But it’s difficult to explain all this to customers.

Why was this article written? Due to my line of work, I often have to explain such things to customers. That is why I decided to collect all these “explanations” in one article. Agree, it is much easier to give a person a link to an explanation with pictures than to explain everything to him “on fingers” every time. I hope that the article will be useful both to administrators and website owners who do not have a professional education, but are forced to work with their project on the Internet, and to webmasters who need to convey some of the features of website management to their customers.

All tips described below are taken solely from personal experience. I really hope that they will be useful.

How to take full-size screenshots of pages in a browser and any windows on a computer.

How to take a screenshot of a full browser page if it has a scroll bar? Admit it, do you know? =). Usually you don’t have to deal with such a task very often, but when it happens, you usually fall into a complete stupor.

Are you up to the task of taking a screenshot like this?

No, admit it? =)

Not so long ago, when the most popular operating system was WindowsXP, even taking such a screenshot was not easy. I had to press a button PrintScreen, open Paint, insert a screenshot of the image, cut out the desired frame, save in the desired format. All this, of course, had to be done if specialized programs were not installed on the computer.

Then Windows XP replaced Windows 7(Vista doesn't count). Here comes such a wonderful tool as Scissors. Now, using standard Windows tools, it was possible to take not only a screenshot of the entire page, but also a separate part of it, while cutting off everything unnecessary right there. Using Scissors, we can already get the image above, but what about an image that does not fit on one screen (has a scroll bar)? Here I use two additional tools.

If I need to take a snapshot of a page in the browser, cut something out of it and add comments, I use a browser extension FireShot. This extension is available in free and commercial versions. Free is enough.

After installation, you can take a full screenshot of a web page with one click, and most importantly, immediately cut out the desired block from it and add the missing information.

Screenshot:

Cut out:

Add (if necessary):

Save:

Everything happens very quickly and conveniently. You can initially set the desired image quality and it will be maintained in the future.

Wonderful. But what if you need to take a screenshot of a scrolling window in Windows? This is where the second program comes to the rescue: FastStoneCapture. Unfortunately, the program is paid. But when has that stopped our people? ;-). Downloading it online is easy. But if it really turns out to be indispensable, why not support the developer by purchasing a license? Moreover, the program is not that expensive.

In a nutshell FastStoneCapture.

We launch and see this floating block on the screen:

He allows us to do just anything. You can take a screenshot of the screen, a separate window, a window with a scroll bar, a selected area, and more. The sequence here is exactly the same as with FireShot: screenshot, cut, edit (if necessary), save.

With a couple of these little programs in your arsenal, you will forever forget about the problems with creating screenshots.

How to process images in bulk.

It happens that you need to upload a large number of images to your site, and if you have an online store, then there can be hundreds or even thousands of images. If you want everything to line up evenly, then obviously all images need to be the same size and proportions. How to achieve this?

For bulk image processing I use a free program FastStone Image Viewer. This, of course, is not Photoshop, but for a free program, the capabilities of FastStone Image Viewer are very wide.

The main program window is shown in the figure below:

One of the most convenient, in my opinion, functions of this program is the ability to batch image processing. Let's see how it works.

Open the folder with images and execute Tools -> Batch Convert/Rename. The following window will open:

In it we select images for processing and press the button Additionally, which will open a window with a lot of additional settings for the processed images:

Here we can:

• Resize images, including one side
• Rotate images
• Crop images
• Set the canvas size (everything that does not fit on it will be cut off)
• Set color depth, brightness, contrast and other image parameters
• Add text or watermark to an image
• Add a frame to an image

In this case, there is no need to set all the settings each time you use batch image processing in FastStone Image Viewer. Once created, you can save the settings to a file and use it whenever necessary.

After setting all the settings, we press the button Start and the program processes all the images for us, bringing them to the format specified in the settings.

Using FastStone Image Viewer, you can process images in seconds that would otherwise take you a long time to process manually. It is very comfortable.

How to add a watermark to images.

The task of adding a watermark to images also relates to batch image processing and the same tool is used here. IN FastStone Image Viewer, V batch conversion/renaming, you can open the tab Watermark. There will be the following settings:

In short, you will need to select an image file with a watermark and set its location on the processed images. The only feature worth mentioning is that the watermark image must have a transparent background. Otherwise, the background of the sign will be superimposed on the background of the processed image. For the background to be transparent, the watermark image must be saved in the " . png» .

After applying the watermark setting, it will be added to all processed images. Remember that it is no longer possible to remove such a mark from images, so always save their originals.

How to prepare images for uploading to the site.

Let's look at some features of preparing images for uploading to the site. They may seem obvious to some, but they are definitely worth mentioning.

Do not upload images to the site that are larger than the maximum screen resolution of a modern monitor.

For example, a 24' monitor usually operates at a resolution of 1920x1080px. There is no point in uploading images with larger sizes to the site. They will create problems when users view pages, since the file size (weight) of such images is usually several megabytes, which will be included in the loading of the page with such a picture. In general, the maximum image size sufficient for users to view in a browser is usually set to 800x860 pixels, which is comparable to a 14-15’ monitor.

Try to keep image file sizes as small as possible.

Always remember that the file size of each image will be included in the page size of the site on which the image is published. If you post on the page 6 pictures by 5MB each, then your page will have a size of 30MB. If anyone views it 1000 visitors, then the total traffic sent by the server will be 30GB! Moreover, such a page will load very slowly for everyone. Ideally, your image file size should be XX KB, where xx is any two-digit number, and not exceed 300KB(in case of high resolution images).

Image names must not contain Cyrillic characters or spaces. Image names and extensions must be lowercase.

Wrong: /my pictures/My picture.JPG

Right: / moi_kartinki/moya_picturejpg

If images are published in a catalog or slider, their proportions must be the same.

Remember, if you want to add multiple images next to each other so that they look straight without them being stretched or squished, you must make their proportions the same. Simply put, if one image is 200x100 (2:1), then all the others should also be 2:1.

Wrong: 300x200(3:2).

Right: 400x200(2:1).

By following these simple rules, you will ensure that all the pictures on your website will be displayed smoothly and beautifully.

How can you quickly and conveniently create mini-images (previews) inJoomla and make them expand on click.

There is one more feature of working with images on the site. It is not always possible to show full-size images at once. For example, an article might show a smaller version of the main image.

If we simply shrink the main image, giving it a fixed width and height to display on the site, it will not reduce the image file size. By adding a dozen of these “reduced” images to the page, we will get a very large page size and all the problems that arise from this.

A good option, in this case, would be to create a reduced copy of the image (with a real, low resolution), which is called preview, with the ability, when you click on it, to view the full-size image in a pop-up window.

The only problem is the complexity of such a solution. Need to:

• Create preview
• Upload the main image and preview to the site
• Add a preview to the material
• Add a link to the main image to the preview

Agree, the list is large, especially if we are talking about not one, but a dozen images.

To simplify this task, there is a plugin for Joomla called mavik Thumbnails. The plugin was written by our developer (here is a thread on Joomlaforum) and turned out to be very convenient, so convenient that I personally would include it in the basic set of Joomla extensions.

What is the essence of the plugin? mavik Thumbnails? When adding an image to your site, you don't need to create separate thumbnails. You simply add the original images to the material and shrink them to the desired width, similar to how you shrink windows in Windows. When the user views the page, the plugin checks the original dimensions of the image and those obtained after compression/setting the width. If they do not match, the plugin automatically generates a preview of the original image on the server, inserts it onto the page sent by the server to the user, and frames it in a link, which, when clicked, will open the original image in a pop-up window.

Once again, if you don't understand anything. To get thumbnail images in the material, which when clicked will open the original ones in a pop-up window, you need:

• Install and configure the plugin mavik Thumbnails
• Add an original image to the article and compress it “by the corner” to the size of the required preview

All! The plugin will do the rest for you. If you publish articles on your website, this plugin may be simply indispensable for you.

How to make it easier to load website pages onJoomla containing a large number of images.

Everything we have discussed above will not protect us from one more feature of the images posted on the site. Let’s imagine that it just so happens that we need to publish 30 pictures in an article. There are such articles, there are. I wrote it myself =). In this case, unless the previews are very small, we will still get the large page size problem. Let's count: 200 KB x 30 = 6MB. Not a very good page size, is it? What to do in this case?

Cunning people came up with a very elegant solution. When the page is initially loaded, only those images are loaded that are included on the so-called first screen of the user’s monitor (that part of the site that is visible on the monitor immediately after loading). Then, when the user starts scrolling down the page, other images are gradually loaded using AJAX technology. This method is known as " Lazy" A good example of Lazy Load is the endless VKontakte news feed. True, in this way, not only images are loaded there, but all information as a whole.

Implementing lazy loading in Joomla is very simple. Why? This has already been done for us. I present to you another wonderful free plugin - LLFJ - Lazy Load for Joomla!

How does it work?

• Install and configure