Wrapping text around images

[cwphoto]

Hello:

I'm new to WYSIWYG web builder. I've have spend hours today trying to figure out how in the world to wrap text around an image. This is a basic function of Word, and other web software I used. It seems impossible in WYSIWYG web builder. I did see an Italian video of version 10 that seem to allow this, but I could not follow it as it was not in my native language. Can it be done or not? Is there a U-tube video that shows how to do it? Help is NO HELP. I have many pages to build, most with images and text. I need to wrap text around the images. This is basic stuff. Why is it so difficult in WYSIWYG web builder? What am I missing?

Thanks for any help. Very frustrated.

Troy

[Pablo]

Did you try the 'Wrapping text' object?


Or else you can use an article or blog object.




The reason why this is not so easy is because text rendering and sizing will slightly vary between browser and devices. So mixing text and images may cause text overlapping other elements in absolute/fixed layouts.

[cwphoto]

Looks like I made a very easy mistake. I had the easy mode turned on, and that reduces the items under miscellaneous to 3 vs 11. Gary from the U.S. pointed out my error.

For what it's worth, the US version of this program is 9* s***d web b*****r, which is identical. They have much better videos on their website. I wish I would have purchased from that company as I'm U.S-based.

Troy

[BaconFries]

@cwphoto for whats it worth your assumption is incorrect it is technically the same not a US version as you call it, it is just branded differently...

[rogerl]

This "original" version gets updated far faster and if you really want to watch that other gentleman's videos they are available free of charge on YouTube as are other videos from people on this Forum I also seem to remember that this version is cheaper to purchase.

[Sper]

I've been using one simple html generator for a long time, which has the ability to easily insert an image into text (but there aren't many other options). I think Mr. Pablo could implement that.
This model of wrap text can also have scaling image insertion if percentages are placed instead of dimensions. Handy for full text columns.

It is also very convenient to use the insertion of the image to the left of the text as a decorative part. Inserting to the right makes no sense if you go too wide for the text, because then the image seems isolated.

Here's an example of two-thumbnail html: http://sper.hr/pdfdoc/wraptext.html
An example is applicable in RWD.

----
Unfortunately, the HTML insertion test of the inserted image into the text inside WWB15 did not quite work. I inserted the picture, but I got problems with the "squeak" characters that disappeared in that part of the text ??? And of course the sense of the WYSIWYG editor is lost.

---
I know there is a problem with the editor and browser view, but if "LayerGrid" and "text" ie new "EasyWrapText" is used then the problem with the length / width of the text ie the content disappears. And this is best seen in the example I posted, which is essentially a LayerGrid.

[Pablo]

Related tutorial:
https://www.wysiwygwebbuilder.com/wrap_text.html

[Sper]

I finally managed to create an html plugin that inserts an image into the text (left or right) with margin and scaling relative to max width. Here's an example html code (image right):

Code: Select all

<div id="wb_page4Text1add" style="margin-left:0px; margin-right: 0px; ">
<A HREF="images/hladnjaci.jpg" TARGET="_top" TITLE="hladnjaci.jpg">
<IMG src="images/kojak.gif" border=0 width="50%" height="50%" ALT="Alt text ...." ALIGN="right" HSPACE="10" VSPACE="10">
</A></div>

Here's an example html code (image left):

Code: Select all

<div id="wb_page4Text1add" style="margin-left:0px; margin-right: 0px; ">
<A HREF="images/hladnjaci.jpg" TARGET="_top" TITLE="hladnjaci.jpg">
<IMG src="images/kojak.gif" border=0 width="50%" height="50%" ALT="Alt text ...." ALIGN="left" HSPACE="10" VSPACE="10">
</A></div>

Editor WB15:


And the result in the browser:


In the example, I used LayotGrid as a frame and a table and three texts (in three colors). The html image insert is between the first and second text boxes. The image is positioned to the left and may be to the right. The margin around the image is symmetrical and set with Hspace and Vspace.

Not done in the example, but the text (ocher) can be "justify" set next to the image (and elsewhere). And then it looks better.
In the FilePublisher box I added the "images" folder and inserted the "kojak.gif" and "hladnjaci.jpg" images from the hard drive (which I use in html). Image "kojak.gif" has a transparent background! It is set to occupy 50% of the max width so that the image is scaled. The absolute dimensions in "xx px" can also be specified.

If you want to go with the additional text below the image, the html "<BR CLEAR="left">", <BR CLEAR="right"> or <BR CLEAR="all"> should be inserted before that text (between the second and third text boxes). This skips the part that did not fill in the previous (maybe short) text next to the image.

I hope the html plugin will help someone to make the website more beautiful.

[Pablo]

Note that the 'wrap text' object in WB15 also supports floating elements and it can be used inside a layout grid.

[Sper]

With a little effort, I was able to write an extension to insert images (left or right) into text that works with WB14 and probably for WB15. If anyone is interested, let them know. I send the extension for free.



Output html:

Code: Select all

<div id="LayoutGrid1">
            <div class="row">
               <div class="col-1">
                  <div id="wb_Text2">
                     <span id="wb_uid0">1 Double click to edit ajs bcajb cajkabjckb a7</span>
                  </div>
<!-- start Html image insert V1.003 -->
                  <div><a href="http://google.com" target="_top" title="Google">
                        <img src="./images/test_animated.gif" alt="Gooogle" align="left" height="50%" hspace="5" border="0" vspace="5" width="50%">
                     </a></div>
<!-- end Html image insert V1.003 -->
                  <div id="wb_Text3">
                     <span id="wb_uid1">2 Double click to edit ajs bcajb cajkabjckb a7 aj cba jbcla kcl cnaklcn alkcnakl cnlkcnalk canlkcnaklcnaklc nalkcnalkcnkla cnaklcncknackl xkj sdkjs k cnskjskjsbkjsdn lksn lkcn cn skcns kvnlsknv kslnvlks vnlksv<br></span>
                  </div>
               </div>
               <div class="col-2">
                  <div id="wb_Text1">
                     <span id="wb_uid2">Double click to edit<br><br><br><br><br><br><br><br><br><br></span>
                  </div>
               </div>
            </div>
         </div>

[Chris_t]

For what it's worth, the US version of this program is 9* s***d web b*****r, which is identical. They have much better videos on their website. I wish I would have purchased from that company as I'm U.S-based.

Troy

I trialled 9* s***d web b*****r a few years ago and found that the support was poor. They didn't know the answer to pretty basic questions and so I bought WYSIWYG Web Builder instead. The support here by Pablo and others is brilliant by comparison. There are plenty of help videos on YouYube for WYSIWYG Web Builder if you need them. In Pablo You are dealing with the man who builds the programme and knows it inside out.

[crispy68]

Hey sper,

I also wrote an extension for this prior to wb15. You can get it here: https://www.webbuildertemplates.com/web ... on-24.html

I would be interested in your version also. You can contact me at ron@wizbangwebdesign.com.

[Sper]

Thanks @crispy68. Your extension seems to merge the image with the text and use css. Mine is pure html. It seems more convenient to me because I stack uniform blocks of text before, with and after the image. This is convenient for me because I can easily move text around an image in a design. Thanks again for the offer.

Maybe a small suggestion for improvement. As it seems to me, you miss the possibility that the following text block does not go immediately below the wrap text. This is done, for example, by the code behind the wrap text:

Code: Select all

 <div style='clear:both'></div>

I'm not a professional at html programming and I'm trying to make things as easy as possible to use. Less effort with maximum result.

[crispy68]

I'd be interested if you would send me a copy of your extension.

Does your extension work outside of a layout grid?

Sorry, i'm not sure what you mean by

you miss the possibility that the following text block does not go immediately below the wrap text. This is done, for example, by the code behind the wrap text

I use CSS as much as possible. Some of the attributes you are using (like vspace) are not supported in html5. Instead, you will want to use CSS for this.

[alan_sh]

Sper,

I'd be interested in seeing your extension.

Regards

Alan

[Sper]

@ crispy68. It's the same principle only my extension has no css, only html. This is the html that is inserted with the image, and the properties are set in quotation marks:

Code: Select all

<!-- start Html image insert V1.003 -->
                  <div><a href="http://google.com" target="_top" title="Google">
                        <img src="./images/test_animated.gif" alt="Gooogle" align="left" height="50%" hspace="5" border="0" vspace="5" width="50%">
                     </a></div>
<!-- end Html image insert V1.003 -->

The wrap text around the image is the first and everyone else following the extension, filling the space next to the image. It may also be possible to put a small thumbnail or other object. An example is below:



Extensions, source code and ExtBuilder.exe can be downloaded from:
https://mega.nz/file/iZ5UxaBQ#w1cbfcxSM ... ibrBEUMng 1,7M
Update 9.2.2022 .. Recompiled with ExtBuilder6.5 to version 1.004.

[crispy68]

Hi Sper,

Thanks for the files. Very similar to what I've created.

[roygore]

Like cwphoto above I am also new to WYSIWYG web builder and am in the process of moving all my websites from the obsolete Serif WebPlus platform. I also have hundreds of text pages with integrated photos using text wrapping which must be incorporated into the new WYSIWYG site. FYI - this is a history museum website with lots of historical texts and documents to be presented for viewing.

cwphoto - I can't locate this "easy option" setting that you mention. Can you guide me please?

Pablo - I can't locate the "wrapping text" object that you mention. This from the description you gave sounds like it will make text wrapping very simple! Can you guide me to find it please?

The ideal scenario would be to copy and past the text, including the photos, straight from the old website and paste or insert into the new WYSIWYG website. I have to ask - is there any way of doing that?

Thanks for any help you can give me to help achieve this mammoth task I have in front of me.

Roy

[Pablo]

I can't locate the "wrapping text" object that you mention. This from the description you gave sounds like it will make text wrapping very simple! Can you guide me to find it please?

Maybe this will be helpful?
http://wysiwygwebbuilder.com/wrap_text.html

[aml02873]

Easy mode switch is in the View Menu
Textwrapping object is in the Miscelaneous Menu.
In the View Menu you also can switch on the toolbox. Then all objects are in an easy accessible window.

I have used Serif to and I can assure you that WYSIWYG webbuilder is far out superior. Everything you can do with Serif and much more is possible.

[roygore]

Thanks to Pablo and aml02873 for your feedback and help.

I've now found "Wrap Text" along with Easy Mode and Tool Box both of which I already had set properly.

Thank you.

The "Wrap Text" doesn't appear to be responsive. Is there a setting I should make?

Also, the margin setting only seems to work in the 'Shape' position. Is that correct?

Roy

[aml02873]

If you put the object in a layoutgrid its responsive.

Right click on the image and you can set the margins

[roygore]

Simple when you know how! Sorry to be so slow still learning.

Thanks Pablo

[roygore]

Pablo

Is it possible that the next version might included the ability to copy and paste/insert text with text wrapped pictures say from a word document or perhaps from another website into WYSIWYG? In my view the pictures could be fixed in the text and not editable.

I appreciate it's a big ask but WOW what a big plus that would be.

Thanks again for your expertise and help.

Roy

[Pablo]

Is it possible that the next version might included the ability to copy and paste/insert text with text wrapped pictures say from a word document or perhaps from another website into WYSIWYG?

WYSIWYG Web Builder uses the standard text editor component of Windows (richedit). Unfortunately, this functionality is not supported by Windows.