Any advice on how / or where I can include the 'share this' script so I can include social sharing buttons at the bottom of my Orchard CMS blog posts. Ideally I would not use the gallery or any installer, simply just the classic implementation -- which I have done before, but I am not sure in which file I can add my script in Orchard's MVC architecture.
Use Shape Tracing, to identify the different templates that build up a Blog Post. Some of those templates are shared throughout the app, so learn also about Alternates.
Look at ~/Common/Views/Parts.Common.Metadata.cshtml
To override this view, you should copy it to your Themes Views folder, and modify as you wish.
If you wish to modify this template only for blog post, name your new file Parts.Common.Metadata-BlogPost.cshtml in the themes views folder. This is an Alternate and BlogPost tell Orchard to use this template only with content types that are BlogPosts.
I've been using a very simple HTML widget to do that on my own blog, since sharing is essentially a client-side thing, and it was by far the simplest option. Here's the HTML I use in that widget:
<p>
<img src="/media/foo/Icons/squaretwitter.svg" style="width: 20px; height: 20px;" alt="Tweet this" title="Tweet this" />
<img src="/media/foo/Icons/squarefacebook.svg" style="width: 20px; height: 20px;" alt="Share this on Facebook" title="Share this on Facebook" />
<img src="/media/foo/Icons/squaregoogleplus.svg" style="width: 20px; height: 20px;" alt="Share this on Google+" title="Share this on Google+" />
<img src="/media/foo/Icons/squarereddit.svg" style="width: 20px; height: 20px;" alt="Share this on Reddit" title="Share this on Reddit" />
</p>
Notice that I'm not using a sharing script, but am using static links instead, because I want to keep the page as lean and fast-loading as possible and I think those scripts are a significant burden for little benefit. You can however if you prefer put script into an HTML widget, and it would totally work.
There are also a few ready-to-use modules on the gallery for that sort of thing, that would enable you to just add a part to the blog content type and be done with it.
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 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.
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 have a homepage on an Intranet. It has at 15+ webparts (news, weather, etc.) I want to allow the users to customize the page by moving the webparts around or deleting them. At present I don't let them see the ribbon at the top so they don't have access to the "Edit page" button. I have pulled it out from the Ribbon
<a unselectable="on" href="javascript:;" onclick="return false;" class="ms-cui-ctl-large" aria-describedby="Ribbon.WebPartPage.Edit.Edit.Menu.Actions.Edit_ToolTip" mscui:controltype="Button" role="button" style="height: auto;" id="Ribbon.WebPartPage.Edit.Edit-SelectedItem">
<span unselectable="on" class="ms-cui-ctl-largeIconContainer">
<span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float">
<img unselectable="on" alt="" src="/_layouts/1033/images/formatmap32x32.png" style="top: -160px; left: -96px;">
</span>
</span>
<span unselectable="on" class="ms-cui-ctl-largelabel" style="height: auto;">Edit<span unselectable="on">
</span>Page</span>
</a>
Unfortunately it is not working. Any thoughts?
I will be doing the same with the "Stop Editing" button as well.
According to this post: http://artykul8.com/2011/03/useful-sharepoint-shortcuts/
the trick is to use the MSOLayout_ToggleLayoutMode(); javascript function.
According to a comment in that same page, in SP2010, that javascript function is only available when you already have a web part in the page. The behavior I observed differs from this one, given that, to me, this function only worked when the page was in edit mode already (and it worked even when the page had no web part added).
I was able to find the javascript file where that function is defined, which is the ie55up.js. You can load it in your masterpage by doing:
<SharePoint:ScriptLink language="javascript" name="ie55up.js" OnDemand="false" runat="server" />
For information about how to build a web control that uses that javascript function, see here: http://www.codeproject.com/KB/sharepoint/SwitchWPMode.aspx
Hope this helps
I finally found the answer to this question. It was very simple after the JS call was determined. I believe this should be for a webpart only page.
To put the page in edit mode for Personalization via a Javascript call:
ChangeLayoutMode(true); // how simple is that??
To stop the editing of the page via a Javascript call:
MSOLayout_ToggleLayoutMode(); // same as given in the other post
The "Stop" edit mode I believe is the same for all pages no matter if it's a personalized page, all webparts page, etc.
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.