The Lynx Image Panel block is a container block with a background image and an inner content area where other blocks can be inserted.
The block depends on WordPress 5.5 and Advanced Custom Fields Pro 5.9, which are not yet released but due in August ’20.
There are settings to control the height of the panel, transparency of the background image and whether it is fixed or scrolls with the panel.
The content area can have a background colour and transparency level set. And the width and positioning of the content area and its contents are highly adjustable.
The width of the content area can be set as a fraction of the available width, and the content area set to align with the grid pattern used by Tile blocks.
This block makes extensive use of modern layout methods which are not fully supported by older browsers such as Internet Explorer 10. These older browsers, representing around 2.5% of total browser use, are no longer supported by WordPress itself.
The full list of settings:
Panel and Background
Background Image: an image selected from the Media Library or uploaded from your computer.
Background Image Focus: Select the focus of the image, top, centre or bottom, so it is prioritised during cropping. How much of the image is cropped will vary with Panel block height and screen size.
Background Transparency: a slider to set the percentage transparency.
Background Colour Selector: choose either the Theme Colour Palette (recommended in most cases) or Full Colour Picker.
Background Colour: pick a colour from the colour palette / picker.
Image Fixed or Scroll: if set to fixed, the image covers the whole screen area and the panel content scrolls over the top, otherwise the image fills the panel and scrolls with the contents.
Block Height: sets the minimum height of the panel as the full screen height, half the screen height or auto (determined by the panel contents).
Sloping Top Edge*: applies a slope to the top of the block, either positive or negative; note that as the slope is at a fixed angle, the amount of cropping this will introduce to the block will depend on screen width. As the content area may also be cropped you should ensure that content, positioning and padding are set to ensure there is no cropping of key content (especially text).
Sloping Bottom Edge*: applies a slope to the bottom of the block, either positive or negative; note that as the slope is at a fixed angle, the amount of cropping this will introduce to the block will depend on screen width. As the content area may also be cropped you should ensure that content, positioning and padding are set to ensure there is no cropping of key content (especially text).
Remove Top Margin : Removing the space between this block and the preceding one can sometimes improve the appearance by avoiding a band of white between blocks if the preceding block has an image or colour background. But this needs used with care, especially if used with Sloping Edges, as it may cause some content to be hidden. Adding a Spacer block at the end of any container block, such as Group block, is recommended.
Removing top margin can avoid a band of white above the block if the preceding block has an image or colour background.
Remove Bottom Margin : Removing the space between this block and the following one can sometimes improve the appearance.
If used with Sloping Edges it may cause content to be hidden in the following block. If the next block starts with text or other content which must not be hidden, you should add a spacer block before it.
If a Group block follows a Panel block it will have top padding added automatically.
* note that this effect is not displayed on Internet Explorer or some other older browsers.
Positioning of the content area within the panel is controlled by a toolbar button, the icon for which is three rows of three dots. Clicking on this opens a panel where you can select any of the nine positions from top left to bottom right. The actual positioning will be constrained by the settings below.
Content Area Max Width: this sets the overall constraints for the positioning of the content (Full width, Wide or Narrow) which equates to the alignfull, alignwide and aligncenter block widths.
Content Width*: sets the width of the Content Area as a fraction of the available width as determined by the Content Area Max Width. The options match the 1, 2, 3 or 4 column grid patterns available to Tile blocks, this includes the percentage width being increased for narrower screen widths in the same way as the Tile grid reduces the number of columns in the grid.
Alternatively, you can select Percentage, which allows you to use a slider to select an exact percentage, see Content Width Percent, below.
Match Tile Spacing: can be used to adjust the content width so it will match the Tile grid alignment of Tile blocks with spacing between the tiles (not available with Content Width Percent).
Content Width Percent*: this option appears if you select “%” for the Content Width and lets you set any width you want but is not recommended for most cases – this is because unlike the Content Width setting, the value set will be used at all screen widths, so will result in very narrow columns on tablets and phones unless a high value is set (lower values are available as there may be unusual use cases where they are suitable).
Content Area Height: this is the minimum height and is either auto (determined by the content) or full (the height of the panel). This will determine whether any background colour is just behind any content or extends the full height of the panel.
Content Area Background Colour Selector: choose either the Theme Colour Palette (recommended in most cases) or Full Colour Picker.
Content Area Background Colour: pick a colour from the colour palette / picker. This sets the colour that will be used behind the content (it will not fill the whole content area unless content width is set to 100%).
Content Area Background Colour Transparency: sets the transparency of the background colour.
Content Area Outer Padding: sets the top and bottom padding (in pixels) between the content area and the panel.
Content Area Inner Padding: sets the padding (in pixels) between the content area and the content (individual content blocks may have their own padding / margin, increasing the spacing).
Note that depending on screen size and other block settings, some of these settings will make no difference to how the panel content displays. The block has a great deal of flexibility, but this means there are setting combinations which may not work well together or with specific inner content.
* note that the Content Width should be set to 1 or 100% if it will contain non-text blocks and you wish your site to display well on Internet Explorer.