I have created a page in liferay 7 with an image diplaying at full width. Under the image I want a 3 column layout. How can I achieve this? Do I just add some WebContent with some custom css?
I have created a new template in here:
C:\Users\me\Documents\workspace\my-workspace\bundles\tomcat-8.0.32\webapps\ROOT\layouttpl\custom\1_column_3_columns.tpl
The tpl looks like this:
<div class="portlet-layout row">
This is the full width row
</div>
<div class="columns-3" id="main-content" role="main">
<div class="portlet-layout row">
<div class="col-md-4 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>
<div class="col-md-4 portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content")
</div>
<div class="col-md-4 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
</div>
I am not sure how to deploy this because when I look at the settings for a random page I dont see this 'new' layout(the file is called 1_column_3_columns.tpl):
I am not sure whether I deployed this the right way. From the commandline I ran:
blade gw build
blade gw deploy
How can I deploy / create this new .tpl layout for my site?
If you want to add apps in the 3 columns below the picture, the best approach would be to create a layout.
Should be 5 min of work. Best copy the OOTB 3 column one and add one row over the 3 columns.
https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/layout-templates-intro
EDIT:
If you use blade tool for deploying have a look at https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/blade-cli.
If you run then deploy command you should see a message in the tomcat log indicating that the layout was deployed and is started.
Alternatively just compile the code ./gradlew build and then copy the war file form build to LIFERAY_HOME/deploy/
A not to the Template. If you want to place portlets in the top row, you need to put the placeholder code there with a unique indicator.
<div class="portlet-layout row">
$processor.processColumn("column-0", "portlet-column-content")
</div>
And maybe just to clean thing up I would go with.
<div class="columns-1-3" id="main-content" role="main">
<div class="portlet-layout row">
$processor.processColumn("column-0", "portlet-column-content")
</div>
<div class="portlet-layout row">
<div class="col-md-4 portlet-column portlet-column-first" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
</div>
<div class="col-md-4 portlet-column" id="column-2">
$processor.processColumn("column-2", "portlet-column-content")
</div>
<div class="col-md-4 portlet-column portlet-column-last" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
</div>
</div>
Also, check your layout-template.xml file if you are pointing to the right files.
Related
You can see my site here: http://heather-dannyelle.com/macarons.html under 'Gallery'. The images should both be snugly stacked instead of with gaps and they should sort when you click on the tabs at the top. Here's the theme page I bought it from to see the difference: https://www.midmich.edu/connections-website/pages/page-portfolio.html
Other than updating the html with my own images and pages, I have not changed the original code. I haven't changed the js script.
I installed it with the instructions found here using npm:
npm install jquery
npm install isotope-layout
Here's some of my code:
<div class="menu mb-2">
<div class="item active" data-filter="*">all</div>
<div class="item" data-filter=".collection">collection</div>
<div class="item" data-filter=".videos">videos</div>
<div class="item" data-filter=".towers">towers & cakes</div>
<div class="item" data-filter=".seasonal">seasonal</div>
</div>
<div class="row no-gutters sortable-container sortable-container-gutter-fix" data-zanim-timeline="{}" data-zanim-trigger="scroll">
<div class="col-6 col-md-3 sortable-item p-2 seasonal">
<div class="hoverbox rounded overflow-hidden" data-zanim-xs='{"animation":"zoom-in"}'>
<img class="w-100" src="assets/img/lost.macarons/select/gallery/seasonal/orange_trees2.JPG" alt="" />
<div class="hoverbox-content bg-dark d-flex align-items-center justify-content-center text-center">
<div class="px-4">
<h5 class="text-white">cranberry marmalade with orange french buttercream</h5>
<!-- <a class="btn btn-outline-light btn-xs mt-3" href="page-casestudy.html">learn more</a> -->
</div>
</div>
</div>
</div>
here's the gulpfile (unchanged from download):
DEPENDENCIES: {
jquery: {
FROM: 'node_modules/jquery/dist/jquery.min.js',
TO: JS,
},
...
FROM: 'node_modules/isotope-layout/dist/isotope.pkgd.min.js',
TO: lib,
},
I've checked these directory locations and they seem still correct in my file system. I followed the directions here multiple times and still nothing changes. I really can't see where the problem is.
Any help would be so appreciated! I've been trying troubleshoot this on my own for over a month and nothing doing!
Verify that this is the correct package before you install it but based on the name and what it does I think this is the correct name for the package you want.
npm install isotope-layout
which I got from here.
I am trying to have GetImageList retrieve every other/second entry in the MIGX tv. This way I can have two calls and split them up between two bootstrap columns. It just looks better that way. What parameters can I include in the snippet to do so?
[[getImageList?
&tvname=`Success Stories`
&tpl=`successtpl`
]]
Thanks!
I was able to use two getImageList calls, one in each column, each with a different conditional based on [[+_alt]]:
[[+_alt:is=`1`:then=`
<div class="col-md-12 col-sm-12 col-xs-12 cl-stacked-margin-bottom">
<div id="cl-tesimonial">
<div class="testimonial-content"><i class="fa fa-quote-left" aria-hidden="true"></i>
[[+client_testimony]]
<h2 class="cl-client-name">[[+client_name]]</h2>
<div class="cl-author image-testimonial"> <img src="[[+client_img:notempty=`[[+client_img]]`:else=`[[++assets_url]]img/client_images/testimonial.jpg" alt="[[+client_name]]">
</div>
</div>
</div>
</div>
`:else=``]]
and:
[[+_alt:is=`1`:then=``:else=`
<div class="col-md-12 col-sm-12 col-xs-12 cl-stacked-margin-bottom">
<div id="cl-tesimonial">
<div class="testimonial-content"><i class="fa fa-quote-left" aria-hidden="true"></i>
[[+client_testimony]]
<h2 class="cl-client-name">[[+client_name]]</h2>
<div class="cl-author image-testimonial"> <img src="[[+client_img:notempty=`[[+client_img]]`:else=`[[++assets_url]]img/client_images/testimonial.jpg" alt="[[+client_name]]">
</div>
</div>
</div>
</div>
`]]
I want to make my theme show the photoset like it does with normal photos, but one under another.
I'm using this theme right now http://theme-neptune.tumblr.com/
And this is the code for the Photoset block
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{Photoset-250}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
Im totally new to all this, I need help.
Photoset Photos
You can loop through the photos in a photoset using {block:Photos}:
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-250}">
{/block:Photos}
{/block:Photoset}
This will output each photo as an img element. Below is the markup for the OP's question:
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{block:Photos}
<img src="{PhotoURL-250}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:Photos}
<img src="{PhotoURL-500}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
Trying to figure out how to a do a responsive layout using Foundation. I am new to this and familiar with the ability to use push and pull but I am struggling trying to figure out how to stack items in a single row.
Visual: http://i.imgur.com/q1LAvIa.png
<div class="row">
<div class="small-12 large-? columns"> A </div>
<div class="small-12 large-? columns"> B </div>
<div class="small-12 large-? columns"> C </div>
</div>
Thanks in advance!
i think your code (according to your image) would be like:
<div class="row">
<div class="small-12 large-6 large-push-6 columns">A</div>
<div class="row">
<div class="small-12 large-6 large-pull-6 columns">B</div>
<div class="small-12 large-6 columns">C</div>
</div>
</div>
</div>
You could check "Advanced" & "Source Ordering" sections in http://foundation.zurb.com/docs/components/grid.html
I'm using bootstrap and attempting to use the panel component for rendering lookup items. It renders perfectly fine, but this was all hand coded.
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">
Item Number 1
</div>
<div class="panel-body">Image Carousel Goes Here</div>
<div class="panel-footer">
<table>
<tr>
<td>Field</td>
<td>Value</td>
</tr>
<!-- etc. -->
</table>
</div>
</div>
</div>
</div>
A JSFiddle is here.
I'm wondering how it'd be possible to do something like:
<div class="row">
#(foreach Item item in items)
{
#RenderItemView(item);
}
</div>
where I could dump all of the "div.col-md-4 ... slash div" code into another cshtml file and use it as a component and just pass the model to it?
I know that I could do this, but would prefer to make this a reusable component.
<div class="row">
#foreach(Item item in items)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Basically, the subcomponent will be a partial view, I think, but what is the normal way of passing a model to it and it rendering at that spot (basically, like #RenderBody works on layout)
You could create a partial view which holds this content:
#model IEnumerable<ItemType>
<div class="row">
#foreach(var item in Model)
{
// instead of using a component, setting the panel-heading off item.Number,
// panel-body by a foreach on item.ImageUrls, etc.
}
</div>
Save the partial view in the Views/Shared folder, so that it's available everywhere. Then to use it:
#{Html.RenderPartial("YourPartialView", Model.Items);}