joshuaj Posted May 2, 2016 Share Posted May 2, 2016 Hi everyone, I'm building a homepage and I'd like to have some dynamic images with links on the frontpage. http://beta.artofwargaming.net is the current page. I'm trying to duplicate (to the best of my abilities) my current homepage - https://artofwargaming.net The top part of the page has dynamic images pulled from articles. When new articles upload, the featured images/news changes and basically pulls the most recent 3 stories. Is it possible to do this via code in conjunction with the built in database, or would I need a plugin? As always, thanks for the help. Link to comment Share on other sites More sharing options...
TAMAN Posted May 3, 2016 Share Posted May 3, 2016 you can do the exact same thing with pages database and templates, you can simply copy the codes from your current homepage website and customize it on your articles database, html and css knowledge required only Link to comment Share on other sites More sharing options...
joshuaj Posted May 3, 2016 Author Share Posted May 3, 2016 1 hour ago, TAMAN said: you can do the exact same thing with pages database and templates, you can simply copy the codes from your current homepage website and customize it on your articles database, html and css knowledge required only Hey thanks for the information. I currently have the css and style looking the same way as my main site, I'm just not sure how to get the data into it so it will be dynamic. Link to comment Share on other sites More sharing options...
TAMAN Posted May 3, 2016 Share Posted May 3, 2016 ACP-> Pages-> Templates-> New-> Add Database template-> Template Type-> Featured records-> Assign to database-> your articles database now 2 templates will be created Index and entry index template pulls information from entry template simply do something like this inside index template, codes are from your current website <div class="gp-container" style="height: 350px;"> {{if count($articles)}} {{foreach $articles as $id => $record}} {{if $id == 0}} <div class="gp-large-post"> {template="entry" app="cms" location="database" group="esports" params="$record, $database, 0"} </div> {{else}} <div class="gp-small-posts"> {template="entry" app="cms" location="database" group="esports" params="$record, $database, $id"} </div> {{endif}} {{endforeach}} {{endif}} </div> now for entry template this is also from your website <a href="https://artofwargaming.net/featured-news/smooth-mcgroove-sings-papyrus-battle-theme-from-undertale/"><div class="gp-featured-post" style="opacity: 1; background-image: url(https://artofwargaming.net/wp-content/uploads/2016/05/papyrus_5F00_610-882x350.jpg);" data-rel="https://artofwargaming.net/wp-content/uploads/2016/05/papyrus_5F00_610-1764x700.jpg"><div class="gp-featured-caption" style="padding-left: 66px;"><h2 class="gp-featured-caption-title">Smooth McGroove Sings Papyrus’ Battle Theme From Undertale</h2><div class="gp-featured-caption-text">The acapella artist known as Smooth Mcgroove is at it again. This time, he’s tackling the batt...</div></div><div class="gp-bottom-bg-gradient-overlay"></div></div> </a> now all you have to do is set css and edit the entry template to add the article image and title r whatever you want i suggest you to take a look at other pre created templates like for example category 2 column image featured Link to comment Share on other sites More sharing options...
joshuaj Posted May 3, 2016 Author Share Posted May 3, 2016 Thanks for the info. I think I have followed your information and sort of understand how it is working. The link with div in between, that is the dynamic content. So, I just have to figure out a way to replace the <a href=""> </a> part with dynamic code and also the background links with dynamic code to show the article image. If this makes sense. Link to comment Share on other sites More sharing options...
TAMAN Posted May 3, 2016 Share Posted May 3, 2016 yep easy peasy, you dont have to figure out anything its all in other pre created templates just copy and paste for example this is the article image, now replace it with the image at your entry template <img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}"> Link to comment Share on other sites More sharing options...
joshuaj Posted May 3, 2016 Author Share Posted May 3, 2016 13 hours ago, TAMAN said: yep easy peasy, you dont have to figure out anything its all in other pre created templates just copy and paste for example this is the article image, now replace it with the image at your entry template <img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}"> Ah, thanks for the information. I managed to get the style looking somewhat correct with the links and excerpt working as intended. http://beta.artofwargaming.net/articles.html The question is, how do I get this to work on the homepage I've created? I basically created a new template in my theme and called it gpcontainer and then used the template calls to insert it into my global theme. So my code is this: {{if $home = \IPS\cms\Pages\Page::$currentPage->id == 15}} {template="gpcontainer" app="core" group="global"} {{endif}} I needed the div to span 100% of the page width and not be contained by the ipsContainer, so I created a template file and called it in the the globalTemplate file with the code above so it will only display if the page is the homepage. Link to comment Share on other sites More sharing options...
joshuaj Posted May 3, 2016 Author Share Posted May 3, 2016 So just a small update. I actually parsed the database into the homepage I created. {{if $home = \IPS\cms\Pages\Page::$currentPage->id == 15}} {database="articles9283759273592"} {{endif}} This is displaying the dynamic images now with the correct links, titles, and excerpts. I'm not sure if that is the correct way to do it. Link to comment Share on other sites More sharing options...
TAMAN Posted May 3, 2016 Share Posted May 3, 2016 if you trying to make your articles page you have created to be your default page when someone visits your website go to ACP-> System-> Applications. and then make "Pages" as default application for your website by clicking the star from right side, then go to ACP-> Pages-> Pages. and click on the litle arrow from right side of your articles.html page and make it as default page. thats all you do not have to edit your theme if you want to apply a css file to that articles.html page. go back to Templates and click on New again and a add css file . to apply this css file you have created you need to go back to Pages-> Pages. then edit the articles page, there is a tab called Page Includes you can select the css file you created Link to comment Share on other sites More sharing options...
joshuaj Posted May 4, 2016 Author Share Posted May 4, 2016 Well I'm confused now by this. I've added the code and got it to look right with the css, but when I inspect the html with firefox, it shows about 6 gp-small-post divs that aren't showing due to a css overflow hidden. Why is it showing the extra divs? This is my template code: Index <div id="gp-featured-wrapper"> <div class="gp-container" style="height: 350px;"> <div class="gp-top-bg-gradient-overlay"></div> <div class="gp-side-bg-gradient-overlay"></div> {{if count($articles)}} {{foreach $articles as $id => $record}} {{if $id == 0}} <div class="gp-large-post"> {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, 0"} </div> {{else}} {{if $id % 2}} <div class="gp-small-posts"> {{endif}} {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, $id"} {{if $id % 2 == 0}} </div> {{endif}} {{endif}} {{endforeach}} {{endif}} </div> </div> </div> Entry <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}"> <div class="gp-featured-post" style="opacity: 1; background-image: url({file="$record->_record_image_thumb" extension="cms_Records"});" data-rel="{file="$record->_record_image_thumb" extension="cms_Records"}"> <div class="gp-featured-caption" style="padding-left: 66px;"><h2 class="gp-featured-caption-title">{wordbreak="$record->_title"}</h2> <div class="gp-featured-caption-text" data-ipsTruncate data-ipsTruncate-size='2 lines' data-ipsTruncate-type='remove'>{$record->truncated()|raw}</div> </div> <div class="gp-bottom-bg-gradient-overlay"></div> </div> </a> Link to comment Share on other sites More sharing options...
TAMAN Posted May 4, 2016 Share Posted May 4, 2016 <div id="gp-featured-wrapper"> <div class="gp-container" style="height: 350px;"> <div class="gp-top-bg-gradient-overlay"></div> <div class="gp-side-bg-gradient-overlay"></div> {{if count($articles)}} {{foreach $articles as $id => $record}} {{if $id == 0}} <div class="gp-large-post"> {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, 0"} </div> {{else}} <div class="gp-small-posts"> {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, $id"} </div> {{endif}} {{endforeach}} {{endif}} </div> </div> use this one then go to your articles database settings to show only 3 articles Link to comment Share on other sites More sharing options...
joshuaj Posted May 4, 2016 Author Share Posted May 4, 2016 30 minutes ago, TAMAN said: <div id="gp-featured-wrapper"> <div class="gp-container" style="height: 350px;"> <div class="gp-top-bg-gradient-overlay"></div> <div class="gp-side-bg-gradient-overlay"></div> {{if count($articles)}} {{foreach $articles as $id => $record}} {{if $id == 0}} <div class="gp-large-post"> {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, 0"} </div> {{else}} <div class="gp-small-posts"> {template="entry" app="cms" location="database" group="homefeatured" params="$record, $database, $id"} </div> {{endif}} {{endforeach}} {{endif}} </div> </div> use this one then go to your articles database settings to show only 3 articles Thanks. That worked. Seriously, I appreciate your help. Hopefully others will find this helpful also. I suppose my next task to tackle is do I use the "Articles" database to only import featured news for my image slider and create a second database for other content. So for instance, I make the current Articles database only for articles that I want to display in the featured image slider area, and a second database for all other news content. On my current site, the articles database is all connected so my featured image area just is the last 3 articles that I've imported and the news block below it are the remaining latest news. My understanding is you can only have one template applied to one database, so I think to keep it simple I need to make a second database for all other news and have them separated. I think I can then make a block template for pulling in the news for the second database to accomplish the same thing. Link to comment Share on other sites More sharing options...
TAMAN Posted May 4, 2016 Share Posted May 4, 2016 Pages-> blocks-> add a block using your articles database feed and customize it however you want then you can use the block anywhere you want there is no need for second database Link to comment Share on other sites More sharing options...
joshuaj Posted May 4, 2016 Author Share Posted May 4, 2016 34 minutes ago, TAMAN said: Pages-> blocks-> add a block using your articles database feed and customize it however you want then you can use the block anywhere you want there is no need for second database Ah, I didn't think of that. Perfect! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.