Grid/Layout using Bootstrap PHP and CSS - php

Basically I'm making cooking website and I automised displaying recipes with PHP and HTML.
I'm currently doing some front-end by using Bootstrap but I'm unable to do any decent grid where recipes will look neat and tidy. Also at some point bootstrap is not helping me with grind as I tried to pin up some griding bootstrap with it and css.
As it's automised I'm unable to sort it out and assign to particular column :(
Any help or suggestions will be very much appreciated!
I'm providing my code below
If someone would like to copy
class RecipeLayout {
private static $categories=null;
public static function display($recipe){
//part of code based on which user is being transfered to the other page with full details of the recipe
echo '<div class="card" style="width: 18rem;">';
echo "<img class='main_pg_recipe_img card-img-top'src='./public/images/". $recipe['recipe_image']."'/>";
echo ''.$recipe['recipe_title'] .'';
echo '<div class="recipe_home card-body">';
echo '<h6 class="card-title"> Category: '.self::translateCategory($recipe['recipe_type']) .'</h6>';
echo '<h6 class="card-title"> Calories: '.$recipe['recipe_calories'] .'</h6>';
echo '<h6 class="card-title"> Serves: '.$recipe['recipe_serves'] .'</h6>';
echo '</div>';
echo '</div>';
}
code
desirable layout

Related

Oscommerce understand div structure of subcategories product layout design

Here is my website URL: http://swedxnew.com.swedx.com/
Here I am using the paid theme. the all files correctley uploaded to corresponding directories. But the problem is that the product_listing.php not working properly for subcategories. If i close div after this code into product_listing.php
$prod_list_contents .= '<div class="row product-block list-view product-item wide clearfix">';
if (isset($HTTP_GET_VARS['manufacturers_id']) && tep_not_null($HTTP_GET_VARS['manufacturers_id'])) {
$prod_list_contents .= '<div class="col-xs-12 col-md-4 no-margin col-sm-4 col-lg-3 img_ar"><div class="head">'.$ribbon.'<div class="thumb">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $products_name) . '</div></div></div>';
} else {
$prod_list_contents .= '<div class="col-xs-12 col-md-4 no-margin col-sm-4 col-lg-3 img_ar"><div class="head">'.$ribbon.'<div class="thumb">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $products_name) . '</div></div></div>';
Some category working fine but the category which one already correct going to destroy.
So my questions are that where I need to close proper div that it will make corrections into all subcategories design?
The template files which is holding div structure are
/catelog/includes/template_top.PHP
/catelog/includes/tepmplate_bottom.php
/catelog/index.php
/catelog/includes/module/product_listing.php
I am totally confused where I am missing div that destroying my template layout in some category not all
is there any more template layout?
here is the files:
The disturbing URL:-
http://swedxnew.com.swedx.com/index.php?cPath=137_154
http://swedxnew.com.swedx.com/index.php?cPath=137_155
http://swedxnew.com.swedx.com/index.php?cPath=133_12800028
http://swedxnew.com.swedx.com/index.php?cPath=133_140
http://swedxnew.com.swedx.com/index.php?cPath=133_158
http://swedxnew.com.swedx.com/index.php?cPath=133_149
http://swedxnew.com.swedx.com/index.php?cPath=142
http://swedxnew.com.swedx.com/index.php?cPath=121
http://swedxnew.com.swedx.com/index.php?cPath=66_160
http://swedxnew.com.swedx.com/index.php?cPath=126
Thanks in advance if anyone guides me proper way
I have resolved my questions by doing some form effort
just removing HTML tags from the database of products descriptions
Thanks

How to customize wordpress portfolio grid to replace attributes output with text of single portfolio?

I am a php newbie but have to resolve the following issue in some way:
In my …portfolio_grid.php I succeeded in understanding that this part:
$output .= '
<a class="classic-portfolio-box normal-type-prt'.$colorize_fx_class.'" href="'.get_permalink($post_id).'" title="'.get_the_title().'"'.$colorize_hover.'></a>
<div class="portfolio-box">
<div class="portfolio-naming">
<h2 class="portfolio-title">'.get_the_title().'</h2>';
if( !empty($on_attributes) ){
$output .= '
<h3 class="portfolio-attributes">'.$on_attributes.'</h3>';
}
$output .= '</div>
</div>
<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="'.get_the_title().'" />
';
is responsible for what appears in my portfolio boxes. Now I’d like to change the following detail:
$output .= '
<h3 class="portfolio-attributes">'.$on_attributes.'</h3>';
Instead of the content of the $on_attributes variable I’d like to put out the content of the single portfolios texts field instead. I bet this is possible.
How can I fetch the content of the text field of each single portfolio post and put it out there? I know that somehow the the_content() or get_the_content() function will play a role but how is it to be done exactly? Any help is appreciated!
You already mentioned the answer in your question:
'<h3 class="portfolio-attributes">' . get_the_content() . '</h3>';
This assumes the the "text of a portfolio item" is actually saved as the WP content in your database.
As a side note, I'm not sure why you're concatenating everything as a string in this case...A wonderful thing about PHP is the ability to weave it in with standard HTML:
<h3 class="portfolio-attributes"><?php the_content(); ?></h3>

WP is_front_page and displaying images

I'm working on a new WordPress theme (haven't touched WP themes since like 2.8...) and I'm attempting to make an if/else statement that changes the behavior of my top navigation bar based on whether the page is a front_page or not.
Essentially what I'm after is if the page is a front_page, then display the logo image. If the page is any other kind of page, then display a simple H1 element with the company name:
<li class="name">
<?php
if (is_front_page()) {
echo '<a href="<?php bloginfo("url"); ?>';
echo '<img src="' .bloginfo( "template_directory" ). '/images/logo-dsi.png" alt="DSI" />';
echo '</a>';
} else {
echo '<a href="' .home_url(). '">';
echo '<h1 class="logo">DSI</h1>';
echo '</a>';
}
?>
</li>
The else statement is working fine. But my if statement is not producing the img tag correctly. It echoes the literal bloginfo('template_directory') url and not inserting that into the img src, which is what I want it to do. It's trying to find an image at this url: localhost/images/logo-dsi.png
Obviously my syntax on line 5 is wrong somewhere, but I'm also not sure if I'm going about this the right way. Is there a better solution to what I'm trying to accomplish here?
Thanks!
The later is correct however
echo '<a href="<?php bloginfo("url"); ?>';
Should be
echo '<a href="' . bloginfo("url") . '">';
I tried this out and it worked:
<li class="name">
<a href="<?php bloginfo('url'); ?>">
<?php
if (is_front_page()) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/logo-dsi.png" alt="DSI" />
<?php
} else { ?>
<h1 class="logo">DSI</h1>
<?php } ?>
</a>
</li>
Apologies, I should have hacked away at it a little longer. But maybe this will become helpful to someone else.
I knew echos in WordPress looked bad for a reason... ;-)
Also I'm sure there's a prettier way to write this out, but for now, that code does the trick.

View car details without having to create a new page for each result [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am new to PHP, and I am making a website about cars. I am using PDO and following the MVC pattern. Now when a user retrieves information about cars on my website, they have the option to 'View more details' of the car and you can imagine that the query the user performs will retrieve 30 cars +, I understand that creating a new page for each one of these cars retrieved would be ridiculous so I am wondering how may I come across creating a new page for that specific car when the 'View more details is clicked'
For example, Facebook doesn't manually create profile pages for each user it just automatically does it when the profile is clicked to view, this is all I have got so far(if it helps):
<?php if(isset($view->CarData2))
{
if (count($view->CarData2) > 0){
foreach($view->CarData2 as $ResultCarData) {
echo '<div class="row">';
echo '<div class="col-sm-6 col-md-4">';
echo '<div class="thumbnail">';
echo '<img src="" alt=""/>';
echo '<div class="caption">';
echo '<h2></h2>';
echo '<h4 class="colouredTitle">Make: </h4>';
echo '<h4>' .$ResultCarData->getMake(). '</h4>';
echo '<h4 class="colouredTitle">Model: </h4>';
echo '<h4>' .$ResultCarData->getModel(). '</h4>';
echo '<h4 class="colouredTitle">Type: </h4>';
echo '<h4>' .$ResultCarData->getType(). '</h4>';
echo '<h4 class="colouredTitle">Colour: </h4>';
echo '<h4>' .$ResultCarData->getColour(). '</h4>';
echo '<h4 class="colouredTitle">Year: </h4>';
echo '<h4>' .$ResultCarData->getYear(). '</h4>';
echo '<h4 class="colouredTitle">Price: </h4>';
echo '<h4>' .$ResultCarData->getPrice(). '</h4>';
echo '<button class="btn btn-success" name="view" type="submit" >View more details</button>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
}
else
{
echo 'No results found';
}
};
?>
Just to summarize what this does, it basically creates these new elements a certain amount of times depending on how many results are retrieved from the users query, it then displays the results in the appropriate areas.
Now my question is, how would I loop new pages when the 'view more details' is clicked? So if the button is clicked create a separate page where the user can view that specific car in more details
You can create a single page that allows you to view the car details (you dont need 30+ pages to create as this single page by passing in a reference id in our case, can query the database), maybe something like this:
replace this:
echo '<button class="btn btn-success" name="view" type="submit" >View more details</button>';
with
echo 'View details
replace the values accordingly.
And then in your car-details.php (work this around your MVC framework) page, you look for the id parameter ($_GET['id']), query the database for that id and output rest of the data i.e. images, etc.

php echoing <div> in wrong place

i am working on an an options panel for a wordpress theme. this problem has started since i tried trying to add jquery, but it doesn't seem like it should be a jquery problem.. and doesn't go away when i delete all my jquery scripts.
anyway PHP determines whether the page was saved, reset, etc and displays an appropriate message at the top of the page. but for some reason, my div (Which ought to appear first) is appearing after my h2 in the #info div that is several lines below. it isn't a css abs positioning issue as when i view source the #message div is contained w/in #info even though it appears first in the and as far as i can tell all my div tags are opened and closed correctly. this behavior resolves if i get rid of the 'updated' class. i don't desperately need to maintain that class (i can just create a new one w/ similar attributes) but i am baffled as to why the heck the php is firing incorrectly.
<?php
if ($_REQUEST['saved']) {
echo '<div id="message" class="updated fade"><p><strong>' . $my_themename . ' ' . __('settings saved.', 'thematic') . '</strong></p></div>';
}
if ($_REQUEST['reset']) {
echo '<div id="message" class="updated fade"><p><strong>' . $my_themename . ' ' . __('settings reset.', 'thematic') . '</strong></p></div>';
}
if ($_REQUEST['reset_widgets']) {
echo '<div id="message" class="updated fade"><p><strong>' . $my_themename . ' ' . __('widgets reset.', 'thematic') . '</strong></p></div>';
}
if ($_REQUEST['error']) {
echo '<div id="message" class="updated fade"><p><strong>The file you submitted was not a valid image type.</strong></p></div>';
}
if ($_REQUEST['imgremoved']) {
echo '<div id="message" class="updated fade"><p><strong>'. __('Image Removed') .'</strong></p></div>';
}
if ($_REQUEST['imgsaved']) {
echo '<div id="message" class="updated fade"><p><strong>'. __('Image Uploaded') .'</strong></p></div>';
}
?>
<div id="saved"></div>
<div id="header" class="clearfix">
<div id="themelogo"><img src="<?php echo CHILDTHEME_URI .'/functions/css/images/logo.png';?> " / ></div>
<div id="info">
<h1><?php echo $my_themename; ?></h1>
<h2>Built on the Thematic Theme Framework</h2>
</div>
</div>
Not really a solution for the reported behaviour, but noticed a small section of code which may be better expressed differently:
<div id="themelogo"><img src="<?php echo CHILDTHEME_URI .'/functions/css/images/logo.png';?> " / ></div>
Might be better as:
<div id="themelogo"><img src="<?php echo CHILDTHEME_URI; ?>'/functions/css/images/logo.png" /></div>
Just one of those things - I am used to debugging code by reading it and trying to optimise it as I go. I presume the affected file is not available anywhere online for us to review and see the error for ourselves?
One thing that might be worth looking into is whether you are including css files from the jqueryui library. I know I have on several occasions experienced formatting issues when including that css.

Categories