php html render ignores styles - php

I am gonna try to explain this as best as possible. i have the following varibles
$name = main channel and $childs = sub channels, if i remove the childs from the HTML the main channel shows and not the sub channels, which is correct. but when i try to style the sub channels as a different color then the main it wont allow it, and if you notice i have 2 different images but it ignores the sub channel image and uses the main and only uses. I don't understand how i can remove the sub channel without any affect on the main channel, but but when i try to add a separate icon and css to the sub it ignores it completely.
private function renderChannels($channelId)
{
$content = "";
$imagePath = $this->imagePath;
foreach ($this->_channelDatas as $channel)
{
if($channel["pid"] == $channelId)
{
if($channel["show"])
{
$name = $this->toHTML($channel["channel_name"]);
$title = $name . " [" . $channel["cid"] . "]";
$link = "javascript:tsstatusconnect('" . $this->_javascriptName . "'," . $channel["cid"] . ")";
$users = $this->renderUsers($channel["cid"]);
$childs = $this->renderChannels($channel["cid"]);
$cid = $channel["cid"];
$content .= <<<HTML
<div class="comms-row comms-row-title">
<img src="resources/media/icons/sub_channel_icon.png">$name
<div class="comms-row-flags">$flags</div>
$users
<div class="comms-row"><img src="resources/media/icons/sub_channel_icon.png">$childs</div>
</div>
HTML;

Us CSS !important on duplicate declarations in the sub-channels. I've noticed the newer updates on Fire fox ignores declarations that are re-declared later. I don't know why. !important will work, but I'm sure there is a better way to do it.

Related

Images are displaying vertically rather horizontally

Update: After looking at my HTML code in browser I figure out I need to only run the SQL code inside php just once in foreach loop and the images will be displayed horizontally. I was wondering how do I make that sql code run only once in that loop?
When I write the below code inside foreach ($ffs as $ff) {
Code:
echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
So when this code is inside that foreach loop the images displays in vertical and I want my images to be displayed in horizontal (one next to other). But, if I remove that code from foreach and put it outside foreach code the image are displayed horizontally and works fine. I have tried CSS to display the image horizontally, but it only works if I remove that code from foreach. For some reason the above code (In foreach) somehow forcing the images to display in vertical, so no matter what I do it displays in vertical (the images).
I can't put my code outside foreach. I know I can use foreach to loop through my SQL code and it works fine, but the thing is I want it to work like first load images then first row only from sql, then 2nd image and 2nd row from sql and for that to make it work the only way is to put inside foreach my sql code, so it loads one at a time or else if I put it outside foreach It will load all the data of sql at once (1 row to 9 let's say) then all the images which makes no sense. I am storing my images in my hosting website files.
My question is how do I force my images to display horizontally one next to other?
My code:
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', '1');
require "navigationbar.php";
require "testing.php";
?>
<html>
<head>
<link rel="stylesheet" href="userprofilestyl.css">
</head>
<body>
<hr>
<?php
global $username;
//username to get data of specific user
$username = $_SESSION['name'];
//to get image by username
$image = "images/$username";
global $increaseForText;
$increaseForText = 0;
function listFolderFiles($dir, $username, $increaseForText)
{
//getting images
$ffs = scandir($dir);
unset($ffs[array_search('.', $ffs, true)]);
unset($ffs[array_search('..', $ffs, true)]);
// prevent empty ordered elements
if (count($ffs) < 1) {
return;
}
$column_count = 0;
$sql = "select username_for_info, _name, _desc
from info_desc where username_for_info = '$username'";
try {
require "testing.php";
$stmt = $conn->prepare($sql);
$stmt->execute();
$Data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo '<div class="image-container">';
foreach ($ffs as $ff) {
//select data from database
$s = "'<li>'.$ff";
$saving = "$dir/$ff";
$string = "$saving";
global $string_arr;
$string_arr = (explode("/", $string));
$sav;
$sav = '<li>' . $ff;
global $sa;
$sa = "$ff";
if (is_dir($dir . '/' . $ff)) {
listFolderFiles($dir . '/' . $ff, $username, $increaseForText);
}
//printing image
if (is_file($saving)) {
echo '<img src="' . $saving . ' " width="100" height="100" alt="Random image" />';
}
//printing text
echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
$increaseForText++;
}
} catch (PDOException $e) {
echo '{error":{"text":' . $e->getMessage() . '}}';
}
echo '</div>';
}
listFolderFiles($image, $username, $increaseForText);
?>
</body>
</html>
Add this to your css file:
.image-container{
display:inline-flex;
flex-flow:row;
}
This will change the flow of every element inside the div with the class "image-container" from vertically to horizontally
Foreach has nothing to do with making the images display vertically, there should be something wrong with the HTML or CSS. Make sure your tags are closed, such as your p and li tags.
There are alot of ways to make the images display horizontally, it would easier if you can send a jsfiddle or a code snippet.
But try this on .image-container:
display: flex !important;
flex-flow: row;

Creating re-usable ACF fields that can be inside various elements/classes

I have the following code which is inside its own file, which gets an ACF field and outputs it.
<?=get_field('text') ?>
I then include this in another template file using PHP include, meaning I have re-usable fields throughout my site. This has worked well in the past, as I can create consistent 'text' fields such as: <h1>My Text field</h1>
However, I'd like to further extend this by writing some kind of fucntion that allows me to call the PHP include, whilst also assigning the container tag (h1,h2 etc), as well as optional classes:
<h1>My Text field</h1>
<h2>My Text field</h2>
<p>My Text field</p>
<h1 class="myClass">My Text field</h1>
Is this possible?
You can do it this way:
<?php
class functions{
public static function get_field($text = 'Default', $tag = 'p', $class = false){
if($class){
$class = ' class="' . $class . '"';
}
return '<' . $tag . $class . '>' . $text . '</' . $tag . '>';
}
}
echo functions::get_field('My Text', 'h1', 'my-class');
?>
in HTML
<h1 class="my-class">My Text</h1>
Hope it will give you an idea on how to expand this method.

Get English page title Joomla

I'm working with an custom back-end template in Joomla and now I'm come to a point that I need to support multiple languages.
In the begin of the development I did not think about multiple languages and that gives me some trouble now. That it is best to rewrite the code and make it "smarter" I know, but at this point there is not much time to rewrite this code.
In the backend I'm working with icons that are based on the page title. For example the page Article Manager requests the icon images/icon/article-manager.png. So you see what happens if the page title is for example German and is called Inhalt.
At this moment I use this code to generate the iconpath:
#Loading Joomla Document Module
$doc = JFactory::getDocument();
#Get the page title
$title = explode("-", $doc->title);
$title = trim(end($title));
#Generate icon path
$lastTitle = explode("-", $title);
if (strpos(end($lastTitle), ':')) {
$lastTitle = explode(":", end($lastTitle));
$lastTitle = $lastTitle[0];
$iconPath = trim($lastTitle);
$iconPath = 'templates/' . $this->template . '/images/icons/' . strtolower(str_replace(" ", "-", $iconPath)) . '.png';
} else {
$iconPath = trim(end($lastTitle));
$iconPath = 'templates/' . $this->template . '/images/icons/' . strtolower(str_replace(" ", "-", $iconPath)) . '.png';
}
Now I'm thinking of searching the database for the page/componetent/modul/plugin ID but is there a faster/easier way to edit it?
Work around
As earlier stated, icons generated by a page title is indeed a bad idea. But Lodder came with a pretty nice and easy work around. So I decided to follow his idea. I added an extra variable that checks if it is a 'subpage', when yes then it extends the icon file name with this subpage.
#Loading Joomla Application Module
$app = JFactory::getApplication();
#Genrate page icon
$comp = $app->input->get('option');
$view = $app->input->get('view');
if(!empty($view)) {
$iconFileName = $comp . '-' . $view;
} else {
$iconFileName = $comp;
}
$iconPath = 'templates/' . $this->template . '/images/icons/' . $iconFileName . '.png';
Basing the icons on the Page Title is a bad idea. Purely because as you have already mentioned, your site is multi-lingual, therefore different languages will result in different results.
I would personally base the icons on the component name. For example:
$jinput = JFactory::getApplication()->input;
$view = $jinput->get('option');
The above code will output com_content and will always be the same for all languages.
You can then simply name your icon com_content.png and call the icons like so:
$iconPath = 'templates/' . $this->template . '/images/icons/' . $view . '.png';
Hope this helps

Hide Div if no image in the loop

Im looking to create a condition in wordpress loop. if no image then image box (.thumbHome{display:none})
this is in my function.php
function getThumbImages($postId) {
$iPostID = get_the_ID();
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
if($arrImages) {
$arrKeys = array_keys($arrImages);
$iNum = $arrKeys[0];
$sThumbUrl = wp_get_attachment_thumb_url($iNum, $something);
$sImgString = '<img src="' . $sThumbUrl . '" alt="thumb Image" title="thumb Image" />';
echo $sImgString;}
else {
echo '<script language="javascript">noImage()</script>';
}
}
And my javascript:
window.onload = noImage();
function noImage(){
document.getElementByClassName('.thumbHome').css.display = 'none';
}
I tried:
window.onload = noImage();
function noImage(){
$('.thumbHome').addClass('hide');
}
RESULT: class hide added to all loop
I cant figure it another way, since im still new in coding.
thx
Well first of all, you don't want to call these functions on window.onload. That's going to immediately set all class instances of .thumbHome to hidden without any conditions.
Here's a very easy way to fix this issue. There are probably more intricate ways, but this works well.
In your main loop, add an unique id to each .thumbHome div based on the image id. So like:
echo '<div class="thumbHome" id="thumb-' . $iNum . '"> ... </div>';
// or you could you use the post ID, doesn't matter, as long as you are consistent
Then your else conditional (for whether there's a thumbnail) could be changed to:
else {
echo '<script type="text/javascript">noImage("#thumb-' . $iNum . '")</script>';
}
and your js function could be:
function noImage(var){
$(var).hide();
}
This is not necessary the best way to do this, it's just the best way with the situtation you find yourself in now.

Parsing HTML to return CSS rules from ids and classes attributes with PHP

I hate to have to write down a lot of CSS rules and then enter my styles in it, so I'd like to develop a tiny php script that would parse the HTML I'd pass to it and then return empty CSS rules.
I decided to use PHP's DomDocument.
The question is: How could I loop through the whole structure? (I saw that for example DomDocument only has getElementByTag or getElementById and no getFirstElement for example)
I only want to get the ids and the classes in a given block of HTML code, I'd pass things like:
<div id="testId">
<div class="testClass">
<span class="message error">hello world</span>
</div>
</div>
I only want to know how could I loop through every node?
Thanks!
You can pass an asterisk (*) to getElementsByTagName to get all tags and then loop through them...
<?php
$nodes = $xml->getElementsByTagName("*");
$css = "";
for ($i = 0; $i < $nodes->length; $i ++)
{
$node = $nodes->item($i);
if ($node->hasAttribute("class")) {
$css = $css . "." . $node->getAttribute("class") . " { }\n";
} elseif ($node->hasAttribute("id")) {
$css = $css . "#" . $node->getAttribute("id") . " { }\n";
}
}
echo $css;
?>
The SimpleXML extension for PHP may help you. It work perfectly to navigate through HTML tree.
http://www.php.net/manual/en/simplexml.examples-basic.php

Categories