on this page it says you can set the width and height of each slide:
http://jquery.malsup.com/cycle2/demo/carousel.php
carousel-slide-dimension = The width (horz carousel) or height (vert carousel) of each slide. If this option is not set the value will be inferred from the first slide's dimensions.
but how do I exactly add it to the code? It's not clear:
<div class="slideshow"
data-cycle-fx=carousel
data-cycle-timeout=1000
>
<img src="http://malsup.github.com/images/beach1.jpg">
<img src="http://malsup.github.com/images/beach2.jpg">
...
<img src="http://malsup.github.com/images/beach9.jpg">
</div>
All the attributes with cycle2 are preceded by "data-cycle-" so for carousel-slide-dimension, you simply add that like so:
data-cycle-carousel-slide-dimension=300
in your slideshow div (and whatever dimension).
Hope this helps!
Related
I control the size of my image in a page by CSS imgType.
<img class="imgType" style="..." src="/image1.jpg" alt="..." />
If I edit the image to change its name only (the fields width & height stay empty and save the content of the editor, tiny writes a value for both the width and height.
<img class="imgType" style="..." src="/image2.jpg" alt="..." width="249" height="145" />
I tried to use object_resizing : false, but it does not do anything.
How can I stop tiny to write these values?
You can remove the image dimensions from the Insert/Edit Image dialog with:
image_dimensions: false
Docs:
https://www.tiny.cloud/docs/tinymce/6/image/#image_dimensions
why pagespeed keep saying Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
my css
#header img{
max-height:27px;
max-width:300px;
vertical-align:middle;}
my website url
To remove this warning, you need to write it in the img tag, for example :
<img src="image.jpg" alt="your title" width="500" height="250">
I am using Ruby+Watir+Cucumber+Watir+CeezyPO+.... and in one test I have the next div element:
<div class="slider-importe ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 50.3384%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 50.3384%;"></span></div>
Which is just an amount slider.
In my test I would like to click at any position of the slider and check the amount result that appears in the field text.
I have defined the Page Object for the div:
div(:slider_amount, :xpath => '//*[#id="simulatorParent"]/div[1]/div[1]/div[1]')
And later I can use it in the corresponding step:
page.slider_amount_element.click
Reference about cheezy Page Object: https://www.rubydoc.info/github/cheezy/page-object/PageObject/Accessors#div-instance_method
Using it in that way I can click in the middle of the slider, and this is ok. But, how is possible to click at any position of the slider?
You will need to use Selenium's ActionBuilder - particularily the #move_to method. Unfortunately Watir, and therefore Page-Object, have not yet built a wrapper around actions (feature request #829).
The needed code is:
xoffset = 50 # how far right from the top-left corner
yoffset = 100 # how far down from the top-left corner
page.browser.driver.action.move_to(page.slider_amount_element.element.wd, xoffset, yoffset).click.perform
Where page is your PageObject.
I have an image Slider with different images. Some of the images has the size ratio of 600x400px, others 400x600px.
But the gallery has the width of 570px and height of 350px.
I want to resize the pictures. They should go in the 570x350px size, without distortions.
I tried this:
<cfimage
action = "read"
source = "#getPfad.Wert##getBild.Dateiname#"
name = "bild_gross"
>
<cfset ImageSetAntialiasing(bild_gross)>
<cfset ImageScaleToFit(bild_gross,570,350)>
<cfimage
action="writetobrowser"
source="#bild_gross#"
>
But the image size won't change! The images are cut off.
Edit: The code works, if I try it without the gallery.
<div id="bilder">
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:706px;padding-left:0px; padding-right:146px;margin:0px auto 0px;">
<div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
<ul class="amazingslider-slides" style="display:none; ">
<cfloop query="getBild">
<li>
<a href="#getPfad.Wert##getBild.Dateiname#" class="html5lightbox">
<cfimage
action = "read"
source = "#getPfad.Wert##getBild.Dateiname#"
name = "bild_gross"
>
<cfset ImageSetAntialiasing(bild_gross)>
<cfset ImageScaleToFit(bild_gross,570,350)>
<cfimage
action="writetobrowser"
source="#bild_gross#"
>
</a>
</li>
</cfloop>
</ul> ...
Does anyone know, what I can do?
How about using CSS? object-fit enables you to crop an inline image by specifying how it squishes and stretches inside its box. Using cover will enable the image to fill the height and width of its box while maintaining the aspect ratio but auto-crop the image if needed. (I'm not sure whether IE fully supports this yet or not, but there's a hack in the link below.)
<img src="/myimage.jpg" style="object-fit:cover;" width="570" height="350">
More info at https://css-tricks.com/almanac/properties/o/object-fit/
I suggest don't do image processing in your display/view. ImageScaleToFit function will resize the image and will use server resources each time users visit.
Have a separate function to process and resize those images. Then use the <img> tag to display those images. Using the img html tag will give you more options in controlling your display.
I've got an SVG that is being drawn inside of a div that has css of display:none. I need to center some of the rendered text elements, and to do this, I need the height and width. Unfortunately, when the containing html element is set to display:none, I always get 0 for height, and width. getBBox(), clientWidth, getComputedTextLength() methods all return zero. My question is: how can text width be calculated under these conditions?
e.g.
<div style='display:none;'>
<svg><g><text>some text</text></g></svg>
</div>
Have you tried setting the <div> to visibility: hidden;?
You may also want to make it position: absolute; so it doesn't affect the layout of other items on the page.