MODx themes for MODx Revo CMS
  • Welcome to MDxThemes - MODx themes website !
  • Premium high quality Website Modx themes
  • Bootstrap enabled MODx themes
  • HTML5, CSS3, responsive & SEO enabled themes
  • Modx theme Documentation and Support
  • MODx theme tutorials on building a website with MODx CMS.
  • Fast, super easy & powerful theme management system.
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Collab Portfolio Fix

Collab Portfolio Fix 4 years 10 months ago #115

There are couple of updates and fixes. Follow the steps to fix the portfolio page.

Step 1

1) Remove all mdx_portfolio chunks.
2) Create Chunk named "mdx_portfolioCategory"

Add the following code
 
		<li  class="pribg">
			<a href="#" data-filter=".[[+title:replace=` ==`]]" class="quacolor ">[[+title]]</a>
		</li>
 

3) Create Chunk named "mdx_portfolioItems"

Add the following code
 
		[[getImageList?   
		&tvname=`mdx_Portfolio` 
		&value=`[[+portfolioitem]]` 
		&randomize=`1`
		&tpl=`mdx_portfolioitemTpl`
		]]
 

4) Create Chunk named "mdx_portfolioitemTpl"

Add the following code
		<div class="[[+title:replace=` ==`]] col-md-3 col-sm-4 col-xs-6" >
			<ul id="list[[+idx]]" class="portfolio_list da-thumbs">
				<li>
					[[+image:is=``then=``:else=`<img src="[[+image:phpthumbof=`w=450&h=300&zc=1&q=100`]]" alt="[[+title]]"/>`]] 
						<article class="da-animate da-slideFromRight" style="display: block;">
						<h3>[[+item-title]]</h3>
						<em>[[+title]]</em>
						<span class="link_post pribg"><a href="[[~[[+url]]]]"></a></span>
						<span class="zoom pribg"><a rel="prettyPhoto" href="[[+image]]"></a></span>
					</article>
				</li>
			</ul>
		</div>
 

5) Use the following code in your resource content or create a chunk in any position to display on any page.
Replace the &docid with your resource ID.
 
		<div class="row">
			<div class="col-md-12">
				<section id="options">
					<ul id="filters" class="option-set clearfix" data-option-key="filter">
						<li  class="pribg"><a href="#" data-filter="*" class="quacolor selected">All</a></li>
						   [[getImageList? &tvname=`mdx_Portfolio` &docid=`155` &tpl=`mdx_portfolioCategory` ]]
					</ul>
				</section>
			</div>
		</div>
 
 
		<div id="con" class="clearfix row" style="width:100%;">
 
			[[getImageList? &docid=`155` &randomize=`1` &tvname=`mdx_Portfolio` &tpl=`mdx_portfolioItems`]]
 
		</div>


6) Edit TV "mdx_Portfolio"
Under input Options Tab >> Form Tabs replace it with the following code.
 
			[
				{"caption":"Info", "fields": [
					{"field":"title","caption":"Title"}
			]},
				{"caption":"Manage Portfolio Items", "fields":[
					{"field":"portfolioitem","caption":"Image","inputTV":"mdx_porfolioItem"}
				]}
			] 
 


7) Edit TV "mdx_porfolioItem" (Or create a TV if it doesnt exist)
Under input Options Tab >> Form Tabs replace it with the following code.
 
			[
				{"caption":"Image", "fields":[
					{"field":"image","caption":"Image","inputTVtype":"image"},
					{"field":"item-title","caption":"Item-Title"},
					{"field":"url","caption":"Select Url","inputTVtype":"resourcelist"}
				]}
			] 
 

8) CSS: Update the following CSS to your layout CSS. DO NOT REPLACE ENTIRE CSS.
		/* ============================================================== */
		/* ======================= Isotope Filtering CSS ================ */
		/* ============================================================== */
 
 
 
		.isotope-item {
			z-index: 2;
			margin-bottom:25px;
		}
		.item{padding:0; margin:0;}
		.element a {
			overflow:hidden;
		}
		.isotope-hidden.isotope-item {
			pointer-events: none;
			z-index: 1;
		}
 
		.isotope, .isotope .isotope-item {
			-webkit-transition-duration: 0.8s;
			-moz-transition-duration: 0.8s;
			-ms-transition-duration: 0.8s;
			-o-transition-duration: 0.8s;
			transition-duration: 0.8s;
		}
		#filters {
			display: inline-block;
			margin-bottom: 30px;
			margin-top: 15px;
			padding-left: 0;
			width: 100%;
		}
		#filters a {
			float: left;
			padding: 10px;
		}
		#filters a:hover, #filters a:active, #filters a:visited, #filters a:focus {
			text-decoration:none;
		}
		#filters li {
			float: left;
			margin-right: 10px;
		}
		.selected {
			background-color:#2b2b2b;
			text-decoration:none;
		}
		/* ============================================================== */
		/* ======================= ImageHover CSS ======================= */
		/* ============================================================== */
 
		/* Portolio Hover */
		.da-thumbs li ,
		.da-thumbs li  img {
			display: block;
			position: relative;
		}
		.da-thumbs li  {
			overflow: hidden;
		}
		.da-thumbs li  article {
			position: absolute;
			background-image:url(images/image_hover.png);
			background-repeat:repeat;
			width: 100%;
			height: 100%;
		}
		.da-thumbs li  article.da-animate {
			-webkit-transition: all 0.2s ease;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}
		/* Initial state classes: */
		.da-slideFromTop {
			left: 0px;
			top: -100%;
		}
		.da-slideFromBottom {
			left: 0px;
			top: 100%;
		}
		.da-slideFromLeft {
			top: 0px; 
			left: -100%;
		}
		.da-slideFromRight {
			top: 0px;
			left: 100%;
		}
		/* Final state classes: */
		.da-slideTop {
			top: 0px;
		}
		.da-slideLeft {
			left: 0px;
		}
		.da-thumbs li  article a {
			color:#fff;
			padding:20px;
			display:block;
		}
 
		.da-thumbs {
			margin: 0;
			padding-left: 0;
			text-align: center;
		}
 
		.da-thumbs li  article h3{
		color:#fff !important;
		}
 
		.da-thumbs li  article em{
		margin-bottom:10px;
		color:#fff;
		display:block;
		}
 
		.da-thumbs li  article span{
		display:inline-block;
		}
 
		span.link_post{
		display:block;
		width:35px;
		height:35px;
		background-color:#DF6232;
		border-radius:50px;
		cursor:pointer;
		background-image:url(images/link_post_icon.png);
		background-repeat:no-repeat;
		background-position:center;
		margin-right:10px;
		}
 
		span.zoom{
		overflow:hidden;
		display:block;
		width:35px;
		height:35px;
		background-color:#DF6232;
		border-radius:50px;
		cursor:pointer;
		background-image:url(images/zoom_icon.png);
		background-repeat:no-repeat;
		background-position:center;
		margin-left:10px;
		}
 
		.portfolio_2col article h3{
		padding-top:70px !important;
		}
 
		/* Image Grid */
		.image_grid {
			float:left;
			overflow:hidden;
			width:700px;
			position:relative;
 
		}
 
		.image_grid li{
			float: left;
			line-height: 17px;
			color: #686f74;
			list-style:none;
			overflow:hidden;
			margin-bottom:23px;
			margin-right:23px;
			text-align:center;
		}
 
 
		/* Responsive image grid*/
		/* Mobile landscape width 320 */
		@media only screen and (max-width: 767px) {
 
		.image_grid{
		width:300px;
		}
 
		.image_grid li img{
		width:220px;
		}
 
		.portfolio_4col .da-thumbs li article h3{
		padding-top:70px;
		}
 
		.portfolio_3col .da-thumbs li article h3{
		padding-top:50px;
		}
 
		.portfolio_2col .da-thumbs li article h3{
		padding-top:53px !important;
		}
 
		}
 
 
		 @media only screen and (min-width: 480px) and (max-width: 767px) {
 
		.image_grid{
		width:450px;
		}
 
		.image_grid li{
		width:178px !important;
		}
 
		.portfolio_4col .da-thumbs li article h3{
		padding-top:58px;
		}
 
		.portfolio_3col .da-thumbs li article h3{
		padding-top:34px;
		}
 
		.portfolio_2col .da-thumbs li article h3{
		padding-top:23px !important;
		}
 
		}
Last Edit: 4 years 9 months ago by Mangesh. Reason: Updated class and datafilter: Works with multiple words in category
The administrator has disabled public write access.

Collab Portfolio Fix 4 years 9 months ago #118

Hello Mangesh,
Two problems for me here:
  • TV "mdx_Portfolio" does not appear to exist (I do have mdx_portfolioImage ) Do I create it and if so where?
  • TV "mdx_porfolioItem" (Or create a TV if it doesnt exist) This doesn't exist but where do I create it - under MDx_MIGX ?
Thanks
Last Edit: 4 years 9 months ago by Robert.
The administrator has disabled public write access.

Collab Portfolio Fix 4 years 9 months ago #119

If you are able to add portfolio items to a resource/page via template variable tab then the TV should exist. If its not there then just create a TV. Dont forget to give template access to Collab theme.
You dont need to give mdx_porfolioItem template access.
The administrator has disabled public write access.

Collab Portfolio Fix 4 years 9 months ago #122

I am having problems with this. I have followed instructions below carefully but the page is not rendering any of the portfolio items I create under new portfolio categories (but it does show them when ALL is selected), so obviously I am missing something.
When you say: 1) Remove all mdx_portfolio chunks. do you mean ALL chunks under category MDxCollab which begin with mdx_portfolio including those which are Tpl?
In steps 2) 3) 4) I assume these chunks are created under category MDxCollab?
5) Use the following code in your resource content or create a chunk in any position to display on any page.
If we do this won't the resource ID be the same in every resource created?
Replace the &docid with your resource ID.
I assume this is the ID of the document itself?
Where is TV in Step 7) to be created?

What is the process for creating new portfolio categories?
Where do I assign a portfolio project to a category?
Last Edit: 4 years 9 months ago by Robert.
The administrator has disabled public write access.

Collab Portfolio Fix 4 years 9 months ago #123

Mangesh, can you please advise as to how the portfolio works - adding new categories, creating portfolio items and assigning them to their categories. I am unable to get this to work. Is there a video or document for this as it is a matter of urgency?
Last Edit: 4 years 9 months ago by Robert.
The administrator has disabled public write access.

Collab Portfolio Fix 4 years 9 months ago #124

Sorry for the delay. I was out of town for a couple of days.
Could you share the site url and login details please. Email me the details to This e-mail address is being protected from spambots. You need JavaScript enabled to view it

I will have a look at it and fix it for you.

Regards,
Mangesh
The administrator has disabled public write access.
  • Page:
  • 1