Search & Sort Image Grid

This versatile image grid has functions to sort the items and to search them for keywords. There is also a version which is specifically designed for blogs which can be seen be following the link below. The grid can have a fixed height to allow it to scroll or an auto height to have all the items in view.
Search
The search function finds keywords in the item heading and displays the results. To try it out, type the word "blog" in the input field and the relevant enrtries will appear. Delete the typed text and grid will reappear.
Sort
The entries can be sorted alphabetically - rather than by inserted order - by checking a box in the widget settings.
Lazy Loading
Since the widget can hold up to 500 entries - which means a large number of images to download - a lazy loading script is used to allow the images in the viewport to download but delaying the rest of the images for a preset time to allow the page content to load a lot faster.
Grid
The grid has controls for setting the number of items per row for each device type - computer, tablet landscape, tablet portrait and mobile phone. Since the layout is CSS Grid, the item spacing is easily adjusted using the grid-gap selctor and there is also a control for left/right padding and vertical spacing.
Heading & Input Field
The optional heading sits above the input field. The field has controls for background color and border width, color and radius. The placeholder text has a control for the font size and the extra styles required to change the placeholder text color for each browser have been added to the CSS.
Grid Items - Show More/Less
Each grid item has an image, heading and text. When more than just a few words of description are required a More/Less function can be added to each item where the amount of text shown on page load is limited to a preset number of characters.
The blog version of this widget optional image links but does not have the "more/less" function. It is set up to demonstrate the grid overflow scroll function.

Blog Search Grid

Search Grid

  • Blog Design & Setup

    This advanced image grid will display up to 200 blog entries. It uses a lazy loading plugin to ensure fast page download and has a search function and an optional sort function

  • Blog Essentials

    Blogs are all about text content so make sure it is easy to read. Use a sans-serif font with a minimum font size of 16px, color black on a slightly off white background - somewhere between # FEFEFE and #F8F8F8. The slight reduction of the background's "whiteness" helps to reduce glare and makes for more comfortable reading.

  • Download Speed

    Images make up about 80% of the average web page content and are the biggest factor in causing poor performance. Images that have not been properly optimised effect the page download time and slow download is the main reason why potential visitors will quit and move on.

  • Blog Images

    A blog post with too many images can put visitors off and distract them from reading the content. The absolute worst thing you can put on a blog page is an autoplaying slideshow. Not only is it extremely irritating if you are trying to read the text but it causes really poor download performance - especially on mobile devices - and uses up unnecessary battery power.

  • Sticky Sidebar

    Rather than use these annoying block ads like those from Google, getting local or national sponsors can be a better to option for monetising a blog. Using the scroll function, the hidden adds would cost less than those in view and sponsors would pay for position in the list and the most popular pages.

  • Flyout Image Links

    These image links flyout on click or tap from the left side of the page. They are good for quick links to related posts - or anything else for that matter! The number of images per row can be set for each device type - computer, tablet landscape, tablet portrait and mobile phone.

  • Photo Post

    The smaller the size of the image - the faster the page will download. An image large enough to display on a computer with decent quality is really too big for downloading on mobile phones. To save loading different sizes for the different devices, the image percentage image width can be reduce for wider brower settings and screens.

  • Related Posts

    To encourage visitors to stay on a blog, it's important to have links to related blog posts just above the footer at the bottom of the blog entry page. Using image links with a caption and a few words of description will not only make visitors more likely to follow but also get the search engines to index the keywords.

  • Card Slider

    The slideshow has a full width, fixed height background with card style slides. The slides can be used as a different approach to blog navigation by making the slides links to the various posts. The slideshow can have up to 48 images and these can be set to lazy load for better page download efficiency.

  • Hero Switch Image

    A full width fixed height "hero" image looks great when viewed on computers but not so much on touch devices like the iPad and iPhone. This one overcomes the poor performance and image visibility by switching from fixed height on computers to responsive height on mobile devices and then viewport height on mobile phones in landscape mode. Viewport height means that the item has a height of 100vh (100 viewport units in height) and fills the height of the browser/device window.

  • Comments

    A successful blog requires an engaged audience. Interaction with blog subscribers encourages them to feel as though they belong to a group and are more likely to mention the blog to others.
    If the comments section is not on the same page as the blog post, there needs to be an easy way to get to it.

  • Circular Wrap

    This blog entries grid displays the latest post at full width and the rest in two columns when viewed on devices with a browser/screen width above the break point. On narrower screens, they all become full width.
    Each item has a heading, optional date, a round image to the left, wrap text and a link with the option to show a title on hover.