Description
This filter allows you to change the thumbnail size in the store listing.
The thumbnail is the featured image of the store. The default size is 45 by 45 pixels.
Usage
This example sets the width and height of the store thumbnail to 100 pixels:
| add_filter( 'wpsl_thumb_size', 'custom_thumb_size' ); | |
| function custom_thumb_size() { | |
| $size = array( 100, 100 ); | |
| return $size; | |
| } |
You can also define the used image format by using ‘full’, ‘large’, ‘medium’ and ‘thumbnail’ like this.
| add_filter( 'wpsl_thumb_size', 'custom_thumb_size' ); | |
| function custom_thumb_size() { | |
| $size = 'medium'; | |
| return $size; | |
| } |
You can check the maximum dimensions for the different formats on the Settings > Media page. When you use a format, the thumbnail shows at the dimensions of that format.
array( 120, 60 ), the thumbnail shows 60 pixels wide and 120 pixels high. To avoid this, use a square size or an image format, or set the size with the CSS below.| /* Set the thumbnail width and height. Use the same values as in the wpsl_thumb_size filter. */ | |
| #wpsl-wrap #wpsl-stores .wpsl-store-thumb { | |
| width: 120px !important; | |
| height: 60px !important; | |
| object-fit: cover; | |
| } |
If the changes you made don’t show up on the frontend and Load locations on page load is on, the locations shown on page load can come from a cache. Go to Store Locator > Settings > Tools and click Clear cache next to Autoload cache.
If the image dimensions you’re using result in a big empty space between the address and the other details, then the CSS code below will probably fix this. It places the thumbnail in the top corner of the listing, and keeps the text next to it clear. Change the 110px to the width of your thumbnail plus 10 pixels.
| /* Take the thumbnail out of the text flow, so a tall thumbnail doesn't push the other details down. */ | |
| #wpsl-wrap #wpsl-result-list li { | |
| position: relative; | |
| } | |
| #wpsl-wrap #wpsl-stores .wpsl-store-thumb { | |
| float: none; | |
| position: absolute; | |
| top: 10px; | |
| inset-inline-end: 10px; | |
| margin: 0; | |
| } | |
| /* Keep the text clear of the thumbnail. Use the thumbnail width + 10px. */ | |
| #wpsl-wrap #wpsl-result-list .wpsl-store-location { | |
| padding-inline-end: 110px; | |
| } |
Copy the above code and place it in a CSS file loaded by your theme.
If nothing changes, then make sure to clear the browser cache and the cache from any active caching plugins.
Changelog
| Version | Description |
|---|---|
| 3.0 | Moved to includes/frontend/store/class-data.php. The inline size CSS is added in includes/frontend/assets/class-manager.php. |
| 2.0 | Introduced. |
Source File
This filter is located in /includes/frontend/store/class-data.php.
Placement
The code needs to be placed in the functions.php file inside your active theme folder.