How to insert an image inside text by using styles?

Frequently Asked Questions about WYSIWYG Web Builder
Locked
User avatar
Pablo
 
Posts: 21508
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

How to insert an image inside text by using styles?

Post by Pablo »

Warning: for advanced users!

For technical reasons you cannot directly insert an image inside text with the standard text object.
And although you can use the HTML text box extension which does support text and images(http://www.wysiwygwebbuilder.com/htmltextbox.html), many users prefer to use the built-in text editor.

But... here is a trick that allows you to insert an image by using styles and pseudo classes. This may be useful to insert small images that do not affect the layout of the text too much.
For larger images this is probably less useful as it will may have more impact on the layout.

Make sure you have read this related tutorial about pseudo classes first:
http://www.wysiwygwebbuilder.com/pseudoclasses.html

Step 1
First we have to define the normal style. Let's call it 'insert_image'
For this example we will not change any of the default properties. This means that the text will use the style as it was applied in the editor.
Click OK to save the style.

Step 2
Select the new style in the Style Manager and click 'Copy'
Change the name to
insert_image:before
(note that you can also use :after if you want the image to be inserted after the selected text!)

In the 'CustomStyles' section of the style add the following code:

Code: Select all

content: url(my_image.png);
where my_image.png is the name of the image you want to insert.
Click OK to save the style.

Step 3
Add a text object and type some text.
Now apply the style to a word (or character) in the text where you want the image to be displayed.
The image will be inserted before (or after) the selected text, but it will not be visible until you publish the page!

To make sure that the image does get published we will need to insert a 'File Publisher' object and add the image to the list.
1) Insert a 'file publisher' object
2) Click 'Add' and select the image.

There are many more possibilities. So please check out this website to learn more about the 'content' property:
http://www.w3schools.com/cssref/pr_gen_content.asp
Locked