• Skip to primary navigation
  • Skip to main content
  • Skip to footer

LGD Callanish

an LGD test site - Gutenberg enabled

  • Home
  • Tile Examples
    • Tile Grid example
    • Post Tiles example
    • Library Tiles example
    • Image Tiles example
    • Gallery Grid example
    • Square Grid example
    • Columns and Grid Balance example
    • All Posts
  • Other Examples
    • Logos example
    • Person Bio example
    • Image and Text block example
    • Image Panel example
    • PDF Download example
    • Table example
    • Block Examples
  • Heading options
    • Full width custom heading
    • Wide custom heading
    • Narrow custom heading
    • No heading image
  • Theme Guide
    • All About Tiles
    • Tile Styles
    • WordPress Customiser
    • Image Sizes
    • Colour Scheme
    • Menus
    • Heading Image and Page Title
    • Page Margins
    • Editor Blocks
    • Reusable Blocks
    • CSS classes for modifying Editor Blocks
    • General CSS Classes included with the theme
    • Sidebars
    • Responsive Layout and Grid Balance
    • Known issues with Internet Explorer 11
  • Theme Blocks
    • Logos Block
    • Tile Grid Block
    • Post Tiles Block
    • Library Tiles Block
    • Image Tiles Block
    • Gallery Grid Block
    • Square Grid Block
    • Person Bio Block
    • Image and Text Block
    • Image Panel Block
    • PDF Download Block
  • Contact Us

Image and Text Block

The Lynx Image and Text block can be used for a 2 column layout with an image in one column and text (or other content) in the other.

The ratio of the columns can be adjusted and the image placed to the left or right.

At narrow widths the layout will change to single column with the image above the text area (regardless of the image left / right placement).

Unlike just using a columns block, the image is automatically cropped to fit the available width and so that the height of the 2 columns is the same.

Block Settings

Minimum Height: this will set a minimum height for the block, the options are full, half and auto. Auto will set the height based on the space required for the content of the Text area, full and half relate to the screen height.

Image Placement: the image can be placed in the left or right column.

Image Mode: sets the image either to fill the available space, being cropped as necessary, or to be as large as possible without being cropped.

Focus Point Control: select the basic settings or use the detailed focus point selector

Basic settings

Image: the image, selected from the Media Library or uploaded from your computer, should be large enough so it doesn’t have to be scaled up to fill the column.

Image Vertical Focus: select the vertical focus of the image – top centre or bottoms – so it is prioritised during cropping. (In most cases, the full height of the image will be used, so Horizontal Focus, below, is probably more important.)

Image Horizontal Focus: select the horizontal focus of the image – left, centre or right – so it is prioritised during cropping.

Detailed settings NEW

Image With Focus: allows you to select an image from the Media Library or uploaded from your computer and define a precise focus point that will be given priority if the image needs to be cropped to fit the available space.

Text Area Width: you can set the text column width to 1/4, 1/3, 1/2, 2/3, 3/4 or %.

Text Area Width Percent: if Text Area Width is set to %, you can set the width from 20-80%.

Match Tile Spacing: used with one of the preset widths, this will adjust the content width to align with Tiles in other blocks that use spacing.

Text Area Background Colour Selector: choose either the Theme Colour Palette (recommended in most cases) or Full Colour Picker.

Text Area Background Colour: pick a colour from the colour palette / picker.

Text Area Background Transparency

Text Area Padding: if the Text Area background is the same colour as the page / container block background, you may wish to remove the outer padding of the Text Area.

Example Image and Text block

Solar Power

Solar photovoltaic (PV) panels work by converting sunlight directly into electricity (even on cloudy days) using semiconductor technology. They can be integrated into buildings and even made into roof tiles virtually indistinguishable from normal tiles. Solar PV contributes about 3% of Britain’s electricity supply.

Solar energy can also be used to heat water directly using specially designed collectors. Even in winter a useful amount of hot water can be produced from roof top collectors.

Footer

Footer Area 1

Antique Farm Machinery
3 November 2018

Block: Image

Welcome to image alignment! If you recognize this post, it is because these are blocks that have been converted from the classic Markup: Image Alignment post.

Read More

Footer Area 2

Digester vessels
3 November 2018

Block: Button

Button blocks are not semantically buttons, but links inside a styled div.  If you do not add a link, a link tag without an anchor will be used. Check to make sure that the text wraps correctly when the button …

Read More

Footer Area 3

3 November 2018

Block: Cover

The cover block lets you add text on top of images or videos. This blocktype has several alignment options, and you can also align or center the text inside the block. The background image can be fixed and you can …

Read More

Copyright © 2022 · Site by Lynx Graphic Design

  • twitter
  • facebook
  • instagram