Good day, dear readers of my blog. Well, we have reached the final stage of creating a beautiful VKontakte group. You and I have already learned how to make a menu, then we created a charming single style picture and are now ready to post the photo in a pinned post.
If this is the first article you are reading, then I would recommend that you go to the first lesson and learn a lot of new and interesting things that will take your public to a new level of development and attract many new subscribers. However, if your only desire is to learn how to make a picture a VKontakte link, just read this post to the end.
How to make an image a link in HTML
HTML uses a simple mechanism to generate links. There is a special tag that denotes a link. The objects inside it are references. A required tag attribute is the href parameter, which specifies the target page to which the link will lead.
To create a link image, just place any image inside the link tag. Images in HTML are inserted using a tag with a src attribute indicating the path to the image. The resulting code for inserting the link image looks like this:
It is clear from the text that kuda-vedet-ssylka is the address of the landing page, and gde-lezhit-kartinka/kartinka.png is the path to the image file and its name.
To customize such an image, you can use all the standard html and css functions that allow you to change the size, location, and specify all kinds of attributes.
for a tag
, which opens the link in a new tab.
And the tag often contains alt=”alternative text shown if the picture has not loaded”, title=”image title”, height=”height in pixels”, width=”width in pixels”.
The resulting code could be something like this (my blog's logo leading to my blog's home page):
And this is how it works:
Image link to CSS
As for CSS, it is an integral part of a modern website. Style sheets help get rid of unnecessary repetition of similar sections of code by specifying the properties of certain elements once, and then only indicating their names.
In order to make an image link using CSS, we need to go through 2 steps:
1. Create an object class and write it in the style sheet (style.css file).
The general code looks like this:
#link-img { display: block; width: 323px; height: 232px; background:url(https://gde-lezhit-kartinka/kartinka.png) no-repeat; }
In this case, link-img is the class of the object, width and height are the size of the image, background is the background of the object (we set the image as the background).
2. Insert an html link with an attribute indicating that it belongs to the link-img class into the desired place on the site. For this, the same tag is used as in the previous version. The code looks like this: id=”link-img” shows that the link is not an ordinary one, but belongs to a given class, as a result of which the object takes on the properties of this class (height, width and background). Notice that the opening and closing tags are empty inside. We did not specify anything, since everything necessary is already contained in the properties of the class and the required image is specified by the background of the object.
How to make a picture a link on VKontakte
In social networks, the procedure for creating links from images is different from regular sites for the reason that you do not have access to the source code and we cannot use html tags, so the procedure is reminiscent of dancing with a tambourine.
So, let's conjure adding links to pictures (or pictures to links, as you like) on the wall or in messages in VKontakte groups.
Step 1. Preparing the picture
In VK, you can only make a large image clickable, the minimum size is 537 by 240 pixels; anything smaller will be displayed next to the link, but will not lead to the desired page.
Supported formats are jpg, gif and png.
Step 2. Paste the link into VK
When you add a link to a message box, the social network automatically retrieves data from the site and displays the page title (I mentioned this in the article on how to make a hyperlink in VK), a small description and a preview image (if there is one).
Step 3. Insert an image
It is understood that the automatically generated block for the link on VKontakte is not suitable (there is no image, it is small or you don’t like it) - it needs to be changed.
To do this, select the “Select your illustration” button (camera).
A window will appear for selecting a file; here, by the way, you will see the requirements for the format and size of the images. Click “Select file” and select what you prepared in the first step.
After choosing, you will be able to make slight adjustments - trim off the excess and rotate it. Click “Save changes”.
After this, the format of the published news will change. If you did everything correctly, the image will take up the entire width of the message and become a link. Click “Submit” and enjoy the result.
Adding a photo link to a wiki page
When creating wiki pages, you can also use this function. Although in this case the algorithm will be different:
- Go to the group where you want to create a wiki article.
- Open the "Latest News" tab.
- Click on the “Edit” button.
- The toolbar will appear. Find the camera icon on it and click on it.
- Select a photo from those already uploaded to your page, then click “Attach” or add a new one from your computer’s memory (the insertion will happen automatically).
- When the picture appears on the page, you need to click on it. If text code is displayed, it means that wiki markup mode is enabled and you need to switch to the visual editor to simplify the task. This is done by clicking on the <> icon in the upper right corner of the toolbar.
- In the pop-up window, enter the following data: Text – the words entered here will be displayed when you hover over the photo (can be left blank).
- Link – a link is inserted into this field to which you want to redirect the user after clicking.
- Size – the desired size of the image. To avoid distortions, you should activate the “Maintain proportions” option.
Mission accomplished. All that remains is to add text to the page, if required, and save it.
Reference. You can only create a wiki page directly in groups. There is no access to this section on public pages. To bypass the ban, you must use a link like: https://vk.com/pages?act=edit&oid=-***&p=page_name. Instead of “***” you need to indicate the public ID, and at the end enter the desired title of the page being created.
Following the recommendations specified in the article, you will be able to create a link in the form of a photograph, both on the wall and inside the wiki page. Both options are easy to learn and accessible to any social network user. By presenting a link in this form, it is easy to attract the attention of other VK participants and achieve an increase in the number of transitions.
Related Posts
Search for people, communities, groups, videos on VKontakte
4 awesome VKontakte applications that most users don’t know about
How to find out a person’s age on VK if he hid it
How to make a picture a link on the forum
In most cases, when creating posts on forums, visual editors are used, through which you can insert an image with one button and turn it into a link with another.
But, if this is not possible, then BB codes come into play - this is a typical forum markup, functionally similar to HTML (most functions are similar), but having a different syntax.
Interestingly, all these BB codes are ultimately translated into HTML, since browsers cannot read them.
The image in the BB code is indicated like this:
A link to the image is provided.
And links are formed by tags. And to create a link-picture on the forum, you need to wrap one structure into another, it will turn out like this:
Of course, all this is done in the text mode of the editor, and not in the visual one. That's the whole secret.
Making a link with a word
To convert any type of link into a word, you need to follow the same template. You can link to the community, your page, and even certain photos or albums. Well, you can also insert the code wherever there is an opportunity to write something, for example, a discussion, posts on a wall or in a message.
To user page
Let's try to make sure that the first and last names lead to the site. First, we need to go to the page of the person we are interested in and copy his identification code (id).
Now remember the simplest formula: [id numbers|User name]
This is what will allow you to encrypt the link under any word in the future. For example, you want to write on the wall.
- We paste the ID that we copied into the line to send the message.
- We put one square bracket on the left, and after the numbers a separating line “|”.
- Now you can insert a word that will eventually be visible to everyone and lead to the desired page. For example, the first and last name of the person to whose site the link redirects. At the end we close it with a square bracket.
After you send what you wrote to the wall, instead of this formula there will be a hyperlink in the form of the person's name.
It is important to note that when creating a link, you cannot put spaces next to parentheses or separators. They are allowed only in the phrase that will serve as a hyperlink.
Per group
In fact, for a community or group, everything is created according to the same scheme. However, many are faced with the fact that in a group, instead of an identification code, there is a word or phrase in the browser line.
- Then, instead of a digital value, insert this particular word or phrase into the formula after the opening square bracket.
- Copy it without http or www.
- Only in the case of a word you don’t need to write “id”.
Now we put a separating sign and a word that, when clicked on, will lead to the group.
For an album or post
When you create a hyperlink to a photo album or post, the principle remains the same.
- Open the desired album or post and copy the numbers from the browser.
- Next, we insert the last numbers into our formula and place them where necessary.
- Then be sure to put the id directly in the formula.
It is important to remember that wherever you send the diagram, always copy only the numbers in the address bar.
This is what happens in the end.
It is not possible to create a hyperlink in the form of a word to an external site. Unfortunately, Contact does not yet provide such an opportunity.
