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
Related
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.
how would I add a small caption under this image while keeping the text to the right?
<img src=".jpg" alt="lorum ipsum" width="350" height="240" class="alignleft size-medium wp-image-159" >
Many thanks.
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!
I am trying to resize image in product view page, but after the image has resized, white spaces come along in left and right both the sides (width), in resize function I gave the value 338,474, but It comes with white spaces. For that I applied function keepFrame(false).
But after applying that, my image height remains same, but width changes to 271. What should I do? Below is my code.
<img src="<?php echo $this->helper('catalog/image')->init($product, 'image')->keepFrame(false)->resize(338,474);?>" alt='' title="<?php echo $this->htmlEscape($this->getImageLabel());?>" />
I tried keepFrame(false) both before and after resize(338,474).
Please, if any body can help me.
Simply pass your height and width in following function resize
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(338, 474).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
Try to do the following steps, (let's say you want 150 width):
Go and open default/template/catalog/product/view/media.phtml.
Now On line 54 find the delete the ‘width’ and ‘height’ attributes in the tag.
On the same line (54), find.
$_image->getFile()->resize(150, 150);
All good. Simply replace one of these numbers with 0 and the image will auto scale. e.g.:
$_image->getFile()->resize(150, 0);
It will give you images 150 pixels wide, but the height will vary according to the original image ratio.
Hope that helps.
In mvc3 Products have more images and there is standard box size that all images seems in that in view.
Users enter images in different sizes: 200x800, 2200x500 ..etc. But I must show all images in standard box in 150x120 sizes. Most images stretchs horizontal or vertical in 150x120 size box and seems very bad.
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", #item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" width="150" height="120" alt="" />
How can I do all images get small, but to keep proportion ?
one way to keep propotions is to set the width value in css, but then the image will have the width and the height is unknown depending och the startimage. This will be the simplest way to fix the streched images. But you will not know the height as mentioned.
And ofc you must load the big image (big transfer size), so this may not be a propriate solution.
razor code
<img src="#Url.Content( Path.Combine( "~/Uploads/Products/", item.Date.Value.ToShortDateString(), #item.ImagePath1 ) )" alt="" />
css code
.parentDiv img{
width: 150px;
}
You got good question. However one way to do this is to ask user to upload in some proportion using javascript.
E.g your input control should be like
<input id="ImageFile" name="ImageFile" type="file" onchange="check_filesize(this.value,'upload');" />
And in javascript your can check file size and etc.
Another is to make use of ImageResizeClass and in your Upload Control you can resize the file to match your expectation size to shown in div.
So your upload controller would be something like following...
public ActionResult Upload(Image image, HttpPostedFileBase ImageFile)
{
ResizeImageHelper resizeImageHelper = new ResizeImageHelper();
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + ImageFile.FileName, 640, 480, false);
resizeImageHelper.ResizeImage(path + ImageFile.FileName, path + "thumb" + ImageFile.FileName, 74, 74, false);
image.imageLocation = ImageFile.FileName;
image.imageThumb = "thumb" + ImageFile.FileName;
imageRepository.Add(image);
imageRepository.Save();
}
This way you can make sure to show the image perfectly.
Hope you understand and this helps.