I'm using Ckeditor and Responsive filemanager. I want that uploaded images were responsive. But when I upload an image, and see it on the article page, it isn't responsive. Even the image goes beyond div. How can I make it responsive?
I find the solution. When adding image to ckeditor just need in ckeditor property window. Instead of pixels use percent.
Screenshot
Related
I have a question about wordpress slider plugin Cyclone2.
Problem is that when I upload and add an image to slider, it outputs incorrect src url for img tag on site page, like adding slider width and height to image url..
Ex. I upload image Champagne-All-Bottles.jpg.
In admin panel image loads successfuly: /wp-content/uploads/2015/12/Champagne-All-Bottles.jpg
but on site page it adds a width and height to img url like: /wp-content/uploads/2015/12/Champagne-All-Bottles-1200x400.jpg
HTML admin panel(correct):
HTML output on site page(incorrect url):
This plugin probaly makes an 1200*400 picture copy of the one you are giving because somewhere in the settings you say that the slider should be 1200*400 pixels. So the plugin is transforming your picture to the dimensions of the slider. Is there somewhere in the settings of the plugin something where you can adjust the dimensions?
A lot of WordPress plugins do this, and even WordPress itself is doing this. Making different dimension copies of images you upload.
EDIT: I searched the plugin you are talking about and in I think in basic settings the "width" and "height" are there so you can change the dimensions. But one thing, all images uploaded will get the same dimensions, thats how this (and a lot of other) WordPress plugin works.
Note: if you set "Width Management" to fixed, the plugin probably stops resizing your image, can you give it a try?
-Resize Images?
-No, shut up!
#TotalCare, thank you for your help :)
I have created a website which talks about football. In my database I have a table named description, which stores texts and images. I upload texts and images using CKEditor and give the 'img-responsive' style to images. When I retrieve them from the database, texts are responsive as I resize the screen, but images are not responsive. The width of the image resizes with the screen but the height is not resized at all.
How can I make images responsive for both width and height?
This is how I retrieve texts and image from database:
echo "$row['description']";
Thanks very much for any help.
Providing some code to your question would help a lot. This is a CSS side problem, Taking a blind guess I think giving a height:auto; to the image will do.
I have a an issue when sharing an article to Facebook. Facebook pick a random thumbnail from my images. The issue is Facebook wants a 200px X 200px thumbnail and my feature image size happens to be 150x150. The layout of the site is designed to fit 150x150 so I do not want to make the image any bigger. As a test I have tried 200x200 and fb pulls the correct image.
However when I add a 200x200 image in the post facebook grabs the correct image. I don't mind adding the image to the post as I can do text wrap around and everything looks ok on the desktop site. However on the 'WPTouch pro' mobile theme I am stuck with a big image on the post.
Can I hide the image from the mobile page or both ??
Any work around solution are welcomed...
you can add below code
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|tre
//hide image
Go ahead and give the image a class then hide it set the display to none through css.
For example: <img src="http://img.jpg" class="hide"/>
Then in your css
.hide{
display: none;
}
If you want to only hide it when your in wp-touch then you have to see if wp-touch attaches a specific class to the body which I quite sure it does. If you find that out you can attach the class to .hide and then it will only hide the image on wp-touch.
I am using a jQuery plugin http://odyniec.net/projects/imgareaselect/ that allows cropping of an image.
I have search high and low for a tutorial that allows me to over write the file on the server with the cropped version...but found nothing of use.
I am using the basic integration of the plugin inside Facebox. This is working fine.
I have a button on the page which says 'Save', when that is clicked I would like to store the new image (cropped) on the server.
Any suggestions or need further information?
Check out this awesome tutorial
I use Jcrop for my projects works great!
http://deepliquid.com/content/Jcrop.html
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop <--
Have you taken a look at the links at the very bottom of the plugin page? There are some useful links including this one. It should help you get started with the php side of things
Turned out the that image I was uploading was bigger than the area size of the cropping tool.
Image was 1024x768 however I resized the image to fit within 500x500 overlay.
I will need to resize and save new sized image during the upload.
Thanks for all your suggestions.
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.