Essential Grid image preview

Hello so I’m trying to add a alt . pic to my default picture. And I did that but as u can see when I press the preview button:

  1. the picture is all blurry
  2. its a big photo so I want my visitor to have the option to scroll down when they see the picture.

Is there any chance you know how to fix this problem?

When I make it smaller it fits and you can see the whole picture, but I want the preview to be fullscreen so you can scroll down on it instead for zooming in on the picture.

Hello @anlander,

Thanks for asking. :slight_smile:

Zoom in and out feature of lightbox enables you to view the content of image effectively. An option that you have is to select Original Size under Source > Source Size > Desktop Image Source Type. Here is a recorded screencast.

However, what you are looking for is to remove the zoom in and out feature and let the image load in full screen thereby allowing users to scroll inorder to view the content of image. Unfortunately that will require custom development which falls outside the scope of support we can offer as you are trying to fit a large image into limited screen size. However, I can take this as a feature request and will submit into issue tracker for our developers to take a look.

Thanks for understanding.

Hello so i understand what you mean, but what i mean is, if i use it as orginal size and use a pic with etc 4000px height the pic will be very samll. What i want is a full screen on that picture and a scroll down

Hello There,

Regretfully the Essential Grid will display the image in fullscreen but you cannot scroll it. It will just simply load the whole image. It may not look good most of the time if your image is quite long enough. You may need to use other alternative solution. You can use by manually creating a page using Cornerstone adding a section, rows and columns. You may use the Content Area modal element and insert your image in it. When someone click on the content area modal toggle, the lightbox should popup with your image in it and in this time, you maybe able to scroll it. If we can login to your site, we might be able to give you an example of how it will be set up.

Please let us know how it goes.

Hi There,

Please add this to Theme Options > CSS

.page-id-408 .esgbox-slide--image {
	overflow: scroll !important;
.page-id-408 .esgbox-image {
	height: auto !important;

Note that this will only work on this specific page only, if you need this to work on other pages, you need to change the .page-id-408 selector on the given code.

How To Locate Post IDs


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.