The Lynx Logos block is part of a system we have developed for displaying a grid of logos in Posts and Pages. Logos added as Logo posts can then be placed within pages using the Logos block.
Logo posts are similar to normal Posts but with inputs for Title, Image, Padding and Link. They can also be given categories, eg, Members and Supporters.
To give all logos equal prominence, you may want to add padding to some logos, particularly logos that fill both the width and height of the logo area.
As a rule of thumb, padding of 25% for square logos and 22% for circular logos will give them similar prominence to logos that are thin and tall or wide and short.
The amount of padding will depend on the shapes of the other logos and whether the logo images have space around the edges.
We’d recommend cropping all logo images so they don’t have any unnecessary space. You can either do this before upload or using the WordPress Edit Image option. To edit the image in the Add / Edit Tile screen after uploading, click the pencil icon (hover over the image to view this); click Edit Image; drag the cursor across the image to create a bounding box; drag the edges of this box to set where it will be cropped; click Crop; click Save; click Update Image; then Update for the Logo post. (Note that this edit will affect the logo image anywhere it is used throughout the site, not just in the Logo block.)
Displaying the logos
Logos can then be displayed on any page or post within your site and will automatically update in line with any deletions, additions or category changes made to Logo posts.
Once you’ve added a Logos block to the content area of the Editor the sidebar will display the various settings for the block.
The content area shows what will be display on your web page, while the sidebar settings control this output.
The settings provided by the block are:
Title: optionally add a heading for the block.
Category: tick boxes to select one or more categories.
Multiple categories filter: if more than one category is selected, this option allows you to define whether logos to be displayed are those in any of the selected categories or only logos that are in all the selected categories.
Order using: this sets whether the logo display order will be based on the Logo Title, or the date the logo was added.
Display order: this allows you to reverse the display order; wanting to list from Z – A is unlikely, but if ordering by date, you may want the logos listed newest first rather than the default oldest first.
Number of Columns: allows you to set the maximum number of columns (2, 3, 4, 6 or 8) in the logo grid – the number of columns will reduce on narrower screen widths.
Greyscale filter: if enabled, logos will display in black and white till they are hovered over. (This feature will not display in Internet 10 or 11. We have chosen not to add additional code to this theme to provide non-essential styling for browsers no longer maintained by Microsoft.)
In addition, the Block toolbar offers Wide and Full Width options.
The WYSIWYG display of blocks in the editor means that you see the logos (or the title if an entry doesn’t have a logo) laid out as they will appear on the web page (though the number of columns may change when viewed at narrow screen widths). Changing any of the settings in the sidebar will automatically be reflected in the editor.
In addition to the options and output detailed here, it is possible to get customisations made to this system for your specific requirements.
See the Logos examples page.