Hi I have created myself a portfolio website.On the homepage in the footer on the right I would like to add four images from the portfolio page that change every time the page is loaded.Can anyone tell me how this can be achived?
On the portfolio page this is the structure for the html:
<ul class="ourHolder">
<li class="item" data-id="id-1" data-type="websites" >
<img src="img/portfolio/websites/small/1.jpg" alt="">
<div class="full"></div>
</li>
</li>
<li class="item" data-id="id-2" data-type="pdesigns">
<img src="img/portfolio/Print/small/1.jpg" alt="" />
<div class="full"></div>
</li>
<li class="item" data-id="id-3" data-type="ldesign">
<img src="img/portfolio/Logo/small/001.jpg" alt="" />
<div class="full"></div>
</li>
....
</ul>
I am using the jquery quicksand plugin to create a nice effect.I am trying to randomnly get 4 images from this page and post them on the homepage in the footer.Here is my website:
foxteam.net
Based on the information you provided, here's what you can do
//Database connection here
$sql="
SELECT image_link FROM photos
ORDER BY RAND()
LIMIT 4";
//Executing the query here
while($row = $result->fetch()){
echo '<img src="', $row['image_link'], '" />';
}
Edit: Please note that ORDER BY RAND() has some performance issues with big tables, if your "gallery" table is under 100, then I don't think you should worry about it.
Related
I'm using bootstrap framework.
i have code like this
<?php
$id=$_GET["pid"];
$query="Select * FROM product WHERE pid='$id'";
$result=mysql_query($query) or trigger_error(mysql_error());
while ($row=mysql_fetch_array($result)) {
$image=$row['image']; --->image path
$head=$row['head'];
?>
<div class="col-md-12">
<ul class="cgrid">
<li>
<a href=<?php echo "\" page.php?pid=$id \"" ;?>><?php echo $image;?>
<h4><?php echo $head ;?></h4>
</a>
</li>
</ul>
</div>
<?php
}
?>
.cgrid li {width: -webkit-calc(100% / 3);}
I have included responsive CDN as well.
Let's say i have 6 records in my database that fetches as 3 records per row.
What i want is:I want the records to be responsive ie.,i don't want it to stretch ,i want it to align it to 2 or 1 for a row as the screen size decreases. how can i achieve this ?Thanks in advance :)
<li class="list-group-item">
<a href="/user/Michael" class="thumb-sm pull-left m-r-sm">
<img src="http://www.gravatar.com/avatar/8b7a9ba3cbf958009080f6da12a55029?&d=mm&r=g?&d=mm&r=g&s=215" class="img-circle">
</a>
<a href="user/Michael" class="clear">
<strong class="block">
<?php include '/includes/connection.php';?>
<?php echo $products['Title'] ; ?>
</strong>
<?php include '/includes/connection.php';?>
<small><?php echo $products['Followers'] ; ?> Followers </small>
</a>
</li>
<li class="list-group-item">
<a href="/user/Steven" class="thumb-sm pull-left m-r-sm">
<img src="http://www.gravatar.com/avatar/a5fb2decd550cdf33cbb8ce7566ba772?&d=mm&r=g?&d=mm&r=g&s=215" class="img-circle">
</a>
<a href="/user/Steven" class="clear">
<strong class="block">
<?php include '/includes/connection.php';?>
<?php echo $products['Title'] ; ?>
</strong>
<small><?php echo $products['Followers'] ; ?> Followers</small>
</a>
</li>
do i need to manually insert for every content?
I have over 100 contents how can i automatically insert in every line like content 1 display row 1 followers and content box 2 display row 2 followers and so on
The trick here is to make a loop within the code. This means you have to generate all content from out of the database or it's not gonna work. Let me show you an example:
<ul>
<?php
$sql = "SELECT ProjectId, ProjectTitel, ProjectExpertise
FROM project";
$stmt1 = mysqli_prepare($con, $sql);
mysqli_stmt_execute($stmt1);
mysqli_stmt_bind_result($stmt1,$ProjectId,$ProjectTitel,$ProjectExpertise);
while (mysqli_stmt_fetch($stmt1)){
?>
<li class="wow fadeInLeft" data-wow-offset="30" data-wow-duration="1.5s" data-wow-delay="0.15s">
<a href="inc/elements/project.php?id=<?php echo $ProjectId; ?>" class="meer">
<img src="img/portfolio/<?php echo $ProjectId; ?>/thumbnail/1.jpg" alt="<?php echo $ProjectTitel; ?> project">
<div class="project-info">
<div class="project-details">
<h5 class="witte-text blauwe-streep-onder">
<?php echo $ProjectTitel; ?>
</h5>
<div class="details witte-text">
<?php echo $ProjectExpertise; ?>
</div>
</div>
</div>
</a>
</li>
<?php
}
?>
</ul>
I start an UL outside of the PHP code and then I start my PHP query, as you see, i select the items i need from the database. Here i create a while loop and run through my setup of the list element. As you see, i use my items within the project id link (the link is an ajax call to another page), the thumbnail needed to show the picture, the title and the expertise i used.
In your case, the while loop you need requires more than just the the title and followers. I think you need as well an userid / username so you can take in account which user it is. Your loop would now proces all on the same user, since its staticly defined in your code. Also the avatar picture is staticly defined. Let me try to resolve some for you.
<?php
include '/includes/connection.php';
$sql = "SELECT products.title, products.followers
FROM products"; // as example query
$stmt1 = mysqli_prepare($con, $sql);
mysqli_stmt_execute($stmt1);
mysqli_stmt_bind_result($stmt1,$title, $followers);
while (mysqli_stmt_fetch($stmt1)){
?>
<li class="list-group-item">
<a href="/user/Michael" class="thumb-sm pull-left m-r-sm"> <!-- make the username also to be pulled out of a database. -->
<img src="http://www.gravatar.com/avatar/8b7a9ba3cbf958009080f6da12a55029?&d=mm&r=g?&d=mm&r=g&s=215" class="img-circle">
</a> <!-- you should save the avatar link into a database as well -->
<a href="user/Michael" class="clear"> <!-- make the username also to be pulled out of a database. -->
<strong class="block">
<?php echo $title; ?>
</strong>
<small>
<?php echo $followers; ?>
Followers
</small>
</a>
</li>
<?php
}
?>
This as example. As you see, i added notitions behind some code, to explain this should also be dynamic, since it will help you Remember. being a programmer is to find shortcuts on how you display your information. Code that repeats itself constantly with a changing variable should always be looped, to make sure you dont type unneccesairy code.
Since I dont know how your database is made, i can only guess, Michaels name is probably linked to an ID in the same table your products are, which you can use then in to pull out of the database, by searching in your user table. I hope I make sense here. For instance, your products.userid should be as well in your user table as user.userid. Most likely the userid will have a name linked to it in the user table.
$sql = "SELECT products.title, products.followers, products.userid, user.userid, user.username
FROM products, user
WHERE user.userid = product.userid";
So now you have in each row as well the name of the person of who's title it is. And that you can echo out again in the code i put up. (make sure you bind the result in the same order as you pulled them up)
Writing code is all about making it easier to display your information. Loops is and stays the keyword here, as NadirDev explains.
I hope I helped you getting on the right track.
I've been stuck on this all morning and I don't think i'm that much further.
I'm trying to display a wordpress menu, I then want to display all the child pages for the parent menu, all the child pages have thumbnails and I want these to show to.
I'me trying to add the thumbnails into the ing tag in the child pages
Here's how I went the code to look
Parent menu
<nav>
<a href="#" >Sample Page 1</a>
<a href="#" >Sample Page 2</a>
</nav>
Child menu
<ul class="sample_page_1">
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
</ul>
<ul class="sample_page_2">
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
<li>
<a href="#">
<img src="image.jpg" alt="img05">
<h4>Belts</h4>
</a>
</li>
</ul>
Here's the code I have so far but it's not doing what it should, it's not displaying the images and I can't figure out how? Not even sure it's it the correct way to do it?
<ul>
<?php
$menu_name = 'shoes';
$items = wp_get_nav_menu_items($menu_name);
foreach ( $items as $item){
echo '<li>'.$item->title.'</li>';
}
?>
</ul>
Thanks
Testing this on my end yielded satisfactory results. This will affect ALL menus, so feel free to add additional logic to only target certain menus.
You'll probably have to style it to make it look a bit better, but just drop this into your functions.php file:
add_filter('walker_nav_menu_start_el', 'maiorano_generate_nav_images', 20, 4);
function maiorano_generate_nav_images($item_output, $item, $depth, $args){
if(has_post_thumbnail($item->object_id)){
$dom = new DOMDocument(); //DOM Parser because RegEx is a terrible idea
$dom->loadHTML($item_output); //Load the markup provided by the original walker
$img = $dom->createDocumentFragment(); //Create arbitrary Element
$img->appendXML(get_the_post_thumbnail($item->object_id, 'thumbnail')); //Apply image data via string
$dom->getElementsByTagName('a')->item(0)->appendChild($img); //Append the image to the link
$item_output = $dom->saveHTML(); //Replace the original output
}
return $item_output;
}
Let's say I have a model that represents products in a catalog. The model supplies the content provider (CActiveDataProvider) to the view, which in turn uses it to display a grid (CGridView).
What I need is a custom way to display this data: custom next/previous page links, custom data presentation. Something along these lines:
<div class="pagination">
<a class="arrows prev fl" href="#"><span class="icon"></span>back</a>
<a class="arrows next fr" href="#">forward <span class="icon"></span></a>
</div>
<ul class="some class">
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
<li class="item"><img src="image.jpg" width="100" height="200"/></li>
</ul>
What is the best way to do this? So far, I am considering the following:
Use CGridView, but somehow customize its output using parameters.
Create a class as a descendant of CGridView or even CBaseListView and put in the formatting logic in it.
Just do it the quick and dirty way: simply iterate over items and echo the HTML.
Or maybe I am missing something here and there's a better way?
Bootstrap is good for displaying tabular data. I use Yii with Bootstrap to generate my own data display, simply because I don't like Yii's CGridView, even though it's convenient.
Your controller function might look something like this:
public function actionList($offset=0){
$model = new CatalogModel;
$data = $model->listCatalogsItems($offset);
$this->render('list',array(
'model'=>$data,
));
}
and your model like this
public function listCatalogItems($offset=0) {
$query = SELECT *
FROM catalog
WHERE <your conditions here> LIMIT 10 OFFSET " . $offset;
$items = Yii::app()->db->createCommand($query)
->queryAll();
return $items;
}
So with your next / previous page buttons, pass the OFFSET as a value in the url, ex http://yoursite.com/site/action/2
Hope that makes sense.
I ended up creating my own class to display this data as a descendant of CWidget class.
All the logic went into the run method.
To create an editable pane in C5 I use the following between div tags so the user can simply use the content editor to add text. This works quite well:
<div class="myWrapper">
<?php
$a = new Area('WelcomeText');
$a->display($c);
?>
</div>
But what do I do when the mark-up is a little complicated? I would like to get user to update the 2 images and respective links themselves. Eg picture: http://i48.tinypic.com/4jma8p.png
What is the easiest way for non-code literate users to do this?
<ul class="Gal_2">
<li class="Frst">
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG2.jpg" width="224" height="150" alt="Island Rab" align="left" />
</a>
</li>
<li>
<a href="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" rel="group">
<img src="<?php echo $this->getThemePath(); ?>/Images/TEMP_IMG1.jpg" width="224" height="150" alt="Island Rab - Lopar beach" align="right" />
</a>
</li>
</ul>
Thanks in advance...
PC
Create a custom block with the free Designer Content addon: http://www.concrete5.org/marketplace/addons/designer-content
The block you create will have two image fields that link to other pages, and then use "static html" fields to surround the images with your <ul> and <li> tags.
This is actually a perfect use case for Designer Content, so it should be fairly self-explanatory. But if you run into problems, post a message to the support forum (or just email me directly at concrete#jordanlev.com).