I'm creating a movie database website. What I'm trying to achieve is that when a user clicks on one of the movies in the Latest movies collection (shown in the picture) the main movie banner (currently displaying "Transformers", show in the picture) will update and display the selected movie's title and poster, using PHP.
Picture showing the Main Movie and Latest Movie
Main movie code:
<!-- SPECIAL MOVIE SECTION -->
<div class="section">
<div class="hero-slide-item">
<img src="./images/transformer-banner.jpg" alt="">
<div class="overlay"></div>
<div class="hero-slide-item-content">
<div class="item-content-wraper">
<div class="item-content-title">
Transformer
</div>
<div class="movie-infos">
<div class="movie-info">
<i class="bx bxs-star"></i>
<span>9.5</span>
</div>
<div class="movie-info">
<i class="bx bxs-time"></i>
<span>120 mins</span>
</div>
<div class="movie-info">
<span>HD</span>
</div>
<div class="movie-info">
<span>16+</span>
</div>
</div>
<div class="item-content-description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, possimus eius. Deserunt non odit, cum vero reprehenderit laudantium odio vitae autem quam, incidunt molestias ratione mollitia accusantium, facere ab suscipit.
</div>
<div class="item-action">
<a href="#" class="btn btn-hover">
<i class="bx bxs-right-arrow"></i>
<span>Watch now</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- END SPECIAL MOVIE SECTION -->
Latest movie code:
<!-- MOVIE ITEM -->
<a href="#" class="movie-item">
<img src="<?php echo $row ["PosterLink"]; ?>" alt="">
<div class="movie-item-content">
<div class="movie-item-title">
<?php echo $row ["Title"]?>
</div>
<div class="movie-infos">
<div class="movie-info">
<i class="bx bxs-star"></i>
<span><?php echo $rating?></span>
</div>
<div class="movie-info">
<i class="bx bxs-time"></i>
<span><?php echo $runTime?></span>
</div>
<div class="movie-info">
<span>Director: <?php echo $director?></span>
</div>
</div>
</div>
</a>
<!-- END MOVIE ITEM -->
there
If you want to use only PHP, then you can pass some parameter to server when a user clicks on any movies in latest movie section so,
add some unique query parameter in anchor tag where user will be redirected when he clicks on a movie.
<your code>
then on server side get movie_id using $_GET['movie_id'] and fetch data of that movie,
then you need to make SPECIAL MOVIE SECTION also dynamic,
store movie data in any variable and use that variable in rendering SPECIAL MOVIE SECTION.
Let me know if you don't understand anything.
Related
The html inside the main tag is not displaying but when I inspect the code, the html is there. This happens after I added the get_header function which gets a new header that is only for the front-page (other pages will get the normal header). The header and the footer are displaying without issues, only some listed items in the hero section aren't displaying either. I'm new to Wordpress and PHP, what is the best way to fix this?
My header-new.php code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Title</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<?php wp_head();?>
</head>
<body>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<!-- ======= Header ======= -->
<header id="header" class="d-flex align-items-center">
<div id="navbar-container">
<div class="logo d-block d-lg-none">
<img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Maite Richert Logo" class="img-fluid">
</div>
<nav class="nav-menu d-none d-lg-block">
<ul class="nav-inner">
<li class="active">Meet Me</li>
<li class="drop-down">Programs
<ul>
<li>One-to-one Coaching</li>
<li>Posing Lessons</li>
</ul>
</li>
<li class="nav-logo"><img src="<?php bloginfo('template_directory');?>/assets/img/dark-logo.png" alt="Logo" class="img-fluid logo-image"></li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<main id="main">
My footer.php code:
</main><!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="footer-top">
<div class="container">
<div class="social-links">
<img src="<?php bloginfo('template_directory');?>/assets/img/tiktok.png" alt="TikTok Icon" class="tiktok">
<i class="bx bxl-instagram"></i>
<i class='bx bxl-youtube'></i></i>
</div>
</div>
</div>
<div class="container footer-bottom clearfix">
<div class="copyright">
© <strong><span>Maite Richert</span></strong>. All Rights Reserved. 2020
</div>
</div>
</footer><!-- End Footer -->
<i class="icofont-simple-up"></i>
<?php wp_footer();?>
</body>
</html>
And my front-page.php code:
<!-- ======= About Us Section ======= -->
<section id="about" class="about">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Meet Me</h2>
</div>
<div class="row">
<div class="col-lg-6" data-aos="fade-right">
<div class="image">
<img src="<?php bloginfo('template_directory');?>/assets/img/maite.jpg" class="img-fluid" alt="Fitness Coach">
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="content pt-4 pt-lg-0 pl-0 pl-lg-3 ">
<h3>Hi, I'm Maite</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<ul>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><i class="bx bx-check"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>
</div>
</section><!-- End About Us Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title" data-aos="fade-up">
<h2>Programs</h2>
</div>
<div class="row" style="margin-bottom: 10vh;">
<div class="col-lg-6 order-2 order-lg-1 services-box">
<div class="icon-box mt-5 mt-lg-0" data-aos="fade-up">
<i class="icofont-muscle-weight"></i>
<h4>One-to-one coaching</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
<div class="icon-box mt-5" data-aos="fade-up" data-aos-delay="100">
<i class="icofont-trophy"></i>
<h4>Posing Coach</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="learn-more-btn">Learn More</div>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2" data-aos="fade-left" data-aos-delay="100"><img class="img-fluid" src="<?php bloginfo('template_directory');?>/assets/img/services.jpg" alt="Fitnees posing"></div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Why Us Section ======= -->
<section id="why-us" class="why-us">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-1 d-flex flex-column justify-content-center align-items-stretch">
<div class="content" data-aos="fade-up">
<h3><b>Why should you choose me?</b></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>How can you help you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Will this work for you?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h4>Aren't all the personal trainers the same?</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</section><!-- End Why Us Section -->
<!-- ======= Sponsors Section ======= -->
<section id="sponsors" class="sponsors">
<div class="container">
<h3>Sponsors</h3>
<div class="row sponsor-img-container">
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="400">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-5-1.png" id="womens-best" class="img-fluid" alt="Women's Best">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="500">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-6.png" class="img-fluid" alt="Ryderwear">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="300">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-4-1.png" id="wbff" class="img-fluid" alt="WBFF">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="100">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-2.png" class="img-fluid" alt="FitGriff">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in" data-aos-delay="200">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-3-1.png" id="f4" class="img-fluid" alt="Factory 4">
</div>
<div class="col-lg-2 col-md-4 col-6" data-aos="zoom-in">
<img src="<?php bloginfo('template_directory');?>/assets/img/sponsors/sponsor-1.png" class="img-fluid" alt="Basic Fit">
</div>
</div>
</div>
</section><!-- End Sponsors Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact section-bg">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>If you are interested in my services or if you have any questions, don't hesitate to contact me!</p>
</div>
<div class="row">
<div class="col-lg-8 mt-5 mt-lg-0 form-box">
<form action="forms/contact.php" method="post" role="form" class="php-email-form" data-aos="fade-left">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
<p>So I can get to know you better.</p>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
<p>Only to reply you back. No marketing.</p>
</div>
</div>
<div class="form-group" style="padding-bottom: 2rem;">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center form-btn-container"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section><!-- End Contact Section -->
<?php get_footer();?>
This is not a direct answer to your question, but it may solve your problem, so I hope the answer is helpful for you.
If you only want to add a hero section to your front page, I think you do not need a page template and header template only for this one case. You could add a if clause inside of your default header.php checking if you are on frontpage. If it is true, your hero section is being inserted:
<body>
<?php if (is_front_page()) { ?>
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<img src ="<?php bloginfo('template_directory');?>/assets/img/light-logo.png" alt="Logo" class="img-fluid hero-logo" data-aos="zoom-in">
<ul data-aos="fade-up">
<li>Listed Item 1</li>
<li>Listed Item 2</li>
<li>Listed Item 3</li>
<li>Listed Item 4</li>
</ul>
<a data-aos="fade-up" href="#about" class="btn-get-started scrollto">Learn More</a>
</div>
</section><!-- End Hero -->
<?php } ?>
.
.
.
This would be my solution. Does it work for you? If not, try chaning the content of your hero-container to check if something is wrong with this code. Just add a <p>test</p> to see that the if clause is working and that only the frontpage is outputting the paragraph with "test".
If you want to have a different page template (maybe because there are more pages you want to show the hero section), make sure you use the right file names to make wordpress template hierarchy work: https://developer.wordpress.org/themes/basics/template-hierarchy/
Page Template can be created with copying the page.php, renaming it page-frontpage.php and adding /* Template Name: Frontpage */ at the top of it. Go to your wordpress backend and edit your frontpage. On the right side under "page attributes" select the created page template.
Inside of your page-frontpage.php change the get_header() function to:
get_header('frontpage');
Then create a copy of your header.php and name it "header-frontpage.php".
Now every page that has the "frontpage" page template, will use the header with the name "frontpage". In the header-frontpage.php you make your changes.
For me a template only makes sense, if it is applied to more pages. For one case, you can do more easy and faster using an if clause.
Hope this can help you.
I am using the bootstrap framework for layout on my system. I want to arrange the layout of the page like this(See image below)
But I am facing a challenge. My code is showing this (See image below)
I need the Login forum section to go to the right like on the first picture that i have uploaded.
This is my code
<?php if($topics) : ?>
<p id="topics">
<div class="row">
<?php foreach ($topics as $topic) : ?>
<p class="topic">
<div class="row">
<div class="col">
</div>
<div class="col-md-5">
<div class="topic-content pull-right">
<h3><?php echo $topic['title']; ?></h3>
<div class="topic-info">
<?php echo $topic['name']; ?> >>
<?php echo $topic['username']; ?> >>
Posted on: <?php echo formatDate($topic['create_date']); ?>
<span class="badge pull-right"><?php echo replyCount($topic['id']); ?></span>
</div>
</div>
</div>
</div>
</p>
<?php endforeach; ?>
</p>
<?php else : ?>
<p>No Topics to Display.</p>
<?php endif; ?>
<div class="col-md-4" align="pull-right">
<div class="sidebar">
<div class="block">
<h3>Login Form</h3>
<?php if(isLoggedIn()) : ?>
<div class="userdata">
Logged in as <?php echo getUser()['username']; ?>
</div>
<br />
<form role="form" method="post" action="logout.php">
<input type="submit" name="do_logout" class="btn btn-default" value="Log Out" />
<hr>
<h4>All Topics</h4>
<h4>Create Topic</h4>
</form>
<?php else : ?>
<form role="form" method="post" action="login.php">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" placeholder="Enter Username" />
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-control" placeholder="password" />
</div>
<button name="do_login" type="submit" class="btn btn-primary">Login</button> <a class="btn btn-default" href="register.php">Create Account</a>
</form>
<?php endif; ?>
</div>
<div class="block">
<h3>Categories</h3>
<div class="list-group">
All topics <span class="badge pull-right"><?php echo totalPostCount() ;?></span>
<?php foreach(getCategories() as $category) : ?>
<a href="topics.php?category=<?php echo $category['id']; ?>" class="list-group-item <?php echo is_active($category['id']); ?>">
<?php echo $category['name']; ?>
<span class="badge pull-right">
<?php echo postCountByCategory($category['id']) ;?>
</span>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<hr>
<h3>Forum Statistics</h3>
<p>
<h6>Total Number of Users: <strong><?php echo $totalUsers; ?></strong></li>
<h6>Total Number of Topics: <strong><?php echo $totalTopics; ?></strong></li>
<h6>Total Number of Categories: <strong><?php echo $totalCategories; ?></strong></li>
</ul>
There seems to be plenty of unnecessary rows and <p> tags within other <p> tags. It needs a restructure to be honest. It is best practice not to wrap divs inside <p> tags as they shouldn't really be used as a wrapper.
You want to separate the 2 columns into 2 separate Bootstrap cols which should be wrapped inside a row class.
For example:
<div class="row">
<div class="col-xs-12 col-sm-8">
<p>All your forum info here etc.</p>
</div>
<div class="col-xs-12 col-sm-4">
*Login Form Here*
*Categories Here*
</div>
</div>
The columns above will separate them into 66.66666667% by 33.33333333% width columns on desktop and then both full width (100%) on smaller devices.
you can simply use the bootstrap grid Grid system to achieve this task. Please checkout the official documentation through this link...
https://getbootstrap.com/docs/4.1/layout/grid/
However, I created a sample layout that I think fit to your requirement.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>sample web page</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
.left-block{
width:100%;
height:500px;
padding: 20px;
}
.right-block{
width:100%;
padding: 20px;
height:500px;
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="left-block">
<h1>sample content</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper nisl ut sodales tincidunt. Praesent tristique lobortis tincidunt. Cras aliquet, lectus ut facilisis tempor, nulla felis porta sem, quis pulvinar lacus justo eget sapien. Integer dapibus bibendum sodales. Sed semper sagittis ex, et suscipit odio luctus vel. Fusce laoreet a sapien vitae mattis. Quisque ligula massa, sagittis vel odio vel, hendrerit iaculis leo. Aliquam erat volutpat. Fusce mollis, augue vel egestas tristique, nunc ligula placerat erat, sed venenatis elit ex et nulla. </p>
</div>
</div>
<div class="col-lg-4">
<div class="right-block">
<h2>Login Section</h2>
<hr>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
still you have any problem, feel free to add a comment below...
Dont put structural divs inside a <p> tag! Try this:
<div class="container">
<div class="row">
<div class="col-md-4">
This is one third of the page wide (4/12)
</div>
<div class="col-md-8">
This is two thirds of the page wide (8/12)
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> this is where 'normalization' text should go </p>
</div>
<div class="col-md-4">
<p> this is where the form goes </p>
</div>
</div>
</div>
Try above code. This is an example of basic bootstrap grid layout. The first define the page as '12' - the remaining divs inside this must add up to 12 also, this example is 8 + 4 ( 2 columns ) but can also have 3 4+4+4 and so on.
You can use the following example to arrange the web page layout with Bootstrap:
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> Your Left area put here </p>
</div>
<div class="col-md-4">
<p> Your right area Put here </p>
</div>
</div>
</div
I am fairly new to HTML with some PHP thrown in for MSSQL queries, but I would like to add some additional functionality to a page I am building that may need some jquery.
My question: How can I have the Primary Panel, shown in screen shot below, show/appear when I hover over 'View Details' of the 'Jobs Today' panel and hide when the cursor moves from 'View Details'? At the moment its always visible. I have included some code snippets to show how each section is built.
Build Jobs panel:
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge"><?php echo $jobCount ?></div>
<div>Jobs Today</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</div>
</div>
Build Primary Panel (yet to be populated with job info)
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
Primary Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
As always, thanks in advance. Hopefully I haven't missed anything :)
EDIT: I now have the hide working. The details panel is shown when the page first loads, I hover over the 'View Details' and when I leave the panel disappears. What am I missing. Here is the code as is now:
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">
<?php echo $jobCount ?>
</div>
<div>Jobs Today</div>
</div>
</div>
</div>
<div id="jobs-wrapper">
<a href="#">
<div class="panel-footer" data-panel="job-details">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i> </span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
<div class="col-lg-4">
<div class="panel-primary-jobs" id="job-details">
<div class="panel-heading">
Jobs Today
</div>
<div class="panel-body">
<p>This is where Job info will go</p>
</div>
<div class="panel-footer">
Close
</div>
</div>
</div>
</div>
and the jquery
$('#jobs-wrapper a').mouseenter(function(e) {
if ($(this).data('panel'))
{
$('.panel-primary-jobs').hide();
$('#' + $(this).data('panel')).show();
}
});
$('#jobs-wrapper').mouseleave(function()
{
$('.panel-primary-jobs').hide();
}
);
First, add some classes to tell apart the .header from the .details:
<div class="panel panel-primary header">...</div>
<div class="panel panel-primary details hidden">...</div>
And then:
$('.primary-panel .panel-footer')
.hover( () => $('.details').show(), () => $('.details').hide())
The first function is the hover in handler and the second one, the hover out
The goal is to show the 3 most recent posts from a company page on our website, I created the graph url with the information:
https://graph.facebook.com/{pagenamehere}/posts?fields=full_picture,picture,link,message&limit=3&access_token={accesstoken|secret}
This pulls in everything correctly in the following JSON format:
data:
0:
full_picture: "content here"
picture: "content here"
link: "content here"
message: "content here"
id: "content here"
1:
full_picture: "content here"
picture: "content here"
link: "content here"
message: "content here"
id: "content here"
2:
full_picture: "content here"
picture: "content here"
link: "content here"
message: "content here"
id: "content here"
Tried pulling it in with the following code:
<?php
query_posts('&showposts=-1&order=ASC');
while (have_posts()) : the_post();
$json = file_get_contents( 'https://graph.facebook.com/{pagenamehere}/posts?fields=full_picture,picture,link,message&limit=3&access_token={accesstoken|secret}');
$json_data = json_decode($json, false);
echo $json_data->data[0]->total_count;
echo '<br>';
endwhile;
?>
I need to be able to loop through this and put them in three different divs in the format below in order to apply custom css to the posts:
<div class="col-sm-4">
<div class="stay-connected-inner">
<div class="stay-connected-info">
<div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
<div class="stay-connected-right">
<h5>Page Title</h5>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p>
</div>
</div>
<div class="stay-connected-fig">
<img src="" alt="">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="stay-connected-inner">
<div class="stay-connected-info">
<div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
<div class="stay-connected-right">
<h5>Page Title</h5>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p>
</div>
</div>
<div class="stay-connected-fig">
<img src="" alt="">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="stay-connected-inner">
<div class="stay-connected-info">
<div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
<div class="stay-connected-right">
<h5>Page Title</h5>
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.</p>
</div>
</div>
<div class="stay-connected-fig">
<img src="" alt="">
</div>
</div>
</div>
Referenced tutorial here: How to embed a Facebook page's feed into my website
My site is in WordPress and am not familiar with asp.net.
You could do something like this:
foreach($json_data->data as $post){
echo
'<div class="col-sm-4">
<div class="stay-connected-inner">
<div class="stay-connected-info">
<div class="stay-connected-left">
<i class="fa fa-facebook"></i>
</div>
<div class="stay-connected-right">
<h5>full_picture</h5>
<p>' . $post['message'] . '</p>
</div>
</div>
<div class="stay-connected-fig">
<img src="' . $post['full_picture'] . '" alt="">
</div>
</div>
</div>';
}
This will output 3 columns if there are 3 elements in the array. The $post in the foreach being each element of the array.
I have responsive template which working well.
I want to convert it to theme wordpress.
Inside the template there is gallery contains image and description and title link.
Since the gallery build in the template and everything(responsive) work well.
I want to embedded/convert the gallery to theme as a post, add link to
Gallery.js and generate the tag html as it seems in the template.
The source code of the template:
<!--orginal---------->
<div class="main">
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li>
<div class="box-1">
<img src="images/page1-img1.jpg" alt="" /> bora-bora
<span>from $458</span>
<p>Praesent vestibulum aenean
<br>nonummy hendrerit mauris.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
I need to generate only the :
<img src="images/page1-img1.jpg" alt="" /> bora-bora
<span>from $458</span>
<p>Praesent vestibulum aenean
<br>nonummy hendrerit mauris.</p>
I create new post.
in the title I write: BORA-BORA
in the content post I add image from the Media
under the image I add the description image" Praesent vestibulum aenean
nonummy hendrerit mauris.".
in the Excpert I write: from $458
and after this I add code which generate the html tag gallery as you can see below:
<div class="main">
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel"><ul>
<?php $hot_deals = new WP_Query('showposts=2&category_name=hot_deals'); ?>
<?php if($hot_deals->have_posts()) : ?>
<?php while($hot_deals->have_posts()) : $hot_deals->the_post(); ?>
<li>
<div class="box-1">
<?php the_content(); ?><?php the_title(); ?>
<span><?php the_excerpt(); ?></span>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul></div>
</div>
</div>
the resualt are close but it is not working becose I need :
to extract the <img /> from <p><a><img /></p></a>.
to take out the <p> from <span><p>FROM $458</p></span>.
Many thanks How can I do that ?
<div class="main">
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel"><ul>
<li>
<div class="box-1">
<p><a href="http://127.0.0.1/www/www1/wordpress/wordpressEng/wp-content/uploads/2012/09/page1-img2.jpg">
<img class="alignnone size-full wp-image-82" title="page1-img2" src="http://127.0.0.1/www/www1/wordpress/wordpressEng/wp-content/uploads/2012/09/page1-img2.jpg" alt="" width="219" height="124" />
</a>
</p>
<p>Praesent vestibulum aenean<br />
nonummy hendrerit mauris.</p>
bora-bora
<span><p>FROM $458</p></span>
</div>
</li>
</div>
</div>
</div>
You are not extracting, since you are just displaying the_content(). The only way you could do that without altering theme is that you just have to go to the HTML tab where you are editing your post content and delete the <a></a> tag.
But if you can/want to edit the theme you could add a custom meta box with image upload field and then upload image there and not into the content. That way you would have full control over it.