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.
Related
For my website we use custom style sheets that are stored locally on our server and are injected into the webpages. However when i add them to CKEditor and then attempt to resize or move an image with the enhanced image plugin they cannot be resized or moved at all. Has anyone encountered this problem before? Is there anyway around it?
edit: So i add my css files using
config.contentsCss = ['http://fonts.googleapis.com/css?family=Droid+Sans',
'http://fonts.googleapis.com/css?family=Bree+Serif',
'http://fonts.googleapis.com/css?family=Droid+Sans+Mono',
'http://192.168.0.50/css/new/all.css?v=1" media="all',
'http://192.168.0.50/css/new/templates.css?v=1',
'http://192.168.0.50/css/pre_review/colors.css?v=1',
'http://192.168.0.50/css/pre_review/paged_test.css?v=2',
'http://192.168.0.50/css/pre_review/bootstrap.min.css?v=1',
'http://192.168.0.50/css/pre_review/main.css?v=1',
'text/css'];
I have also installed the Enhanced Image plugin to allow me to resize and move images around. however when i insert an image on to the page the source looks like
<p><img alt="" height="239" src="http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png" width="239" /></p>
when i originally set the image width and height in the popup panel i set the values to 2 and 2, these values do nothing to edit the actual size of the image. It still displays at the full size of 239x 239.
I know that it is my added styles that are causing this error as it works fine without them, However i do need them. is there anyway around this without having to remove the styles?
First of all, your contentsCss has some weird parts like the last item or this 'http://192.168.0.50/css/new/all.css?v=1" media="all'. Please verify that all this works. Incorrect rules may affect CKEditor.
Second, the issue may be very simple - your CSS most likely affect widgets styling. Disable loading your CSS files one by one and see which one breaks the Enhanced Image plugin. Then find the rule that breaks it and then improve the rule so it does not affect images.
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.
What would be the most effectient way to hide a background image if the url has node in it it?
I have set a background image that runs through the site however I dont want the background image to show if the url has node in it. For example,
http://example.com/node
http://example.com/node/add.
The site uses drupal and my css is entry level to be polite!
Thanks
I know in pure CSS there isn't a way to do what you are trying. However, I am pretty sure that Drupal would find a way to prove me wrong. :-)
The best way to do this would be to create a new stylesheet or style for the pages that have node in the URL and override the default background. You can do that by using the following code:
background-image: none;
But remember that this should be called after the common stylesheet that is on all the pages otherwise you will see the background image on the node pages as well.
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/
I have a weird problem with images in visual web developer,
I cant change my images properties from properties panel (my changes don't take effect) and all images in my website have gotten the same size
when I resize one image (by dragging the border), all images get that new size?
any idea?
Somehow visual web developer read the image class in the CSS file instead of the properties of the control because there is something like this in my CSS file:
img {
width:260px;
}
Yes, basically the width and height properties of the HTML <img /> have been deprecated for some time, you are recommended to use styles instead.
VS then takes this to the extreme, and instead of using inline styles, will create a new style in the default style sheet location for img, as you've discovered.
However, unless you are using the image full size somewhere you are better off resizing the image before you upload it to the server, saving on everyones bandwidth.
Also, IE does pretty poor things with it's default scaling routine, but you can turn on cubic sampling through css.