I'm making a module using Php for generating image transforms for background images from an uploaded image in a CMS.
First step is checking the extension to see if the image is even allowed to be used for a background image. However I couldn't find information about this online.
background: url('image.extension');
Does anyone know if there are any?
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 found out on a website an image which I like very much but when I inspected the source code with firebug i found out that it was not an image, but a div with the following CSS condition:
background-image: url("data:image/gif;base64,R0lGODlhJQAFAJECAMwAM7C2uP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3Lnc...");
Is there any way to find out the path to that image?
That IS the path (sort of). Just copy the "data:image/gif..... "-part and paste into your browser, and the browser will render it for you.
The image is embedded so if you want that image the better option is, directly save that image through that website.
I am working on a custom solution in SharePoint.
I have a requirement to display images from a shared network path because these images are also shared with multiple MS applications i.e Dynamics AX
I am setting background image for my div as: background-image:url(file://{server-name}/{shared-location}/filename.ext
It works in IE. But not in Chrome! How can I make it work in other browsers as well?
file://{server-name}/{shared-location}/filename.ext renders the image when put to chrome url bar. But the same line dont works when set as background image for a div
I could create a virtual path for it, but I fear i might not able to do that in production. Please suggest! Thank you
Try with:
background: url("file://{server-name}/{shared-location}/filename.ext");
Be sure that {server-name} and {shared-location} haven't spaces and if they include slashes use forward slashes.
like
img { background-color:color: color matched to the theme}
or
img { background-image:url (a very very tiny gif image with the text "image loading") }
I'm thinking in the benefit of this when user access site on slow connection then background color will give clue about something is there which is diffrent than text content..
It's certainly a good approach. I would however try to assign as much as possible the same background color to the background as the strongest color of the actual background image. This way the website will still be representative whenever the client has disabled all images (as some bandwidth-limited users do or some handhelds by default do) or when its browser doesn't support images. The Web Developer Toolbar is helpful in this, in the Images menu you can choose to hide images so that you can see how it would look like without (background) images. I however wouldn't put a loading gif in. You can however consider to save the image interlaced (supported on GIF and PNG).
Sure, if you want to. In most browsers a space in which an image will load is already indicated, but there's nothing stopping you from doing a background color too if you like. I typically see this on body tags or other block-level tags that have background images, but I suppose you could do it on an image itself too.
In all honesty, I don't think this will actually make a site more usable than one that lacks this "feature."
An image-heavy site will probably look awful with a 'loading' background image, but if your site is not full of pictures, go ahead.
A small loading image is a nice touch, such as those from http://www.ajaxload.info/
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.