I'm using Docusing php api to create and send documents to sign, but when I try to insert an image (I'm using HTML document) the document show's the signer only a white square with the text:
The linked image cannot be displayed. the file may have been moved, renamed, or deleted. Verify that the link points to the correct file and location.
Of course I check the image link several times, I changed the image to another server, try different formats, etc...
Any suggestions??
My HTML goes like:
return <<<HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
</head>
<body>
<img style="display: block; margin-left: auto; margin-right: auto;" src="/documents/logo.png" alt="" width="250" height="100" />
<p style="font-family: Garamond; text-align: center; font-size: 14pt; line-height: 0.1;"><strong>Document title</strong></p>
and then the rest of the document.
The only way to add an image to an htlm source doc used for DocuSign is to include it, inline, within the html. In the same way, any CSS must also be inline.
Use a dataurl with an img tag. It works fine.
If you want an embedded image I would suggest that it's inline in the HTML, or you can use PDF or Word or some other format that doesn't require the other file to be loaded.
the DocuSign system cannot load that file and in any case would "flatten" your HTML into a PDF anyway (unless you use responsive signing).
Related
i updated my website to new picture webp format instead of pngs.
It appears that google insights still is working on previous code, not considering the changes that have been done.
the project is here : https://www.marche-talensac.fr/
If you can see anything wrong, i thank you to have a word in here :)
Regards to you all ^^
The problem is that you are still serving the old image as well as the new image. You will see that your slider is adding the image as a background image via an inline style attribute.
<picture>
<source type="image/webp" srcset="https://www.marche-talensac.fr/css/home2.webp">
<source type="image/png" srcset="https://www.marche-talensac.fr/css/home2.png">
<img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");" class="homepng">
</picture>
If you remove whatever is causing that style to be added to your slide it should work as intended.
For clarity remove the code that injects style="width: 650px; height: 500px; background-image: url("https://www.marche-talensac.fr/css/home2.png");"
Also note that you have only updated the home page slider, all the other images are still served as .jpg files.
I have an SVG object link on my page:
<a href="#" target="_blank">
<object data="icons/email.svg" type="image/svg+xml" style="pointer-events: none;" class="icon">
gmail
</object>
</a>
I'm trying to change the fill color on hover using this code in my SVG file:
<style>
* {
pointer-events: fill;
}
#email:hover path {
fill:white;
}
</style>
The problem is that the hover effect only works when I remove the style="pointer-events: none;" from the HTML, but the link only works when that code is there.
Any help is appreciated. I checked similar topics and wasn't able to find an answer to this.
Links only work when the contents of an <object> tag is non-interactive hence they work if pointer-events="none" and not otherwise.
For your use case you probably need to make the link internal to the SVG file i.e. via an SVG <a> tag in the SVG file rather than using an HTML link in the HTML file.
I recently developed a website that looks good on 1024 resolution but gets messed up on larger resolutions. Here are the links to the files you will probably need to review: CSS for the site, CSS for the menu bar. It's a PHP file but I've already linked to the included HTML files.
I have a regular 17' screen while the client has a widescreen. She sees white space on the right side that I don't. I've only seen it as I have used the website viewlike.us to test on different resolutions. How can I make it so it resizes proportionality? Thanks.
This is because you set the body to be 1024 px
body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}
You don't want to do that, what you usually do is to have a page wrapper where you set the size to be 1024px.
For instance you can have this in html
<html>
<head>...</head>
<body>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then in the css you can have something like this:
#pageWrapper {
width:1024px;
margin: 0 auto;
}
You usually have an structure like this:
<html>
<head>...</head>
<body>
<div id="header-wrapper>
<div id="header>
<!-- header content here -->
</div>
</div>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then you can set an image for the header and another for the body, or an image for the header and a background color for the body. It all depends on what are you doing.
The background images usually are not that big. What you usually have are images or patterns that can be repeated either on X or Y or both. On the css you can have something like:
#headerWrapper {
width:100%;
height: 100px;
background: url("/img/background.png") repeat-x;
}
With this the image will repeat horizontally on the header. Then you can set another background for the body, or just a background color.
Again, it depends a lot on what are you trying to achive.
Good luck!!
In my Sharepoint masterpage I have added an <img> to the top of the <body> of the page so that I can use some CSS to set the <img> to fill the screen.
However I want a different image to be displayed depending on the theme in use. I currently use the following inside the masterpage:
<img alt="" id="fullscreen" src="/_layouts/images/Background.png" />
Is it possible to capture the name of the theme in use and append that to the file name so I can simple adjust file names to match there theme?
Or failing that can I add something to src=" " that will make the URL theme specific?
I think the idea is to reference the images from your theme CSS. So if an image changes between themes, the url to that image is stored in each of the theme CSS files.
You master page can then simply contain an element with always the same CSS class.
What about defaulting the images to hidden, and in the CSS for the theme you want it shown in, show it?
For example:
In your master page:
<img src="theme1.jpg" alt="" id="theme1fullscreen" style="display: hidden;" />
<img src="theme2.jpg" alt="" id="theme2fullscreen" style="display: hidden;" />
<img src="theme3.jpg" alt="" id="theme3fullscreen" style="display: hidden;" />
In the css for Theme X:
#themeXfullscreen {
display: block;
height: 100%;
width: 100%;
}
This way, you have the images and locations in the master page, and can hide and show the appropriate one based on the theme.
I have a JSF form that needs to upload a file via an icon click (i.e. without showing the textfield/browse button of the file upload component).
Is it possible to trigger the file-open dialog and uploading functionality of the upload component via some other component type?
No, the file upload dialog is meant to be pretty much unchangeable as a security feature.
I don't think there's any other "off the shelf" component you could use to trigger the file-open dialog (which, after all, results from a <input type=file> written by the renderer).
However, if you're willing to develop your own renderer, it could write both the <input> and your icon's <img> (one right after the other). Give the <input> a css class that uses absolute positioning to place it on top of the <img> and reduces it's opacity to 0 (you could also set the cursor to 'pointer').
Now, when the user clicks on the icon, they're also clicking on the invisible input, which pops up your dialog.
(Now that I think of it, I'm almost positive you can do this without writing your own renderer by just applying the same kind of css to off the shelf components...)
With HTML5, there is new way to styling the css with bootstrap for example and replace image by a glyphicon.
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
width:32px;
font-size:24pt;
height:12px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<form>
<span class="btn btn-default btn-file btn-lg">
<span class="glyphicon glyphicon-upload"> </span> <input type="file">
</span>
</form>
</body>
</html>