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.
Related
I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
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.
So im toying with the idea of displaying a larger (better quality image) when a user hovers over my thumbnails.
Not the fullsize version it links to upon click but still a size that shows a bit more detail providing it doesnt increase my page load time for my galleries a heap.
Even better would be if its possible to only have the images load on mouseover and not preloading when the page loads as that would hinder my speed efforts.
Would this be difficult to do?
You can do this easily with CSS, using background: transparant url('') no-repeat; at a hover action: http://jsfiddle.net/stidged/DqCcP/.
I'm not familiar enough with JS plugins to suggest any of those, but i'm sure they're out there!
My point was that, when you request a non-preloaded image you have a short instance where the low-res image is gone and the better one gets requested and loaded, making it blink once when it isn't cached yet. Sprites remedy that glitchy impression for icons with hover states. Admittedly not the end of the world, but it's less than ideal.
Oh, and in case you're interested in performance, you might want to check out Chrome's PageSpeed extension to see how your site is doing. It does image optimisation analysis too and if there is room for improvement, you can get the optimised images directly from the plugin. Also, reading up on image-formats and the best Photoshop quality settings could help you save some of those precious kilobytes without lowering UX.
Does that answer your question?
As a web developer, I have to cut a layout similar to this (example website by Ruben Bristian):
Should I bother with cutting multiple small images like a logo:
a label:
and so on? Or should I just make one big background image with all elements like this:
and make a positioned <a href> with display: block; for a linked logo?
A single image has smaller size than multiple elements altogether. What are the other pros and cons?
Use separate images.
Here are a few reasons why:
Maintenance:
It's going to be much easier to maintain in the future, if/when there comes a point when you want to build on what you already have. Furthermore (and subjectively), the background image is not critical to the design. It wouldn't look broken if parts of the background were clipped. It would look broken however, if the logo were distorted.
Bear in mind also that newer, sharper displays are being developed. It's much easier to display the standard resolution background (it's already blurry, so clarity is not essential), and maintain two versions of the logo. One for standard displays, one for HD.
Semantics: What if the user has images disabled? Sure, it's unlikely, but what about Google? You should have some proper markup with real content. Your site needs real textual content in order for Google's crawlers to gather information about it. Use CSS image-replacement techniques to build the interface.
Another note on HD displays:
It's convention to serve larger images to HD (retina) displays, and use CSS to downsize them, effectively increasing their dots-per-inch. If you use just one image, the user will have to download a considerably large image. More bandwidth used by you, and slower experience for your users.
Furthermore, the text will look horrible on HD displays. It makes much more sense to allow the browser to render razor-sharp text to the user.
Accessibility: For a start, screen readers won't have a clue what your site is about. That might not be so relevant in this case, but it's best practice to build and accessible website. If you want to include some smaller text on the site, some users may be unable to read it. Normally they would increase the font-size, but if you use images, they're powerless.
I may have over-dramatised this answer, but the advice is well-intentioned.
I would honestly try a little bit of a different approach. The "photo" part of the image would be one image, the logo another, and maybe the double bar on either side of the heading another (but might not be necessary.
I would use the photo part as a bg image on a div, and within code the rest.
I wouldn't make the text part of the image at all. Try using a service like Google Web Fonts to get a good font.
The approach will save you lots of maintenance time, and also help with performance.
PROS:
Total bytes loaded is lower.
You do not have to worry about how little images are put together to become the total image.
if you just use 1 image you will find that it will be much easier to maintain the fluidity of the layout. You will not have padding/alignment issues, rendering issues, etc. Realistically the load time should be the same either way, maybe a tad longer for multiple images as the browser would have to render more css, but i imagine it would not be very noticable. In the end it really comes down to what is better for the job. I pretty biased towards 1 clean image :)
I guess you have to think about how you are going to use each element individually, and how they are going to change in the future.
You might want to change the logo, animate it, or want to re-use it elsewhere. The background image might change, or become multiple images in some sort of transitional gallery.
If this its never going to change (unlikely), then, yes, flatten it in a single image.
I personally would have as a separate background image. Then perhaps have the logo and the label on another transparent png and utilise css sprites to re-use them throughout the site. This will halve the number of requests required to download the logo/label, and allow you to optimise each image separately ie the complex background photo, and the more simple logo/label.
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.