The Appearance tab is where you handle miscellaneous display settings for the Directory. This includes menu options, images, and listing layouts.
Styling
Button style
Choose whether to override WP theme button styling or not. For consistency, you may want to use the WP theme style for buttons. This setting is limited to Business Directory pages and doesn’t affect anything else. If you find that you have conflicts or the style isn't quite right, you can adjust that with custom CSS.
Primary color
Select a color to use for the rootline, file uploader, and buttons. If you would like this color to be used for the buttons, the Override WP theme button styling button should be checked.
If you choose to use your WP theme buttons, we recommend you set this color to the button color in your theme.
Listings layout
The Business Directory Premium plugin adds this layout option. It allows you to choose how the listings are displayed. This includes three options:
- Default - Use the single column layout, or the layout from a directory theme. This option is recommended if a directory theme is installed.
- Two Column - Show your listings in two columns instead of one.
- Table - Listings will show in a condensed, sortable table.
Images
These settings control the way your images appear in listings within the directory.
Images
The settings you can control here are:
Allow images?
If checked, users are allowed to upload images to their listings, based upon either their plan restrictions (paid sites), or the restriction set for Number of images allowed in the plan settings. You must turn this setting ON if you want to have any listings with images (free or paid).
Min image file size (KB)
The smallest size of image to allow for upload. Images smaller than this size are automatically rejected during upload. If you want to accept ALL files regardless of size, set this to 0.
Max image file size (KB)
The largest size of image to allow for upload. Images larger than this size are automatically sized down to save on space.
Min and max image width
The narrowest and widest width of the enlarged image you allow on the site, in pixels. This width is the “detail image” width, which is the width of the image as displayed by clicking on the thumbnail. This setting does NOT affect the thumbnail of the image shown in the list or detail view.
Min and max image height
The shortest and tallest height of the enlarged image you allow on the site, in pixels. This height is the “detail image” height, which is the width of the image as displayed by clicking on the thumbnail. This setting does NOT affect the thumbnail of the image shown in the list or detail view.
Turn on thickbox/lightbox?
Turns on the Lightbox feature, if not present in your theme or plugins. Uncheck if it conflicts with other elements or plugins installed on your site. The "lightbox" is the effect when you click on an image and the background dims and the image appears in a popup with a small frame around it. This is a common feature of many themes (and other plugins) that can be enabled by WordPress. BD supports adding it to images if you turn on this setting.
Require images on submit/edit?
Choose to require an image to be added to a listing.
Thumbnails
Show thumbnail in excerpt
Choose this option to allow an image to be shown in a listing excerpt.
Show thumbnail in listing from
Use this setting to choose which thumbnail image is shown. You can choose either the thumbnail from Business Directory Plugin, from your WordPress theme, or to not show the thumbnail at all. If no thumbnail is chosen, and the listing includes other images too, the thumbnail image will be included in the gallery.
Main thumbnail image size
This indicates the size of the main thumbnail to be used both in excerpt and detail views. For CROPPED image size values, we use the EXACT size defined. For all other values, we preserve the aspect ratio of the image and use the width as the starting point.
Gallery thumbnail width and height
The size of the any images other than the main thumbnail shown on a listing. The height is computed automatically, maintaining the aspect ratio (width:height).
Crop thumbnails to exact dimensions
Thumbnails can be created using one of two possible algorithms: Create a thumb based on an exact image size (150x150), ignoring the source image size completely, or you can create a thumbnail that is 150x(something) where (something) is calculated by the aspect ratio of the source image. For example, if the source image was 1000x500 (a 2:1 aspect ratio), the thumbnail would be created at 150x75 if this setting is NOT checked.
Coming Soon Image
Use "Coming Soon" photo for listings without any (primary) images?
When checked, will display an “Image Coming Soon” picture in the thumbnail position for a list view. Improves layout by keeping the listing consistently positioned across the page by maintaining a consistent text/image position for each listing. You can choose to show this image in the search results (excerpt view), in the full listing view (detail view), neither, or both.
You also have the ability to add a custom "Image Coming Soon" picture in the image thumbnail position.
Featured Badge Image
Use this option to upload a replacement for the default Featured Listings badge included with BD. If no image is added, a ribbon will be used instead.
Please note: Your image should mirror the dimensions of this image exactly in order to make sure that the templates will render appropriately (100 px by 102 px with a clear background). If you choose a different size for your image or a different background, your listing layout/look may be affected. This can usually be fixed with custom CSS.
Featured Badge URL
If you have a replacement badge online, you can link to it here instead of uploading it.
Display featured (sticky) badge on listing
Choose to show the badge in the search results, in the full listing view, neither or both.
Image Size Recommendations
There are many ways to improve the speed of your site and a big contributor to site speed issues is images. Although there are many techniques out there to accomplish this, some ideas for image optimization techniques would be:
- use a file with the resolution needed for the page.
- use separate files, one standard resolution, and one @2x.jpg to cover standard and HD screens (doesn't apply to the directory, but to your site in general).
- use the file format that makes sense for the image (jpg in most cases, png if you need transparent backgrounds)
- use an image optimizer to compress the file and reduce file size. Many use Image Optim for Mac. Most WP users use the SmushIt plugin but there are others out there.
A best practice is to reduce the primary image sizes before uploading them, then that will improve things. This is a best practice for all website building -- control the image sizes from the start.
Resizing Images with New Settings
If you make changes to your image settings, in order to make sure that all of your existing listings are formatted with any new image settings, you will need to install and run a plugin called reGenerate Thumbnails Advanced. Once installed, you will then go to Tools > Regenerate Thumbnails and run the plugin to make sure that all of your listings have the new thumbnail settings.
