I'm new to liferay and I'm almost positive this is blazingly simple to do: Using velocity markup, I want to be able to generate links to pages within my Liferay website and embed them inside of my portlets on different pages.
I have a vague idea of how it might be done so I searched around figuring it would be posted somewhere, but I can't find anything on it. Incidentally, I want to put whatever code I come up with inside the view.jsp of the portlet. I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Please let me know if you need more information to respond.
I would use velocity markup here but I don't think (don't know for sure) if that is allowed inside of a jsp.
Why would you want to use Velocity mark-up inside a JSP (view.jsp)? I don't see any advantages in doing that apart from the argument that you are really great at velocity.
Though here is a link that would help you embed velocity inside of JSP.
Note: In my opinion it is not a good practice to embed velocity within JSP in a portlet
In JSP:
You will need a Layout object which you can get with the help of static methods in LayoutLocalServiceUtil.
After you get the Layouts, you can use the static methods of com.liferay.portal.util.PortalUtil like getLayoutFriendlyURL or getLayoutFullURL etc to build the URL.
In VM (these would be *.vm files in themes):
You can follow all the same steps as mentioned in JSP. The things you would need to do that are:
Instance of LayoutLocalService, can be found out by using the following code (taken from this answer):
#set($layoutLocalService = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
now you can use the velocity variable $layoutLocalService to make calls to service methods for getting the layouts.
Then you can call methods of PortalUtil class by using the variable $portalUtil available for *.vm files in themes.
You can check-out the following files for more details (if you are interested):
docroot/html/themes/_unstyled/templates/init.vm, this contains all the velocity variables available in themes. Variables of interest might be $theme, $theme_display, $layout, $navItems.
docroot/html/themes/_unstyled/templates/portlet.vm, this file is a template to display the individual portlets.
docroot/html/themes/_unstyled/templates/navigation.vm, contains code for displaying the navigation menu with page links.
docroot/html/themes/_unstyled/templates/portal_normal.vm, this file represents a page-template in liferay and this contains the other files like navigation.vm & portlet.vm.
For Velocity:
Okay so for generating the links for Liferay pages in velocity take a look at the following file in the Liferay source code:
/portal-web/docroot/html/themes/_unstyled/templates/navigation.vm
In there you'll see how the default Liferay theme generates the navigation structure for your site. To make life easier for you here it is:
<nav class="$nav_css_class" id="navigation">
<h1>
<span>#language("navigation")</span>
</h1>
<ul>
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
<li class="selected">
#else
<li>
#end
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
So the Velocity is looking through a collection called $nav_items, and then calls the getURL() method on each item to generate the link.
For JSP:
You'll need to make use of the LayoutLocalServiceUtil class, and in
particular one of the getLayouts() methods.You'll have to pick the one that best suits your need.
This will return the list of Layouts (your pages), and then you can
call getFriendlyURL() on each of these layouts to return it's url
This will be a relative url to your site, so something like
/my-site-home-page.
Let me know if you have any more questions!
Related
I need to make a footer in Liferay and use theme for it. What's the simpliest way to do it?
I have created new theme, filled _diffs folder with other folders, but it's empty and I couldn't find relevant docs about this. Should I copy all basic files there? What should I change to create footer?
In Liferay, theme's portal_normal.vm serves as the template to
construct HTML structure of the page. There you define your header,
body and footer includes.
When you will look at the portal_normal.vm of classic theme, you will observe following HTML snippet:
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by")
Liferay
</p>
</footer>
This is the footer of the page. This is what you need to implement. However, it's not necessary to use footer tag at all, as you can simply use div or table based structure with bootstrap or customized CSS classes for your footer, it's upto your requirement.
Remember! Classic theme is just like a sample provided by Liferay, so, it's not good idea to directly customize it.
Everybody needs a whole customized view of the site, and for this the best idea is to create a custom theme (that's what you are doing!), that will give you full control over your look-n-feel.
To kick-start, you can initially copy required folders from classic theme to your customized theme's (_diffs folder) and start changing bit by bit.
I have been tasked with converting a design heavy, fairly advanced HTML template for a site into an Orchard theme and I am struggling with the best way to accomplish certain things. The theme is built on bootstrap and is a modern responsive HTML template like you might find on ThemeForest or something. The site will have a number of content types (staff members, portfolio items, partners, etc.) and will need a number of templates. The content types will have a large number of fields (upwards of a dozen) inside of custom content parts.
Based on what I have read the proper way to do theming in Orchard is using placement.info in combination with alternates, wrappers, etc. This gracefully handles if parts or properties are added/removed. However, this technique is quickly becoming overwhelming, since I have to declare the name and order of every field/part in the placement.info for every content type, and every display type of that content type. Each field of each content type then needs to be wrapped in very specific html. This creates an issue because a single page can be split out into potentially a couple dozen views, with HTML tags opening in one view and closing in another.
The best work around for this I have found is to basically ignore the placement.info file and build templates just by traversing the object model. So basically, for a portfolio page, I would copy in the template HTML I have and then replace the text values with values from the model. This might look something like:
<li class="#Display(Model.ContentItem.PortfolioPart.PortfolioCore.Value.ToLower())">
<a href="#Url.ItemDisplayUrl(contentItem)" >
#foreach (var media in Model.ContentItem.PortfolioPart.PortfolioImage.MediaParts)
{
<img src="#Display(media.MediaUrl)" />
}
<span class="type">#Display(Model.ContentItem.PortfolioPart.PortfolioCoreArea.Value)</span>
<span class="portfolio-item-content">
<span class="header">#Display(Model.ContentItem.TitlePart.Title)</span>
<span class="body">
<p>
#Display(Model.ContentItem.PortfolioPart.PortfolioTagline.Value)
</p>
</span>
</span>
</a>
</li>
The benefit with this method is that I can apply all of the values in a couple of views and it's more readable. Obviously the problem with this is that if any properties or parts are removed, the template breaks.
Is there a way in Orchard to have the best of both worlds? I can't have a wrapper or template for every field - this would end up potentially hundreds of fields by the end. I also might need to display content types in multiple places with different views - each field would then require a whole new set of wrappers or alternates for every projection.
Please let me know if I'm missing anything or if there is a better way to do this besides manually traversing to the properties I need. I need a way to be able to easily plug in properties into very specific html.
My final thought was to use very specific templates for custom content types using the object model but still provide good general templates/placement.info file so that general Orchard content is flexible but the custom content types have to stay how they are.
Side thought - I guess another option would be to wrap any code that accesses a property directly in a try catch block or some kind of error handler helper, but that doesn't seem like a "best practice".
I think the techniques in this article are what you're looking for: http://weblogs.asp.net/bleroy/archive/2013/02/13/easy-content-templates-for-orchard-take-2.aspx
Any way in Expression Engine to simulate Wordpress' shortcode functionality?
I want to abide by community rules, and there's a disclaimer when clicking in the "answer" section of an existing question that says I should actually ANSWER the question, not respond to other answers.
As such, I have the same question as the one above. I am a dev with roots in WordPress and I would like to mimic the behavior of WP shortcodes in Expression Engine. All I want to do is save a snippet of code as a template that can be re-used all across my site.
For example, if I want to use an accordion menu on several pages, I could just click click while editing a page and the code appears with placeholder content that the user/dev can then replace with real content). Do I need a graphic slideshow? Click click, define the images/headings/text overlays.
As I'm posting this, I'm about to scour the EE plug-ins library but since I haven't found anything before, I wanted to post here first.
I cover an approach that I've used before in http://www.tyssendesign.com.au/articles/cms/more-stash-examples/ along with a couple of other examples of using Stash.
Short answer: there is not such a thing ... yet. The Shortcode add-on is currently in beta.
Long answer for now: use custom fields. Example: a Matrix field for your accordion, with your columns defined, and add as many row as you like. Then add tags for that in your template.
Same with a Gallery - create a Gallery field (Matrix works great for this again), then add the code to your template to build the gallery.
If these fields are made optional, then they only appear on the front-end when used.
If you want to get fancy and inject these chunks of content into your main content area, you can use NSM Transplant to do so.
Here's a simplified snippet of code I use on one site to acheive this:
{exp:nsm_transplant:body}
{inline_media}
{exp:nsm_transplant:content id="media_{row_count}"}
<figure class="{alignment}">
{exp:ifelse parse="inward"}
{if image}
{if "{alignment}" == "aligncenter"}
{exp:ce_img:make src="{image:resized}" width="860" quality="80" output='<img src="{made_url}" alt="" />'}
{if:else}
{exp:ce_img:make src="{image:resized}" width="430" quality="80" output='<img src="{made_url}" alt="" />'}
{/if}
{if:elseif video}
{if "{alignment}" == "aligncenter"}
{exp:antenna url="{video}" max_width="860"}
{if:else}
{exp:antenna url="{video}" max_width="430"}
{/if}
{if:elseif gallery}
{gallery}{embed="galleries/_embed" entry_id="{entry_id}"}{/gallery}
{/if}
{if caption}<figcaption>{caption}</figcaption>{/if}
{/exp:ifelse}
</figure>
{/exp:nsm_transplant:content}
{/inline_media}
{content}
{/exp:nsm_transplant:body}
In this case authors use {media_1}, {media_2} etc, to embed photos, videos, and galleries inside the content.
Another solution you can look at is Content Elements, which allows a more freeform method of populating an entry with a single custom field.
Hope that helps!
You can also use global variables within EE templates. You cannot use EE tags inside templates, but global variables do work. So anything that you can save as a global variable (possibly including variables made with the addon Low Variables, but I have not verified that) can be included into an EE template.
So if you need static HTML, or images, or whatever, you can absolutely mimic quite a bit of shortcode functionality by creating global vars and invoking them using the ordinary {global_var_name} syntax inside an entry field. Note that EE tags inside global variables will not get parsed, though, so you cannot use this to do an end run around parsing restrictions!
Excuse me if I'm asking silly or easy question, but I just can't figure it out.
So, I have a theme, I want to render only portlets, skipping any journal articles.
Which is the most appropriate way to do it?
In your theme's resources, there is a portlet.vm template available in the _diffs/template directory. This template allows you to override the default presentation of portlets in general (e.g. change the configuration icons, remove the title bar, ...).
However, inside portlet.vm Liferay injects a predefined variable called $portletDisplay. This is an instance of the com.liferay.portal.theme.PortletDisplay class and represents the portlet that is currently printed.
You can use the $portletDisplay.portletName attribute to check for 56, which is the ID for all Web Content Display portlets. So, in short, encapsulate the parent <div> inside portlet.vm with the following condition:
#if($portletDisplay.portletName == '56')
<div class="portlet" ...>
...
</div>
#end
I've been searching high and low for a satisfactory answer to this and failed. I hope StackOverflow can deliver for me!
I am using SharePoint Foundation 2010 (my first real attempt to deep dive into SharePoint), with (among other things) a custom web part; the master page for the site uses a CSS file supplied by the client and to which I must adhere. The issue I am having is that SharePoint, by adding several SharePoint specific CSS classes to the web part HTML structure, is conflicting with the client's styling. After some digging, I've found that the ms-WPBody class and its various element selectors are the chief culprits.
I could add !important to everything in the client style sheet, but that is verboten. I could insert some very messy styling into the child content of the web part in an attempt to override the SharePoint styling, which is the course I've been pursuing of late, but it's been getting messy. Or, I could try to remove the class from the web part, which brings me to my question:
How can I remove or otherwise override the CSS class names inserted into the HTML structuring for a SharePoint web part? I don't know enough of the inner workings of SharePoint to know what to hook to make this change, and my google-fu is fail on the subject. CssClass on the ASP.NET web control markup is obviously ignored, probably some holdover inherited from WebControl.
Help me StackOverflow! You're my only hope!
Edit
I apologize for not making it clear before, but I would like to state that I grok CSS and am not looking for help with styling. What I really am looking for is how to remove the CSS class emitted by SharePoint. Can anyone help there? I'm going to remove the CSS tag, since that appears to be confusing people. This question isn't really about CSS, it's about SharePoint.
CSS has to match the html that it is applied to - with generated html like that produced by SharePoint (or standard asp.net webforms for that matter) it is usually far easier to modify the css. If adding important is not an option you can usually do something using more specific selectors - ie a style defined as "table td" will override one for "td" though they actually select all the same elements. You can use this approach to undo any bits of sharepoint styling that are causign issues.
If you really want to change the classes sharepoint puts on the page, use jquery - trying to do that server side is really not something you want to get into on your first sharepoint project.
I'm not sure I follow, but why not wrap your webpart in a container div and then style to your heart's content:
<style type="text/css">
.ms-WPBody {
background-color:red;
}
#myCustomCss p
{
background-color:Blue;
}
</style>
<div class=ms-WPBody>
<div id=MyCustomCSS>
<p>Hello world</p>
</div>
</div>
In 2007, we had to worry about making sure your stylesheet was named last alphabetically so that it was applied correctly. Prefix your css file with z to see if it helps.
Here's a reference article about the issue:
http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/
Here's some typical Web Part HTML:
<div style=""
allowexport="false"
allowdelete="false"
class="ms-WPBody ms-wpContentDivSpace"
width="100%"
id="WebPartctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9"
haspers="false"
webpartid="d0420a1c-44b7-4009-81c9-2bbcf9b325e9">
<div id="ctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9">
Web Part Content goes here...
</div>
</div>
The trick is that the Web Part itself is the inner DIV (and all its children). The outer DIV (the one with the ms-WPBody class) is the WebPartZone. This control is sealed, but you can write an Adapter that will render the WebPartZone however you want. Most of the examples are for table-less rendering, you could write one that maintains the existing structure, but removes the classes.
To me, coding all of that and then registering it in the compat.browser of App_Browsers for the Web Application seems like overkill, so I'd probably go with jQuery (but if you do the Adapter, I'd love see it).
Or just add a Content Editor Web Part and override the CSS style element in the HTML:
<style type="text/css">
.ms-stylebox {
border:o important;
}
</style>
-- Peace!
how are you loading your CSS file? IF you are loading it in part of the head of your master page, or through just setting a custom.css, you can try loading it outside of the head. This should cause it to load after core.css and therefore allow you to override the standard classes as needed.