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.
Image Settings Sub Tab
These settings control the way your images appear in listings within the directory.
Image Settings
The settings you can control here are:
Allow images?: If checked, users are allowed to upload images to their listings, based upon either their fee plan restrictions (paid sites), or the restriction set for Number of free images below (free sites). 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 BD to store 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 BD to store for upload. Images larger than this size are automatically sized downward to this size to save on space.
Min image width: The narrowest 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.
Max image width: The 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 image height: The shortest 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.
Max image height: The 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.
Thumbnails
The settings you can control here are:
Thumbnail width: The width of the thumbnail used in the list view and gallery view of a listing. The height is computed automatically, maintaining the aspect ratio (width:height).
Thumbnail height: The height of the thumbnail used in the list view and gallery view of 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 (150×150), 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 1000×500 (a 2:1 aspect ratio), the thumbnail would be created at 150×75 if this setting is NOT checked.
Listings
The settings you can control here are:
Enforce image upload on submit/edit?: Choose to require an image to be added to a listing.
Number of free images: The number of images allowed to be uploaded to a listing when no payments are accepted. This setting does NOT have any effect if you have Paid mode enabled on the Payment tab! Make sure that you configure your FEE PLANS and their images instead.
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.
As of 5.1, you now also have the ability to add a custom “Image Coming Soon” picture in the image thumbnail position:
Default thumbnail image size: This indicates the size of the 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.
Show Thumbnail on main listings page?: When checked, display the thumbnail on the main directory list view.
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. 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.