Image and Video sizing on slider « Support Forum | Kriesi.at

Support Forum » Choices

Image and Video sizing on slider

10 posts from 4 voices

Started 9 months ago by jcmtp2
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

jcmtp2
Member

I am creating a slideshow with both images and links to youtube videos. The youtube video images that appear on the slideshow are fine and have a great size, but my images are getting cut off and are making the slideshow continually adjust sizes. Either of these two problems does not look good for what I need.

My images are 1920x1080 (as I am trying to give a great image in a lightbox) but they are getting cut off (mostly from the top and bottom). How do I get my images to fit completely (no cutoff) while also maintining the slideshow constant in size (with the youtube images)?

Also, how can I remove/modify the "Interesting Links" just above the footer?

Posted 9 months ago #
Ismael
Moderator
Hello,

Do you want to change how the lightbox crop your images? If that is the case you can open js > prettyPhoto > js > jquery.prettyPhoto then look for this code.

allow_resize:true,default_width:500,default_height:344

Setting the allow_resize to false will turn off the image cropping when viewed on lightbox. You can let it stay set as true and adjust the default width and height.

If you want to change the thumbnails for the slideshow, you can open functions.php and find this code.
```
$avia_config['imgSize']['fullsize'] 		 	= array('width'=>930, 'height'=>930, 'crop'=>false);		// big images for lightbox and portfolio single entries
$avia_config['imgSize']['featured'] 		 	= array('width'=>990, 'height'=>400 );						// images for fullsize pages and fullsize slider
```
They are responsible for the sizes of the images on the slideshow and lightbox.

Regards,
Ismael
Posted 9 months ago #
jcmtp2
Member

Thanks Ismael.
My main issue is about the actual size in the slider. The size and quality in the lightbox is a secondary issue.

These are my main issues. They are related:

1- My slider is having to adjust size every time the Youtube link/image appears, then as the next picture appears, it resizes and keeps steady through the other pics until the Youtube slide comes again.

2- The pics appearing in my slideshow were not appearing in full (lots of the top and bottom were shaved off). I was trying to use 1920x1080 size images so that if clicked on, the lightbox would show this large size and detail. I cut my pics down to 640x360 as this size seems to minimize what is cut out and shown in the slideshow. The problem is that the quality is not as good and the lightbox pics are small and don't show the detail.

How can I get a large and responsive size to all my images appearing in the slideshow that:
a) Don't readjust slide size when changing from Youtube/URL to pic.
b) Don't cut off large parts of the original image
c) Can use large image sizes so that detail is visible in lightbox

not in the lightbox

Posted 9 months ago #
Nick
Moderator
Hi,

Sorry for the delay.

1) There are six sliders in the theme, which one are you describing?
2) Please let us know specifics (width, height, page, position) that you want since terms such as 'larger' can lead to misunderstandings.
3) If you could show a url of what you are describing , it would greatly help us help you.

To remove or change the interesting links its easiest to open includes/admin/register-widget-area.php and on line 161 replace the line below
```
<h3 class='widgettitle'><?php _e('Interesting links','avia_framework');?></h3>
```
with
```
<h3 class='widgettitle'><?php _e(' ','avia_framework');?></h3>
```
Thanks,

NIck

Thanks,

Nick
Posted 9 months ago #
jcmtp2
Member

Thanks Nick.
Site is watersecurity.org

Also,
I increased the border top margin to make the box look better but there is a solid blue color there. How can I make that transparent so the background shows up there?
thanks.

Posted 9 months ago #
Nick
Moderator
Hi,

1.

For the exposed blue color, I think you didn't 'push down' the 'lowest' panel, so the sliding panel that's in the demo became exposed. If you could revert that edit, and instead place the code below into the Quick CSS in the Choices Theme Options > Styling in the backend:
```
#info_text_header{margin-top:3em;}
```
If you want to make the height smaller please change 3 to 2.9, and so on in the line of code above.

2.

Regarding the video size, the problem lies with the aspect ratio since some videos are not recorded in the same ratio as Youtube assumes.. Would you try using images in the slide show using the sizes 1920x1177 or 900x552. That should work if you keep to that ratio.

The tiny Youtube menu on the top right corner of the video shows that this isn't an error but Youtube deliberately resizing the video to make it conform to it's expected aspect ratio.

The only other non time consuming solution would be to move the video to Vimeo or self host it, which would immediately stop the auto re-sizing. I will make sure to drop a note to Kriesi as well as see if the rest of the support team came across this before.

But please let us know how the new image ratios I suggested above work out for you.

Thanks,

Nick
Posted 9 months ago #
jcmtp2
Member

Thanks Nick.
I will try the image sizes you recommend.

Also, is there a way of making the footer transparent so I can see the background. I want to give it a full floating "box" effect.
You had previously given me some code to grow the top margin. I was thinking of doing the same by using the footer.
If you also have the code for the bottom margin that would be great.
Thanks,

Posted 8 months ago #
Devin
Moderator
Hi jcmtp2,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#footer {
background-color: transparent;
}
```
Regards,

Devin
Posted 8 months ago #
jcmtp2
Member

Thanks Devin.

An issue with the lightbox came up. I have a page with links
http://www.watersecurity.org/r/infographics

I had to re-arrange the order of these infographics because the lightbox was coming up when items were clicked on. Instead of going to the site where these items are located, they lighbox would appear. The problem is that the source of some infographics are within pages and not the image itself, so as the viewer clicks the Next Arrow in lightbox, at some point it hits an error.

I am using lightbox elsewhere and so I don't want to shut it down, but I'd like it to either work here or for a new page to open up when a pic is clicked to see the infographic.

Posted 8 months ago #
Nick
Moderator

Hi,

That's a tough question, and I am ashamed to say I am stumped. I think prettyPhoto customization forum would be better equipped to take care of this. The got a few hundred experts there --> http://forums.no-margin-for-errors.com/

Thanks,

Nick

Posted 8 months ago #