Image and text wrapping in a responsive template
We recently turned our attention to a small problem we had noticed on our site. We display a few famous quotes as a module on the site, and since moving to a responsive site template, noticed that the various quotes did not display nicely when various screen sizes were in use.
As displayed the quotes were composed of an image tag followed by the specific quote text, and then by the author details. A typical quote quote would thus look similar to the following: (Lines split for convenience.)
2: <img style="margin: 5px; float: left;" alt="Thomas Jefferson" src="/images/Quotes/thomas_jefferson.jpg" height="104" width="80" />
3: We must not let our rulers load us with perpetual debt. We must make our election between economy and liberty or profusion and servitude.
4: <br /><br />
6: <div align="right"><p>Thomas Jefferson</p></div>
Typically the images could be of various sizes, but we tend to keep the width constant just leaving the height of the image as a variable. Images were also all aligned to the left with a 5px margin as shown in line 2 above.
It was long ago discovered that we had to insert some additional ‘break <br />’ tags into the code (line 4 above). The <br> tag inserts a single line break, and is useful for writing addresses or poems. The number of break tags required depended very much upon the height of the image and the length of the quote text, otherwise the ‘author’ details tended to cause subsequent quotes to become mispositioned on the page. If the quote text was very long then no ‘line break tags’ were required at all. In fact we became quite efficient at guessing the required number of ‘line break tags’ to insert, but it was always something that we intended to investigate when circumstances permitted.
The change to a responsive template raised it up the attention list and we soon discovered that we could add a specific parameter to the ‘br’ tag as follows:
<br clear="all" />
This however whilst working correctly is not HTML5 compliant so a CSS solution was required. Rather than create a specific style to add to our CSS style file, we decided to add it as an inline style as shown below:
<br style="clear:both;' />
We have thus ended up with a solution that will work irrespective of the ‘height’ of the image in use, and it is also handled nicely when the page size is changed, or display on different devices.
The next thing to do was to make the change to all of our existing quotes within the database. We didn’t fancy manually changing each quote individually, so we turned to accessing the database directly and writing some SQL to perform the change.
1: update table
2: set quote = replace(quote, '<br /><br /><br /><br />', '<br style="clear:both;" />')
3: where instr(quote,'<br /><br /><br /><br />') > 0;
The basic command we used is displayed above, where we specified the table name on the first line, and our quote text was contained in a field named ‘quote’. We first ran the command searching for four (4) ‘br’ tags, then changed the command to look for three (3) ‘’br’ tags, then two (2) and finally just a single ‘br’ tag. These ran very quickly and in a matter of seconds we had altered all of our quotes to use the new ‘br’ style.
What was at first an apparently difficult problem ended up being very simple and easily changed.