Archived topic
2 columns
7 replies · Started by jean on August 25, 2017
Hello,
I have a big problem with a php code that I use in my current theme. This php code is installed in my function.php of my child theme.
It serves me to have 2 columns for the description of my recipes. I use it from the beginning and I would love to use it in your theme, but it has not worked yet. I put this code in the function.php of the theme "generalpress".
here it is :
//DEUX COLONNES
function bootstrapRow($attributes, $content) {
extract(shortcode_atts(array(
"classes" => null,
"element" => "div"
), $attributes));
$result = "<$element class=\"row";
if ($classes) $result .= " $classes";
$result .= "\">" . do_shortcode($content) . "</$element>";
return $result;
}
add_shortcode("row", "bootstrapRow");
function bootstrapColumn($attributes, $content) {
extract(shortcode_atts(array(
"all" => null,
"xs" => null,
"sm" => null,
"md" => null,
"lg" => null,
"offsetall" => null,
"offsetxs" => null,
"offsetsm" => null,
"offsetmd" => null,
"offsetlg" => null,
"classes" => null,
"element" => "div"
), $attributes));
$result = "<$element class=\"";
if ($all) {
$result .= "col-xs-$all col-sm-$all col-md-$all col-lg-$all";
} else {
if ($xs) $result .= " col-xs-$xs";
if ($sm) $result .= " col-sm-$sm";
if ($md) $result .= " col-md-$md";
if ($lg) $result .= " col-lg-$lg";
}
if ($offsetall) {
$result .= " col-xs-offset-$offsetall col-sm-offset-$offsetall col-md-offset-$offsetall col-lg-offset-$offsetall";
} else {
if ($offsetxs) $result .= " col-xs-offset-$offsetxs";
if ($offsetsm) $result .= " col-sm-offset-$offsetsm";
if ($offsetmd) $result .= " col-md-offset-$offsetmd";
if ($offsetlg) $result .= " col-lg-offset-$offsetlg";
}
if ($classes) $result .= " $classes";
$result .= "\">" . do_shortcode($content) . "</$element>";
return $result;
}
add_shortcode("col", "bootstrapColumn");
function bootstrapClearfix($attributes, $content) {
extract(shortcode_atts(array(
"xs" => null,
"sm" => null,
"md" => null,
"lg" => null,
"classes" => null,
"element" => "div"
), $attributes));
$result = "<$element class=\"clearfix";
if ($xs) $result .= " visible-xs";
if ($sm) $result .= " visible-sm";
if ($md) $result .= " visible-md";
if ($lg) $result .= " visible-lg";
if ($classes) $result .= " $classes";
$result .= "\">" . do_shortcode($content) . "</$element>";
return $result;
}
add_shortcode("clearfix", "bootstrapClearfix");I'm currently testing your theme on this test site at this address where you can see the worry.
Do you have an idea of the couic, an idea for me to move forward.
Thanks in advance
cordially
Hi there,
I think that's more complicated than it needs to be for creating columns.
Try one of the methods here: https://docs.generatepress.com/article/creating-columns/
OK. Je vais essayer avec :
<div class="grid-container">
<div class="grid-50">
Left side content
</div>
<div class="grid-50">
Right side content
</div>
</div>Est-ce compatible avec les mobiles ?
merci
It would stack on mobile. You can set something for mobile specific though.
See the examples for explanation: https://docs.generatepress.com/article/creating-columns/
Bon, je viens d'essayer mon code et cela fonctionne bien. Les colonnes s'affichent l'une en dessous de l'autre sur les portables.
merci
Jean,
Another way would be to use just CSS.
Wrap your content in a div, and in this example, I gave it a class name of two-col, then this CSS:
@media (min-width: 768px) {
.two-col {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}Cheers!
Lyle
Merci Lyle, je vais essayer votre solution
cordialement
Glad I could help!
