So im building my first wordpress site at the moment. Most problems i come across i just do a google search, read, learn, fix.
But one continuous problem i keep getting is images and resizing them.
Im really lost as to how it works, its so simple, yet i cant seem to manage them at all.
Heres some of my issues:
I'm using customizr theme, it has a slider, featured images for posts-big and small (featured image and thumbnail).
I resize the picture to the recommended dimensions, but it never seems to actually resize the picture in the box. And that's for all of them, the slider, thumbnail and featured image.
I toy with the dimensions to try to learn whats happening, but it just doesn't make sense to me, the box just zooms further into the image, the image doesn't actually move or try to fit at all when the dimensions are changed.
They also share the same image for the featured image and thumbnail, even if i click 'thumbnail only' and change the dimensions, it effects all of the images.
The slider images are always cut off, even if i change to the recommended dimensions. I've given up with the slider after a week of resizing, trying new sliders, adding slider codes into .php, enough.
But now this issue with a simple featured image and thumbnail is the last straw. So here it is, my cry for help!
How can i get control of my images, resize effectively, so i dont get these issues every time i try to add images into various functions.
Any help is much appreciated, thanks.
Related
When uploading animated GIFs in the content area they don't animate after the page is published.
I tried turning off resizing but that didn't work. I also tested it with Silverstripe 4 but it's the same problem.
What can I do to keep animated GIFs as they are when users upload them within the content area?
Update: Regarding the possible duplicate - there was no solution to this problem, just a work around which didn't last long. What I need is for animated GIFs to be uploaded as they are and not meddled with by SilverStripe in any way so they continue to remain animated. This is not a CSS issue. It cannot be fixed with CSS. It is the way SilverStripe handles content that is the problem. The solution to the other question was to increase the insert width but I've done it to a high number already, going any higher seems to defeat the point of that feature, so all I want is for GIFs to be completely left alone by SilverStripe and whatever resizing feature it uses.
Additionally, there was a suggestion to make a separate upload field for GIFs, again this is not a solution. The GIFs are to be part of the article which the user creates; for example, if the article is a tutorial then the animated GIFs help the reader visually see what should be happening as they read
I have discovered a solution for this in SS4... It seems if you use the 'Replace File' option within the files section and re-upload the animated GIF that way it will not corrupt it in the same way that tiny-MCE upload does. It's a long-winded and problematic way to go about it, but at least you don't have to make any changes to your php/ss files.
I have portrait images with about 200x600 size. I would like to create a square version of it with 600x600 size.
Is it possible somehow?
Unfortunately the hard crop set the width first and I get only the center of the image.
add_image_size( 'square', 600, 600, true );
Required below. Upload portrait and get square version of it.
I recently found this plugin, https://wordpress.org/plugins/square-thumbnails which seems to do exactly what you need.
It will create a square thumbnail image and fit the original image inside the square.
I haven't tested it on a production site, so I can vouch for the plugin, but it's worth trying.
WordPress functions for image manipulation can't work like this, they can crop images, but they can't fill them up to be expanded.
Images can have different backgrounds, and automatically choosing colours for that is not easy to do. If the images are with background transparency, then, it is easier to do, but still, WordPress can't do that. I am not sure of any plugin for WordPress that can do this.
Best way to do this is to hire someone to code it for you, and again, it will work fine only if images don't have background.
I'm having trouble getting Revolution Slider (version 5.2.5.3) to work properly on my website and I'm looking for some help.
For reference the test page I'm using can be located here: http://www.capidale.co.uk/home-2
The problem I'm having is the background images on each slide are "zoomed" in. All images are 960x350 and I've set the grid settings also for 960x350. However, inspecting the code, the background images appear to being assigned values of 1653x549.
I've racked my brain but I just can't get it to work. I've tried using the images as "layers" and setting the background to transparent. But then I can't get the images to display at all.
Appreciate any help. Thank you.
i have looked at the code and it says the natural values for the
Best best is to resize the images so they are 960x350 this should fix the issue if the image is zoomed still on the styling of the image set max-width:960; and max-height:350;
to save you the trouble use this image and replace the existing img, if it works then this is due to the natural sizes of the image
:D
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
I'm working with the Header Image Slider plugin for WordPress (which uses the Nivo Slider) and I can't seem to get the images to the size I need on a smaller screen.
I've looked around plenty and tried various things in my media queries like setting the max-width, but I can't put my finger on what the problem is. Each image is cutting off on the right-hand side. I'd like to get the images to roughly 708x245 on the next step-down. Any advice? Thanks!
My Site