slscart Blog Gallery
Starting with version 10.7.0, the blog gallery banner feature was added to slscart.
The blog gallery is displayed as several rows of blog gallery images with the blog title underneath. Both are clickable and will take you to the blog entry. If the blog search bar is enabled, it will appear on top of the gallery images. If sign in required for commenting is enabled, the menu to login, create an account, logout will appear below the images.
Setup
All blog gallery settings are under Administration > Blog Settings under Blog Gallery heading.
* Enable blog gallery - set checkbox to enable the blog gallery.
* Blog page numbers - if checked then individual numbers will show up for each blog gallery page. The user can go directly to a blog gallery page by clicking on its number. If not checked then the user scrolls through the blog gallery by clicking on < or > next to the page 1 of 6 above the gallery.
* Gallery images per page - sets number of gallery images per page. Default is 12.
The individual blog gallery entry is under Site Extras > Blog. Click on Edit for the particular blog entry and look under Blog Gallery heading.
* For each blog entry, upload a gallery image and enter the image's alt text. If a gallery image is not present then the blog entry's title will appear.
* Decide whether comments should be allowed and set this.
* Decide whether the commenter needs to login to comment and set this.
* Decide whether you want the blog search bar and set this.
The blog home page will show up as a matrix of gallery images with the (clickable) blog entry title below each one.
Notes
Each blog entry should have a same size gallery image.
The blog gallery images are kept in the blog image directory which can be viewed under Web Site > Images. In the first dropdown, under Image List, select 'Blog Image Directory' and click Show Images button.
How images work
At this time, the image scaling will be the same as the catalog.
The four settings affecting the number of blog gallery images across are in the Catalog Setup.
Max Img Height (in pixels) - Enter the maximum pixel height at which your thumbnail images should display, or leave blank to use the actual height of the thumbnail
Max Img Width (in pixels) - Enter the maximum pixel width at which your thumbnail images should display, or leave blank to use the actual width of the thumbnail. If left blank,
Multi Height: Enter the pixel height of the multi column product entry, if desired. Default is 200 px. This is the minimum height of a product cell.
Multi Width: Enter the pixel width of the multi column product entry, if desired. Default is 200 px. This is the width of each product cell. If left blank, the width of the cell is Max Img Width + 10px margin. For example, if Max Img Width is 278px and Multi Width left blank, the width of the product cell would be 288px.
Example
Blog gallery Image is 450px x 300px. Settings are upload height (200), upload width (260), max img height (), max img width (260), multi height (), multi width (). The settings are in parenthesis.
The image display width is 260 (max img width). The image display height, since it's blank, will be proporptional.
The blog gallery image uploaded was 450 x 300 which will get scaled down to 260 x 173 (keeps the proportion correct). This is the displayed image width and height.
Since there are no settings on multi width, 5 px is added to each side of the displayed image width, giving us 270 as the minimum width of the box that holds the image and the text below it.
So, if the uploaded image's width > 260, the image will be scaled down to have a width of 260. If the uploaded image's width < 260, the image will be left alone and not scaled.
The minimum height of the box is multi height but it is blank so it is the maximum of max img width (260) OR default thumb width (200). In this case, 260 + 10px for padding making it 270px height.
The minimum width of the box is multi width. If blank then it is tha max of max img height OR default thumb height (200). In this case 210px. But since the
The min height of the holding box is multi height. Since there is no value, a default of 200 is used.
The display box that holds the displayed image and blog entry title is 270x270.
Conclusions
All uploaded images should be as close to the displayed image size as possible. This would make it not necessary for the browser to scale the image.
All uploaded images should have the same width, preferrably the same width and height.
***