Text wrapping an image is a familiar technique which can still be adapted to modern web design. This item demonstrates that text can also wrap around a block heading giving a more unique design to text items. The text wrapped image has the advantage of being able to use only one image file since it is only half the content width above the breakpoint. Even so it should have a lazy loading function if the item is not in view at page load. If a larger image is required it can be provide offscreen by incorporating a modal on click/tap as can be seen in the ThemeKit Text Zoom Wrap widget …
Text wrapping an image is rather dated since it associated with print media. However it can be brought into this century by making it suitable for responsive web pages. Image The image is floated left or right in the usual way with a 50% width and a suitable right or left padding. On devices with a screen width less than the breakpoint setting the image becomes full width and pushes the text down below it. The image can have a border to define its edges if required. Text Area To add some more up to date features and functionality the text has a block heading to draw attention and the option to add a field for price/date with its own controls for font size and color. The wrap text can have sub headings using styled spans with controls for font size and color. Mark Words or phrases can be highlighted using the <mark> tag and to draw attention to a link in the naviagtion bar to related information. The mark tag has controls for font color and background. Breakpoint Below the breakpoint the heading moves out of position to appear above the image which becomes full width. Links Since links in text are not suitable for pages that will be viewed on mobile devices a navigation bar is included as an option.
Text Wrap Image Right
Text Wrap Image Right
Switch Layout
When two or more text wrap image items are inserted in a page it helps to add space and interest to the layout if the image position can be switchon alternate items. Image In this example the layout is switched by floating the image right and changing its margin from right to left. The iamge used in the example was reised to 600 x 540px and optimised before importing into EverWeb. Laxy Load Since the item is not in view immediately on page load the lazy loading function is turned on to allow faster page download in the brwosers - especially on mobile devices. Navigation The optional link bar can have several internaal or external links. The links have controls for min width and horizontal spacing to keep the layout uniform.
