Below is one page of a Joomla 1.5 extension another developer created quickly that ultimately works like the core Joomla Related Articles but a bit more custom. The code is not very pretty but it works. It shows the title and date for the latest 5 articles that are tagged with the same tag on the current page being viewed. The only problem is it shows articles from 2013 and 2012, since there are only a couple 2013 articles. So ultimately it should show 5 related items only from the current year. So if its 2013 (which it is), and there are only 4 articles from 2013 it should only show those 4.
On the line: for($y=2001; $y <= $intYear; $y++) I tried changing 2001 to 2013 but didn't change anything on the front end. Tried changing to 2014 and didn't change anything either.
The other option I was thinking was on the line: $objDb->setQuery("SELECT sectionid, catid, title if there was a way to say WHERE created='$currentYear' kind of thing.
Once again the code is not pretty and imagine the performance not so great, but looking for a quick fix to this issue, until the whole module can be replaced with a better solution later on. Any help would be most appreaciated!
<?php
// Include the syndicate functions only once
//require_once (dirname(__FILE__).DS.'helper.php');
//
//$list = modRelatedItemsHelper::getList($params);
//
//if (!count($list)) {
// return;
//}
//
//$showDate = $params->get('showDate', 0);
//
//require(JModuleHelper::getLayoutPath('mod_related_items'));
// no direct access
defined('_JEXEC') or die('Restricted access');
// Include the syndicate functions only once
include_once( dirname(__FILE__).DS.'helper.php' );
if( !defined('NL') )
{ define('NL', "\n"); }
$prmRptShowFilter=$params->get('rpt_show_filter');
$prmRptSection=$params->get('rpt_section');
$prmRptCategory=$params->get('rpt_category');
$prmRptDateFormat=$params->get('rpt_date_format');
$arrMonths=array();
$arrMonths[1]='January';
$arrMonths[2]='February';
$arrMonths[3]='March';
$arrMonths[4]='April';
$arrMonths[5]='May';
$arrMonths[6]='June';
$arrMonths[7]='July';
$arrMonths[8]='August';
$arrMonths[9]='September';
$arrMonths[10]='October';
$arrMonths[11]='November';
$arrMonths[12]='December';
$arrYears=array();
$intYear=date(Y);
for($y=2001; $y <= $intYear; $y++)
{ $arrYears[]=$y; }
$varArticleId=JRequest::getVar('id');
$objDb=&JFactory::getDBO();
//--- Database Script ---//
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' LIMIT 1");
$rows=$objDb->loadObjectList();
$section_id=$rows[0]->sectionid;
$cat_id=$rows[0]->catid;
//--- Database Script ---//
$arrList=modGtSidebarCustomHelper::getList($params);
?>
<style type="text/css">
#idForm1 {
float: right;
}
#idForm1 ul {
margin: 0;
padding: 0;
list-style: none;
clear: both;
}
#idForm1 li {
float: left;
margin: 0 1px 0 0;
padding: 0;
}
#idGtReportDisplayB {
text-align:left;
margin:3px 5px;
}
#idGtReportDisplayB a:hover {
text-decoration: underline;
font-weight: normal;
}
#idGtReportDisplayB span.zoom-link {
display: none;
}
#idGtReportDisplayB dl,
#idGtReportDisplayB dl dt,
#idGtReportDisplayB dl dd {
padding: 0px 5px 0px 5px;
margin: 0;
}
#idGtReportDisplayB dd {
color: #680e0e;
}
#idGtReportDisplayB dl {
width: 284px;
padding-bottom: 15px;
}
#idNoRelatedLatestNews {
display: none;
}
</style>
<div id="idGtReportDisplayB">
<?php
$strDisplay='';
$prmRptDateFormat='n/j/Y';
if( !empty($arrList) )
{
$strDisplay.='<h2>Recent News</h2>'. NL;
$numSize=sizeof($arrList);
for($x=0; ($x < $numSize) && ($x <= 5); $x++)
{
$tmpDtm=strtotime($arrList[$x]->created);
$strDisplay.='<dl>'. NL;
$strDisplay.=' <dt>'. $arrList[$x]->title .'</dt>'. NL;
$strDisplay.=' <dd>'. date($prmRptDateFormat, $tmpDtm) .'</dd>'. NL;
$strDisplay.='</dl>'. NL;
}
echo($strDisplay);
}
else
{
# include( dirname(__FILE__).DS.'..'.DS.'mod_latestnews'.DS.'mod_latestnews.php' );
?>
<style type="text/css">
#idNoRelatedLatestNews {
display: block;
}
</style>
<?
}
?>
</ul>
</div>
Try something like,
$current_year = date('Y');
$objDb->setQuery("SELECT sectionid, catid, title FROM #__content WHERE id='$varArticleId' AND YEAR(created_on) = $current_year ");
It will load only current year data ..
Since there wasn't much of any response from the community on this one, I ultimately created a hack that resolved the issue for now. In which I added the article year as the class name to each dl and then through css just hid the old year I didn't want. While not ideal it works and hopefully will be replacing all the code soon enough anyway.
Related
Is it possible to manipulate with #content magic variable in SASS?
I would like to replace some stuff in here before output.
Or maybe can I fill some variable with it?
The conclusion is that, I want to make an mixin #important that create both versions. Important, and no-important.
Input
.test {
#include important {
color: red;
text-align: left;
}
}
Expected output
.test {
color: red;
text-align: left;
}
.test-i {
color: red !important;
text-align: left !important;
}
No, you can't. But I quickly wrote you a mixin to make it work. It doesn't accepts multiple properties (yet).
First Note: I changed the mixin it now does accept multiple properties. Here is the Codepen.
Second Note: I updated the mixin adding multiple properties does no longer compile to different classes for each property, instead you get two versions, one without the !important suffix and one with.
This is the mixin:
#function return($state) {
#return if($state == '', '', '-i');
}
#mixin loop($name, $items...) {
#each $item in $items / 2 {
#each $state in ('', '!important') {
$suffix: return($state);
.#{$name}#{$suffix} {
#for $i from 1 through (length($items) / 2) {
#{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
}
}
}
}
}
This is how you include it:
// #include loop([classname], [property], [value]);
#include loop(whateverClassname, color, red);
This is what it compiles to:
.whateverClassname {
color: red ;
}
.whateverClassname-i {
color: red !important;
}
This is what it now compiles to, when you use multiple properties at once:
#include loop(whateverClassname, color, red, background-color, green, display, flex);
.whateverClassname {
color: red ;
background-color: green ;
display: flex ;
}
.whateverClassname-i {
color: red !important;
background-color: green !important;
display: flex !important;
}
Conclusion: it works as expected and does no longer bloat your CSS.
Hope I could help you at least a little ;-)
I have a variable which is a number and a % eg 10%. How can I use it as a value in my SASS but apply a division on it?
I have this:
$value: 0.1;
$value-percent: $value * 1%;
$value-from-50: (50 - $value) * 1%;
.test {
padding-left: $value-percent;
}
.test2 {
width: $value-from-50;
}
Which outputs this:
.test {
padding-left: 10%;
}
.test2 {
width: 40%;
}
What I now need to do is apply half of the value of $value-percent:
.test3 {
padding-left: $value-percent / 2;
}
So that I can output:
.test3 {
width: 5%;
}
Ive tried various combinations of that example code with normal and curly brackets. I can get the correct number of 10 outputted into the CSS but the % is always missing from it.
If your initial var isn't a percentage and is just a number you may need to try this:
.test {
padding-right: ($var / 2) + 0%
}
Which is better practice as it'll convert the value you pass it into what you're adding it to, in this case a percentage.
What I want is concatenate two child inside the parent but without choosing the parent on output.
What I mean is here:
.parent {
.child {
color: green;
& + & {
margin-top: 6px;
}
}
}
On the output I have this:
.canvas-btn .canvas-btn__icon + .canvas-btn .canvas-btn__icon {margin-top: 6px;}
but if it's possible to make the next way without duplicating the code is Sass?
.canvas-btn .canvas-btn__icon + .canvas-btn__icon {margin-top: 6px;}
You need to use the parent selector (&) as a variable here and treat it like the list of lists that it is:
#function nest-adjacent-selector($sel) {
$new-sel: ();
#each $s in $sel {
$last: nth($s, -1);
$new-sel: append($new-sel, $s #{'+'} $last, comma);
}
#return $new-sel;
}
.parent {
.brother, .sister {
color: green;
#at-root #{nest-adjacent-selector(&)} {
margin-top: 6px;
}
}
}
Output:
.parent .brother, .parent .sister {
color: green;
}
.parent .brother + .brother, .parent .sister + .sister {
margin-top: 6px;
}
Note that this will not work if you're using certain versions of LibSass. For more information on how this works, see this question.
I try to create some relative font-size values that match "nearly" pixels sizes:
html { font-size: 62.5%; }
$font-10px: 1em/1.1em;
$font-11px: 1.1em/1.1em;
$font-12px: 12em/11em;
.x10 { font-size: $font-10px; }
.x11 { font-size: $font-11px; }
.x12 { font-size: $font-12px; }
However, the output of this sass snipet is:
.x10 {
font-size: 0.90909;
}
.x11 {
font-size: 1;
}
.x12 {
font-size: 1.09091;
}
As you can see, the unit (em) has been stripped.
This results in a incorrect value.
How should I declare my variables to contains the correct unit?
Dividing one length by another length always results in the unit being removed if the lengths are using the same units. So your options are:
Divide using one length and one integer: 1.1em / 1.1
Multiply the unit back on afterwards: 1.1em / 1.1em * 1em
Don't use division at all: 1em
Add PX to the end of your variable and surround the variable with #{ }. This is known as interpolation #{ } and treats the variable as plain css. Interpolation also helps to remove any spaces between the number and unit of measurement:
$base-font-size: 16;
body { font-size: (62.5% * base-font-size); }
$font-10px: 1em/1.1em;
$font-11px: 1.1em/1.1em;
$font-12px: 12em/11em;
.x10 { font-size: #{$font-10px}px; }
.x11 { font-size: #{$font-11px}px; }
.x12 { font-size: #{$font-12px}px; }
Result:
.x10 {
font-size: 0.90909px;
}
.x11 {
font-size: 1px;
}
.x12 {
font-size: 1.09091px;
}
Since you mentioned accessability in the SA talk, I recommend that you add one of the mixins in this blog post by Hugo Giraudel to your project to allow the use REM units while also providing backwards compatibility for older browsers.
I have a series of divs in a step type layout. I am learning to use Scss at the moment and I thought maybe a mixin could work through the 12 divs and arrange them for me. So far I've got:
#mixin steps(){
$stepBlocks: 12;
#for $i from 1 through $stepBlocks {
.steps-#{$i} {
position: absolute;
top: (($i * 296) + px);
display: block;
}
}
}
This is what my div structure looks like:
I've made a HTML mockup as well:
http://jsfiddle.net/vdecree/CGGyL/
As you can see, the fiddle works fine, however how can I negate the effect of the first one? I need the first element to be top: 0; is there an if statement I can use? If you think you've a better way in which I can do this, I'd appreciate any help.
What you're likely wanting to is start with an offset of 0, rather than 296px.
#mixin steps(){
$stepBlocks: 12;
#for $i from 1 through $stepBlocks {
.steps-#{$i} {
position: absolute;
top: ($i - 1) * 296px;
display: block;
}
}
}