joomla custom field markup php - php

I've been working with Joomla's custom fields in an article override, but I'm not having any luck adding markup ONLY when a field is used. I have very limited knowledge of PHP.
Here's my statement:
<?php if(isset($this->item->jcfields[x]) === true && empty($this->item->jcfields[x]) === false): ?>
<div class="name"><?php echo $this->item->jcfields[x]->value; ?></div>
<?php endif; ?>
In my limited understanding this would seem to check if the field has content and is not empty. If true, display the second line that wraps the field value in a div. That works.
Conversely, if the field is empty, the second line should be skipped, which would not create the wrapping div.
In reality, the div is created either way.
What am I missing?

I went a different way since Joomla fields didn't register the output as empty with the above code.
Instead, I retrieved the value of the field and searched the text:
<?php
$word = "https";
$mystring = ($this->item->jcfields[x]->value);
if(strpos($mystring, $word) == false){echo "";
} else{
echo "<div class='facebook-link'>" . $mystring . "</div>";
}
?>
Combined with this CSS:
.facebook-link a {font-size: 25px; display: inline-block; text-indent: -999em; text-decoration:none;}
.facebook-link a:after {font-family: "FontAwesome"; display: block; text-indent: 0;content: "\f09a";}
The PHP code was added to an article override and wrapped in an outer wrapper that was designated as a css-grid with the grid-template-columns set to repeat{8, 40px).
The end result is a row of linked icons for whatever social media accounts the page user defines.

Related

How can I get information from an array from an ACF Image field in WP?

I am very new to WP so this may seem like a very simple question. I am trying to provide a background image url via css class and advanced custom fields. I want to do it this ways so I can keep my class clean and dry. The image is stored in WP admin as a custom field image. Here is my hero template code:
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<?php
$hero_img = get_field('hero_image');
?>
<h3>ACF Field Data: <?php the_field('hero_image');?></h3> // just to see what it is
<section class="panel--hero panel--bg-image" <?php $hero_img ? print 'style="--background-image: url("hero_img[5]");"' : ''; ?>>
<div class="panel__content">
<div class="container container__grid page-heading">
<div class="container__col">
<h2 class="page-title center--flex text-white"><?php the_title() ?></h2>
</div>
</div>
<div>
</section>
<?php
endwhile;
endif;
?>
And the scss:
&--bg-image {
position: relative;
height: 50vh;
&::after {
background-image: var(--background-image);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: '';
display: block;
opacity: var(--opacity);
left: 0;
right: 0;
position: absolute;
top: 0;
z-index: -1;
}
}
No image is showing up. The absolute path is the fifth item in that array, and it's not coming through. In JS I would normally loop through it, but I thought I already did that using the 'if/while' loop above my variable declaration. Do I need to loop the $hero_img variable now too? And if so, that is the most conventional way to do this in WP/PHP? Is forEach an option? Perhaps I'm not clear on that data is available just by running the if/while loop. Any help would be much appreciated!! Thanks.
Option 1 - Use the array key
Assuming you are using ACF and the field is set up to return the "Image Array", you can get the image url using the array key url, i.e.:
$hero_img_url = $hero_img['url'];
Option 2 - Only return the URL from ACF
If you will only ever want to get the URL of the image, you can change the return format to "Image URL" in the ACF setup of the field. Then get_field returns only the url and you can get it like you are already, e.g.:
$hero_img_url = get_field('hero_image');
Additional Notes
when you're using an associative array (i.e. an array with keys), then the position is irrelevant so you don't try to get the 5th element, for example. You just use the key to get the value directly.
If you are not sure what is in an array or what the keys are, you can use var_dump($hero_img); to output to the screen exactly what keys and values it has.

How to change li CSS in mpdf?

I work with mPDF to generate invoices to send to my customers. I have an invoice that has some metadata that is listed using an li element. I want the dots from the li element to not be visible. I've tried applying 'list-style-type: none;' to the element in which this information is displayed. I've tried both
of this inline and in the actual CSS.
<?php
foreach ( $invoice->get_columns_data() as $index => $row ) {
echo '<tr class="item">';
// Display row data.
foreach ( $row as $column_key => $data ) {
$templater->display_data_recursive( $column_key, $data );
}
echo '</tr>';
}
?>
The PDF ignores all changes to the metadata that is passed through, but it will change the tr element's background, for example.
.item {
list-style-type: none!important;
background-color: yellow;
}
list-style-type: none; will not work, even if I add !important
background-color: yellow; will work regardless.
Example of element change
I don't know what to do to get this element to listen to my CSS.
Could anyone help me out or point me in the right direction so I can continue?
Simple add css line to local page:
.item{list-style-type: none!important;}
Or add new class like
//css .nodots{list-style-type: none!important;}
//php echo '<tr class="item nodots">';

Creating a three column layout with PHP

I am trying to create a three column layout with PHP/HTML/CSS. The left column contains an image then text underneath that image, each image and text is on a separate line. The right column is the same as the left column, but with different images and texts. The middle column contains images and texts NEXT to each other, so one image and one text is on one line, one image and one text is on the next line and so forth. I have a container div that will house these columns, the container is 85% of the page. So each column will be roughly 28%. Right now, I am focusing on just the left and right columns. These columns only have images and not text for simplicity sake (My output image). When I run the code, the output is each image sitting next to each other, instead of each image being on a separate line floating to their respective positions.
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=container>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#container{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
float: left;
width: 28.33%;
}
#left img{
width: 100%;
}
#right{
float: right;
width: 28.33%;
}
#right img{
width: 100%;
}
This is how the output looks like:
Dataset:
<div id=container></div><div id=container></div><div id=container></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/R/r/2/q/P/4/blue-number-one-hi.png><br><p>4</p></div></div><div id=container><div id=left><img src=http://bsccongress.com/im3/blue-number-two-clip-art.png><br><p>5</p></div></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png><br><p>6</p></div></div><div id=container><div id=left><img src=http://2.bp.blogspot.com/-x0uSxqUaYQA/UCEr1WV_1AI/AAAAAAAAC_0/QHrtbsfcK1s/s1600/blue-number-four-md.png><br><p>7</p></div></div><div id=container></div><div id=container><div id=right><img src=http://bsccongress.com/im7/blue-number-five-clip-art.png><p>9</p></div></div><div id=container><div id=right><img src=http://www.clipartbest.com/cliparts/Rid/gq7/Ridgq7AnT.png><p>10</p></div></div>
It is creating an inline of the images instead of putting them on separate lines. How can I correct this problem?
Grid layout
Since you are looking for a grid layout, you would find a framework such as Bootstrap very helpful. With Bootstrap, your HTML would be as simple as:
<div class="row">
<div class="col-xs-4">Left</div>
<div class="col-xs-4">Middle</div>
<div class="col-xs-4">Right</div>
</div>
If you don't want to use a library for some reason (why not?) then take a look at their CSS.
Don't repeat yourself
Create your class as a variable, then create the HTML:
$class = 'middle';
if( something_here ){
$class = 'left';
}
echo "<div class='$class'>Content</div>";
Convert special characters
Your database variables might contain characters that cause errors in your HTML. To prevent that, create a simple function:
function html($str){
return htmlspecialchars($str, ENT_QUOTES);
}
Then use:
<?php echo html($row['field_name']); ?>
Your images issue
If you want your images to be blocks, simply use a class called block on your images, and create this CSS:
.block{
display:block;
}
PHP templating
Instead of:
$this = $row['this'];
$that = $row['that'];
echo "<p>$this</p>";
echo "<div>$that</div>";
You can actually jump between PHP and HTML:
<?php if( something_here ){ ?>
<p><?=html($row['this'])?></p>
<div><?=html($row['that'])?></div>
<?php } ?>
Now your code is shorter, easier to edit, and easier to read, including your source code.

using jQuery to determine current span css content: url(.../...) value

I have a span tag that is assigned css classes via a stylesheet depending on whether it is clicked it changes values. The css image is done via content as shown below:
ie. here is part of the css:
.nav li > a > span:after {
font-size: 19px;
content: url(../images/expand.gif);
}
.nav li.open > a > span:after {
content: url(../images/collapse.gif);
}
The span does not have an id but is within a hyperlink tag that does have a unique id.
I was able to assign a variable via jQuery to each specific span tag. The code I will paste below gives me the link value of the hyperlink parent node but what I actually need is the current value of the content url assigned in the css.
Here is an example of the php & jQuery from the code I am working on:
$content = '
<script type="text/javascript">
$(document).ready(function() {';
foreach ($catchClass as $id)
{
$content .= '
var $span = $("#' . $id['id'] . ' span");
var check = $span.after("eq")[0].parentNode;
// alert("test: " + check);
if (check === "../images/collapse.gif") {
$span.attr("style", "font-size: 19px; content: url(../images/collapsex.gif);");
}
elseif (check === "../images/expand.gif") {
$span.attr("style", "font-size: 19px; content: url(../images/expandx.gif);");
}
';
}
$content .= '
});
</script>';
The alert is just so I can see when I get the proper value I am looking for. The line containing this: var check = $span.after("eq")[0].parentNode; ... is what I need to change to get the content url value I am looking for. $catchClass holds the array of hyperlink id's displayed on the page. I have been searching through all kinds of threads on this forum for the answer but to no avail. Would someone be able to help me with this dilemma?
Thank you.
Since :after pseudo its rendered by CSS, it's not a DOM element, so you have to access it through getComputedStyle
var check = window.getComputedStyle(
document.querySelector('#ELEMENT_ID span'), ':after'
);
if (check['content'] == 'url(../images/collapse.gif)') { ...
Hope it helps.

Evenly spacing multiple line item text without using a table

I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}

Categories