I use it on http://castlestoryonline.com but noticed it does not use correct image paths. I've implemented cdn into the data or js and imgs but it loads the attachment news images without cdn. Causing slower loading. Any idea how o avoid this?
<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_RecentNews.css" />
<div id="recentNews">
<xen:foreach loop="$RecentNews" value="$news" i="$i">
<div class="recentNews" id="{$news.thread_id}">
<xen:if is="{$news.promote_icon} != 'disabled'">
<xen:if hascontent="true">
<div class="newsImage">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<a href="{xen:link threads, $news}"><img src="{xen:link attachments, $news.attach}" alt="{$news.attach.filename}" /></a>
<xen:elseif is="{$news.image}" />
<a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
<div class='newsTitle'><h2><a href="{xen:link threads, $news}" title="{$news.title}">{xen:helper threadPrefix, $news}{$news.title}</a></h2></div>
</div>
</xen:if>
</xen:if>
<div class='newsDetails'>
<div class='newsAuthor'><i class="icon-pencil"></i> <a href="{xen:link members, $news}" class="username">{$news.username}</a></div>
<div class='newsDate'><i class="icon-time"></i> {$news.day} {$news.month}</div>
<div class='newsComments'><i class="icon-eye-open"></i> <a href="{xen:link threads/unread, $news}">{xen:number $news.view_count}</a></div>
<div class='Comments'><i class="icon-comment-alt"></i> <a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></div>
<div class='Likes'><i class="icon-thumbs-up-alt"></i> {xen:number $news.first_post_likes}</div>
</div>
</div>
<xen:if is="{$i} % 2 == 0"><div class="news-divider"></div></xen:if>
</xen:foreach>
<xen:if hascontent="true">
<div class="section sectionMain">
<xen:contentcheck>
<xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
<xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
</xen:if>
</xen:contentcheck>
</div>
</xen:if>
</div>
#recentNews { overflow:hidden; width:100%; }
.recentNews { float:left; width:48.5%; margin:10px 0 20px 0; clear:both; }
.recentNews:nth-child(3n-1) { float:right !important; clear:none !important; margin-right:2px !important; }
.news-divider { clear:both; width:100%; height:0px; border-top:#c50e2f solid 3px; margin:10px 0 20px 0; }
.recentNews .newsImage { width:100%; min-height:183px; }
.newsImage a:hover { opacity: 0.5; }
.recentNews .newsImage img { max-width:100%; max-height:185px; border:solid 1px #c1c1c1; }
.recentNews .newsTitle {
overflow:hidden;
width:100%;
position: relative;
height: 30px;
line-height: 30px;
background-color: #000000;
margin-top: -34px;
margin-left: 1px;
opacity: 0.8;
text-indent: 8px;
background-repeat:no-repeat;
background-position:8px 11px;
}
.recentNews .newsTitle h2 {
font-size:16px; width:100%; font-weight:400;
margin:0; white-space:nowrap; overflow:hidden;
text-overflow:ellipses;
height: 30px;
line-height: 30px;
}
.recentNews .newsTitle a { color:#ffffff; text-decoration:none !important;
width: 98%;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.recentNews .newsTitle a:hover { color:#ffffff; text-decoration:none !important; }
.recentNews .newsDetails { overflow:hidden; width:100%; margin-top:5px; }
.recentNews .newsAuthor { float:left; width:auto; font-size:12px; margin-left:10px; }
.recentNews .newsDate { float:left; width:auto; font-size:12px; margin-left:15px; }
.recentNews .Likes { float:left; width:auto; font-size:12px; margin-left:25px; }
.recentNews .newsComments { float:right; width:auto; font-size:12px; margin-right:10px; }
.recentNews .Comments { float:right; width:auto; font-size:12px; margin-right:20px; }
It look good but I had one issue .The tag on the bottom of the picture was breaking out of the containment. Any way to fix this?I really like your site. I am going to try these out!!
I couldn't get the icons to show up just the numbers. Do you think it was maybe the black color of my back ground and if so were would I change the color. Thanks for posting this!!So I modified the tutorial to add a likes, time, and page navigation. I also add font awesome icon and keep the picture in scale in responsive.
This is my EWRblock_RecentNews template
Code:<xen:require css="message_user_info.css" /> <xen:require css="bb_code.css" /> <xen:require css="EWRblock_RecentNews.css" /> <div id="recentNews"> <xen:foreach loop="$RecentNews" value="$news" i="$i"> <div class="recentNews" id="{$news.thread_id}"> <xen:if is="{$news.promote_icon} != 'disabled'"> <xen:if hascontent="true"> <div class="newsImage"> <xen:contentcheck> <xen:if is="{$news.attach}"> <a href="{xen:link threads, $news}"><img src="{xen:link attachments, $news.attach}" alt="{$news.attach.filename}" /></a> <xen:elseif is="{$news.image}" /> <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a> <xen:else /> <xen:avatar user="$news" size="m" itemprop="photo" /> </xen:if> </xen:contentcheck> <div class='newsTitle'><h2><a href="{xen:link threads, $news}" title="{$news.title}">{xen:helper threadPrefix, $news}{$news.title}</a></h2></div> </div> </xen:if> </xen:if> <div class='newsDetails'> <div class='newsAuthor'><i class="icon-pencil"></i> <a href="{xen:link members, $news}" class="username">{$news.username}</a></div> <div class='newsDate'><i class="icon-time"></i> {$news.day} {$news.month}</div> <div class='newsComments'><i class="icon-eye-open"></i> <a href="{xen:link threads/unread, $news}">{xen:number $news.view_count}</a></div> <div class='Comments'><i class="icon-comment-alt"></i> <a href="{xen:link threads/unread, $news}">{xen:number $news.reply_count}</a></div> <div class='Likes'><i class="icon-thumbs-up-alt"></i> {xen:number $news.first_post_likes}</div> </div> </div> <xen:if is="{$i} % 2 == 0"><div class="news-divider"></div></xen:if> </xen:foreach> <xen:if hascontent="true"> <div class="section sectionMain"> <xen:contentcheck> <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}"> <xen:pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" /> </xen:if> </xen:contentcheck> </div> </xen:if> </div>
And this is my EWRblock_RecentNews.cssCode:#recentNews { overflow:hidden; width:100%; } .recentNews { float:left; width:48.5%; margin:10px 0 20px 0; clear:both; } .recentNews:nth-child(3n-1) { float:right !important; clear:none !important; margin-right:2px !important; } .news-divider { clear:both; width:100%; height:0px; border-top:#c50e2f solid 3px; margin:10px 0 20px 0; } .recentNews .newsImage { width:100%; min-height:183px; } .newsImage a:hover { opacity: 0.5; } .recentNews .newsImage img { max-width:100%; max-height:185px; border:solid 1px #c1c1c1; } .recentNews .newsTitle { overflow:hidden; width:100%; position: relative; height: 30px; line-height: 30px; background-color: #000000; margin-top: -34px; margin-left: 1px; opacity: 0.8; text-indent: 8px; background-repeat:no-repeat; background-position:8px 11px; } .recentNews .newsTitle h2 { font-size:16px; width:100%; font-weight:400; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipses; height: 30px; line-height: 30px; } .recentNews .newsTitle a { color:#ffffff; text-decoration:none !important; width: 98%; display: block; overflow: hidden; text-overflow: ellipsis; } .recentNews .newsTitle a:hover { color:#ffffff; text-decoration:none !important; } .recentNews .newsDetails { overflow:hidden; width:100%; margin-top:5px; } .recentNews .newsAuthor { float:left; width:auto; font-size:12px; margin-left:10px; } .recentNews .newsDate { float:left; width:auto; font-size:12px; margin-left:15px; } .recentNews .Likes { float:left; width:auto; font-size:12px; margin-left:25px; } .recentNews .newsComments { float:right; width:auto; font-size:12px; margin-right:10px; } .recentNews .Comments { float:right; width:auto; font-size:12px; margin-right:20px; }
Demo: oniichan.us
It look good but I had one issue .The tag on the bottom of the picture was breaking out of the containment. Any way to fix this?
have you put fontawesome link in page_container? What version of fontawesome do you use?I couldn't get the icons to show up just the numbers. Do you think it was maybe the black color of my back ground and if so were would I change the color. Thanks for posting this!!
Hmm..no i must have skipped that step thanks ill try it.have you put fontawesome link in page_container? What version of fontawesome do you use?
have you put fontawesome link in page_container? What version of fontawesome do you use?
fontawesome in page_container fix the icon load problem. If you use this resource modification and getting some trouble, feel free to post your link and your modification in here. I will do my best to help you.Will this fix the container for the article title or is this for the time stamp only?
It look good but I had one issue .The tag on the bottom of the picture was breaking out of the containment. Any way to fix this?
I had the same issue and another thing I noticed was the picture wouldn't render right away. I think its a cache issue but I tried viewing in different browsers; I would check back later and it would be rendering the image perfect.. I ended up removing the code yesterday because of the two issues. Any idea what I'm doing wrong? I really love the idea!
Got this up and working here http://www.v6mustang.com/
We use essential cookies to make this site work, and optional cookies to enhance your experience.