EverWeb Widgets

RGL Stack 3 Round Wrap

Grid

This grid demonstrates how to wrap text around a round image.

alt

The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a vaalue of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the height equal by stretching each item to the same height as the tallest one in any row.
There is a control to adjust the alignment to start, center or end if required.

Columns

Curves

The text can be made to follow the curve of a round image.

alt

The image is floated left in a container which is defined as a block element. The image itself is inserted in another <div> which is given the resuired width and height. This container can also turn square images round if its border radius is set to 50% and the overflow selector is set to "hidden".
The magic happens by adding the "shape-outside" selector with a value of "circle" and a right margin to space the text away from the image.
The way in which the text wraps can be adjusted using the Spacing control and the text line height control

Images

Links

Links can be added below the text if required.

alt

The link is positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The linkcan be configured to open internal or external pages using relative and absolute file paths. There is a checkbox to turn on the function to open the link in a new window.

Info

Setup

The items are added using the EverWeb Widget API Assets List. Crop all three images square to the same size - 200px x 200px is big enough - and drag them together from the Finder and drop them onto the Assets List in the widget settings.
Select each file name in turn to enter the required data.
Text
As can be seen from the example, the widget can use a Google hosted font with a web safe fallback.
The heading can be aligned left or center. The lead in paragraph above the text wrap image is optional and is selectable for each item.
Links
Links are optional and are turned on globally. They open internal or external pages.
Links can be entered as relative or absolute file paths and open in a new window if required. Follow the link below to find out about file paths.

File Paths

Grid Item Gap & Align

Items in a CSS Grid layout are separated using the "gap" property. Gap applies to the spacing of both columns and rows. If more control is required, the "grid-column-gap" and the "grid-row-gap" properties can be used.
The grid can be moved away from the browser/device window edges using left/right padding.
Vertical Align
Grid items can be vertically aligned using the "align-self" property. These are …
[1] Auto - the item fills the height of the row
[2] Start - The item is aligned at the top of the row
[3] Center - The item centers itself vertically
[4] End - The item is at the bottom of the row.
The items in the widget above are set to align "auto" since they have a border and unequal amounts of text. This setting keeps all the grid items uniform.

© EverWeb Widgets -