

This single stack element is intended for use with the Stacks plugin, developed by YourHead Software. So this can be a useful trick to know about. Quite a few web browsers will even go ahead and calculate responsive scaling, before the image has finished loading. Useful tip: if you are finding that your FreeStyle banner images are causing content to get shifted down the page as it loads, try providing a height and width attribute in the HTML image tag, set to the same width and height as your original image:Īll modern web browsers will then reserve a space (equal to the dimensions you specify) for the image to load in, which will reduce shifts occurring during and after page rendering. Don't forget to take advantage of the free FreeStyle stack as well, for the Stacks plugin.

It's hoped that this new FreeStyle concept will give control of theme banners and headers back to theme users again, and help streamline developer workflows.

When a FreeStyle-enabled theme sees the 'fs' code, it knows to treat that as content for the FreeStyle container. The alt='' attribute you see in the image tag can be used to provide a description about your image to search engines and social media services.
Rapidweaver photo plugin code#
These code snippets can be saved in RapidWeaver for quick future use. So 4.jpg would display a different image, depending on how your theme names and numbers example banner images. In the above pathto example, incrementing the number of the image (e.g.
