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.
Related
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).
I am using PrimeFaces 7.0 on WildFly 16, JSF 2.3. (I also tried with PrimeFaces 6.2- but nothing changed).
I am using p:galleria tag as follows:
<p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
<p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>
The above functionality works as expected, however the picture currenlty chosen does not fade at the bottom, where the rest of the images of the gallery are shown- see here:
What can be the reason, how can I solve it?
My minimal, working example seems to have something to do with the size of the images I use (at least, it seems to be like this.) :
https://github.com/alexmivonwien/pf.gall.git
After comparing the generated HTML and CSS in my case and in the case of the primeface galleria showcase I found the following difference:
1.) My own generated HTML and CSS:
note that the first "li" child under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the CSS style (there is no display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px;">
2.) The HTML and CSS on the primefaces showcase:
Note that the first "li" element under the "ul" element
<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">
has the css style (there is a display:none here):
<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">
The only way this can be reproduced in the PrimeFaces showcase is by assigning an explicit height to the images. E.g. adding a css rule via a browser developer tool like img {height: 364px} makes this happen. This makes the big image btw not fully show what is in the thumbnail, it is cut-off at the right. And this can be seen in your screen dump as well. In the thumbnail there is way more visible of the sink on the right than in the big image. So this is with 100% certainty caused by some css that resizes the image or with a wrong aspect of the image compared to ttge dimensions put om the p:galeria
The actual technical cause of this is however not visible in the code in your question. Next time, always create a [mcve], by reducing more and more and more until you are either left with a very small piece of (complete, verifyable, executable) code that demonstrates the problem, OR you found the solution...
Effectively this problem is all plain css html related and nothing PrimeFaces specific.
I can't get the icon to show up and I don't know what I'm doing wrong.
SASS:
p.wp-caption-text::before
font-family: "Font Awesome 5 Free"
font-weight: 900
content: "\f030"
I've tried Font Awesome Regular/ Solid as well as different font-weights or different icons.
This is a camera icon, that is part of the Free icons.
The kit JS file (Created 3 days ago) is loading, as is the min.css
This is confirmed because icons that are in the HTML as
<i class="fab fa-instagram fa-lg"></i>
are showing up fine.
Edit: Confirmed bug which no doubt will be fixed soon, AND
you need to add data-search-pseudo-elements for pseudo-elements to work
<script data-search-pseudo-elements defer src="https://kit.fontawesome.com/xxxxxxxxxxx.js"></script>
This is data from jsf-ibm.jar (MANIFEST.MF file), in order to provide info
about the version of jsf which is being used by the application I am currently working on:
Manifest-Version: 1.0
Ant-Version: Apache Ant 1.8.2
Created-By: IBM Corporation
Specification-Title: Java Server Faces
Implementation-Title: JSF Widget Library (JWL) - Base
Implementation-Version: JWL v3_1_13
Implementation-Vendor: IBM
Build-Version: 20120307.2306
Build-Date: March 7 2012
Copyright-Info: Copyright (c) 2003,2008, International Business Machin
es Corporation. All Rights Reserved.
I am stuck with chasing and resolving this strange apps behaviour whihch happens only in IE.
There is link and when it is clicked the dialog box should open (form with some data that can be edited and saved, etc.). But when the link is clicked, then the dialog opens, but all over the app is something which I call "white cloud". The entire app and the dialog is blured and nothing can be clicked. Then, I click browsers (IE) refresh button, which closes dialog and returns the page with list of data where the link is.
I have tried to use IE developer tools and find out that when the element with id HX_DLG_SCRATCH_0 is removed then this white cloud disappears, dialog can be e.g. closed, but the background of the app remains ("normal behaviour" in e.g. Firefox would be non blocked dialog, but the background of the app is gray, there are no app elements which are behind the dialog). This element is generated by ibm-jsf.
This is the element from IE DOM explorer:
<BODY bodyUnloadEventNum="1" marginwidth="0" marginheight="0" hasbox="2" boxItem=" [object]"><DIV id=HX_DLG_SCRATCH_0 style="FONT-SIZE: 1px; BORDER-TOP: 0px; HEIGHT: 1166px; BORDER-RIGHT: 0px; WIDTH: 1676px; BORDER-BOTTOM: 0px; POSITION: absolute; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; LEFT: 0px; FILTER: progid:DXImageTransform.Microsoft.Alpha(enabled=false); MARGIN: 0px; BORDER-LEFT: 0px; Z-INDEX: 10001; TOP: 0px; PADDING-RIGHT: 0px; BACKGROUND-COLOR: #e2e2e2" name="HX_DLG_SCRATCH_0" hasbox="2" boxItem="[object]"></DIV></BODY>
</html>
This is a part of jsp code of the page where the link is:
<h:outputLink id="link1" rendered="#{not empty book.bookType}">
<h:outputText id="text1" value="#{msg[book.bookType.tag]}"
styleClass="outputText">
</h:outputText>
<hx:behavior event="onclick" behaviorAction="get;show;stop" id="behaviour1"
targetAction="subview1:panelForm2:editBookDialog;subview1:panelForm2:editBookActionDialog"
onActionFunction="setvalue('subview1:panelForm2:newItem', 'edit'); setvalue('subview1:panelForm2:itemId', '#{book.bookId}');"></hx:behavior>
</h:outputLink>
And this is a part of jsp code of the editBookActionDialog.jsp dialog which uses ajax.
<hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
target="subview1:panelForm2:editBookActionDialog"
params="itemId;newItem"
onstart="showProgressBar();" oncomplete="hideProgressBar();">
</hx:ajaxRefreshRequest>
I can't track down why this would happen only in IE, in Firefox it works fine.
Please, any kind of guidance or information about it would be very much appreciated.
Thank you very much in advance,
mismas
[EDIT]
Just a thought that occured to me now.
Maybe this "white cloud" shoud be that gray backgroud, but in IE something gets mixed up with css ...
It seems to me that it could be the right clue, since there is no javascript errors or any kind of other errors ...
Correct me if you think I am missing something ... thnx!
[EDIT2 - IMPORTANT]
I nailed down the cause of it!
It is a css problem.
position: absolute of this lousy HX_DLG_SCRATCH_0 element is causing the issue.
Can you please advise how to override this ibm-jsf generated position:absolute into position:relative?
Also, I would like to add this "hack" only for IE. I know it isn't nice, but it is obviously in the spirit of the whole application :)
Tnx!
Rant:
Sorry I accused ibm-jsf to soon, it was a user (developer who wrote the code) problem.
Nevertheless, whilst digging for solution, I had a chance to dig deeper into jsf and there is only one thing I can say about it: It is awful and I hate its guts.
End of rant :D
The real problem was in the javascript, Mozilla Firefox rendered the page a little less painfully, but IE crached (blocked everything).
So, I had jsp page that had a checkbox which is rendered only under some conditions, but in some hx tag there was custum javascript function call placed (right before openDialog() function) which run some validation on that particular checkbox.
Since, in this case, the checkbox didn't physically existed in the generated HTML, and this javascript function was called, it was causing strange/bad app behaviour, difficult to track down.
So the solution was to add a condition test (the same one as for the checkbox rendering) to call javascript function and openDialog(), if the checkbox should be renderd, otherwise call just openDialog().
That's it, hope it will maybe, somehow, help someone with the same "white cloud" problem ... (I doubt it, but nevertheless here it is :)
P.S.
It was strange that IE developer tools didn't complain about any javascript error ...
I am not sure why is that so ... (if anyone has a clue, I'll be glad to here it ... :)
Best regards,
mismas
I'am actually working on a responsive design and i'm quite stuck:
I need to set image-type children position to absolute in their div parent, and keep the lower section under this parent. But actually, the only solution i have is to set a fixed height for this parent (in that case, a relative margin for the lower section wouldn't work in a dynamic structure). The problem is that the images, set to max-width: 100%; to keep their dimensions flexible, expand with the page, and the lower section is no more well positioned on resize:
<div id='page'>
<div id='b0'><img /><img /></div>
<section id='s0'><h2>section title</h2><p>hjkhjkhjk</p></section>
</div>
And the CSS:
#page{max-width:1024px; margin: 0 auto;}
#b0{position: relative; height:25%;}/* doesn't work, 100px instead work but responsive design fails */
#b0 img{position: absolute;}
Does anyone have a solution for that ?
Thank's in advance
Simplier solution :
Consists in setting each image to position: absolute; except the last one :
#b0 img:last-child{position: relative;
keeping an element in the "flood" provides its parent the needed height value.
Ok, I now have a very simple mixed solution using Both CSS and Javascript:
As the primary need is "mobile first" design, i've introduced un min-height for the images container in a smartphoine targeted media query css file:
In the head tag:
<link rel='stylesheet' media='screen and (min-width:320px)' type='text/css' href='css/css.css' />
Then the CSS:
#b0{position: relative; min-height:82px;}
And a little bit of Javascript:
$(document).ready(function(){window.onresize=function(){$('#b0').css({'height' :( this.innerWidth * .25)+'px'})}});
So this mixed solution needs Javascript activated, a min-height to be set up for each media query step, and a percentage for the container height calculated with global and maximum page dimensions: in my case:
#page{max-width: 1024px;}
and a container height at about 280px;
Hope this can help someone someday ;-)