Problems with Image Show GK4

When we want to put some photographs in the Imasge Show GK4 module we are having some difficulties. Some pictures we want to upload have a resolution of 5312x2988. This picture shows well on the webpage. No problems at all.
But now I want to put a picture in slide 2 with a resolution of lets say 1024x683 the picture is being blowed up. If I make the resolution smaller the picture is still blown up. This happens to many pictures.
The resolution somehow doesn’t seem to make any difference.

does anyone know how to solve this or a workaround to fix this issue?

thanks in advanced.....

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi

By "blown up" I believe You meant that those images has cut sides. Image show automatically fits the image to occupy available place in height or width, whatever can be reached faster. Try add this code to override.css

Code: Select all

.gkIsWrapper-gk_photo .gkIsSlide {
    background-size: 100% auto;
}


this code will make images fit to screen width only, but for images which are not height enough to cover all available height will leave empty spaces.

Hi

Just saw Your message that it does not work, so I've checked Your site and You do not have override.css enabled. Please enable it in template's configuration "Advanced settings" section.

HI,

I have solved it in another way. like making a big picture with black colums on each side.
On my home page I want to put a gif file. Animated.
But I cant get it with my slides, since this will blow up also.

Now I have created a custom muddle in HTML and put the gif centered. this does works but blows it up also.
it there a way to create a table and put the image (GIF) in the table so I will stay at it size?
And how can I then make my background color black for the sides that the picture is not shown?

I have added a link to the image so maybe you can have a look at it and advise me what is the best thing to do.

thanks in advanced.

Hi

You need to explain to me what does "blow up" means. I do not understand what You are trying to achieve.

What I think You are trying to do is to make this image with "ashlove dreams" text cover screen entirely. That may not be possible without cutting some of this image or leaving black area on sides. Simply because there is a lot of different types of screens and dimensions. I think easiest would be to use custom html module, but this will not work without some extra script counting on the go what image site to use.

HI, thanks for your reply,
I was able to do it indeed with an custom HTML module.
that works but I have the following problem.
The background of the HTML page is white and I need it to be black.
I tried many different codes to make the background black for only that page.(which has been created with the custom html module)
I can't get it done. any html code is rejected and not adapted by the editor which is used for the gavick templates.
do you have a code for me which I can enter in my custom html code to get a black background?

I have tried the code below:
<div style="background-color: #dddddd;"> </div>
<p> <img src="images/LogoGif.gif" alt="Welcome @ Ashlove Dreams" width="1200" height="650" /></p>
<p>.imageBg #main-menu &gt; li &gt; a {    color: #Y0000; }</p>

hope you can help me out.

Regards.

Hi

Try add this to override.css

Code: Select all

.frontpage #gk-header .custom > div {
background-color: #fff !important;
}