slscart logo

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.

*  For each blog entry, upload a gallery image and enter the image's alt text.

* Decide on how many gallery images you want on a page (the more there are, the slower it will load) and set this.

* Decide whether you want individual page numbers to be displayed in gallery navigation and set this.

* 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.

* Enable the blog gallery.

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. I plan on separating them soon.

The 6 settings affecting the number of blog gallery images across are in the Catalog Setup.

upload height - this is the height of a thumbnail that is auto created. If upload height is blank then 200 is used.

upload width - this is the width of a thumbnail that is auto created. If upload width is blank then 200 is used.

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

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 dimensions.

***