I am trying to pull content from specific categories and have them appear on the homepage along with an image that is pulled from the custom field for that entry. Everything looks like it is working ok.. and the second entry works as it should, however with the first entry, only the image links back to the post, the title and read more link are not recognized by the mouse as links. Looking at the html, it seems like the php is printing everything as it should, so I figured it must be a CSS problem, but I cleared all the relevant styles and the links still are not recognized.
Here is the php I have for the home page
<?php
// Show custom fields from Food Category
query_posts('showposts=2&cat=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// This is added to show <!--more--> on home page
global $more;
$more = 0;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php
$values = get_post_custom_values("food_thumb"); echo $values[0]; ?>" alt="" /></a></div>
<div class="span-3">
<p class="smallTitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></p></div>
<div class="span-1 theDate">
<?php the_time('m.d.y') ?>
</div>
<div class="span-4">
<?php the_content('<span class="moretext">Read more...</span>'); ?>
</div>
<?php endwhile; ?>
The HTML output looks fine..
<div class="span-4 fixed-height-sidebar">
<div class="smallthumb"><img src="foodthumb.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=24" rel="bookmark">
Food Test 1</a></p></div>
<div class="span-1 theDate">
07.16.09</div>
<div class="span-4 fixed-height-sidebar">
<p>Mmmmmmmm. Food. Aliquam libero libero, luctus ut tristique pulvinar, euismod at diam. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, <span class="moretext">Read more…</span></p>
</div>
<div class="smallthumb"><img src="http://.com/wp-content/uploads/2009/07/foodthumb2.jpg" alt="" /></div>
<div class="span-3">
<p class="smallTitle"><a href="http://.com/?p=3" rel="bookmark">
Food test page -2</a></p></div>
<div class="span-1 theDate">
07.12.09</div>
<div class="span-4">
<p>“Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec odio vitae nunc euismod vulputate. Integer aliquam ullamcorper tortor, nec suscipit magna viverra in. Nunc urna neque, dapibus id congue et, dignissim vitae augue. Aliquam et bibendum lacus. <span class="moretext">Read more…</span></p>
</div>
</div>
Here is a screenshot to help explain my problem...
alt text http://zacharydesigns.com/temp/wpsample.jpg
I took your HTML output, and pasted it into a blank HTML page (adding the HTML/HEAD/BODY tags). Both links rendered and worked correctly. I tested in Firefox and IE. From the looks of it, your HTML output is just fine.
Any chance you could post the output of the entire page?
--Adam
What does fixed-height-sidebar do in the CSS?
That's the only difference between the two entries.
Related
I am new to NextJs/ReactJs and I was trying to implement the Responsive slide with Swiperjs which is available in codepen.io
Here is the link to codepen.
Responsive slider timeline with Swiper
Below are my steps I carried out;
Installed JQuery (npm install)
Imported both swiper.min.css and swiper.min.js CDNs to my _Document.js file
Added the css files to Globals.css for time being
Created a TimelineComponent.js to have the swiper component separately.
imported TimelineComponent.js in the index.js
When I run the project it nicely shows you the expected output as below.
But when I resize my browser it behaves abnormally like below
import React, { useEffect } from 'react';
import $ from 'jquery';
function TimeLineComponent() {
function operateTimeline() {
var timelineSwiper = new Swiper('.timeline .swiper-container', {
direction: 'vertical',
loop: false,
speed: 1600,
pagination: '.swiper-pagination',
paginationBulletRender: function (swiper, index, className) {
var year = document
.querySelectorAll('.swiper-slide')
[index].getAttribute('data-year');
return '<span class="' + className + '">' + year + '</span>';
},
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
breakpoints: {
768: {
direction: 'horizontal',
},
},
});
}
useEffect(() => {
$(window).on('load resize', operateTimeline);
operateTimeline();
return () => {
$(window).off('load resize');
};
}, []);
return (
<div className="timeline-container">
<div className="timeline">
<div className="swiper-container">
<div className="swiper-wrapper">
<div
className="swiper-slide"
style={{
backgroundImage: "url('https://unsplash.it/1920/500?image=11')",
}}
data-year="2011"
>
<div className="swiper-slide-content">
<span className="timeline-year">2011</span>
<h4 className="timeline-title">Our nice super title</h4>
<p className="timeline-text">
Lorem ipsum dolor site amet, consectetur adipscing elit, sed
do eisumod tempor incididut ut labore et dolore magna aliqua.
Ut enim ad mimim venjam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div
className="swiper-slide"
style={{
backgroundImage: "url('https://unsplash.it/1920/500?image=12')",
}}
data-year="2012"
>
<div className="swiper-slide-content">
<span className="timeline-year">2012</span>
<h4 className="timeline-title">Our nice super title</h4>
<p className="timeline-text">
Lorem ipsum dolor site amet, consectetur adipscing elit, sed
do eisumod tempor incididut ut labore et dolore magna aliqua.
Ut enim ad mimim venjam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<div className="swiper-button-prev"></div>
<div className="swiper-button-next"></div>
<div className="swiper-pagination"></div>
</div>
</div>
</div>
);
}
export default TimeLineComponent;
Error can be replicated in the above codepen example as well. Most probably this is with the styling
Your help is much appreciated.
I have a modal whose content can be toggled between two different components. It works, but the transition is brutal since the wrapper immediately takes the width of its content.
How to animate this properly? I thought about transform:scale but it did not work.
Here is the code, as well as a sandbox:
import React, {useState} from "react";
import styled from "styled-components"
const Wrapper = styled.div`
background:gainsboro;
width:100%;
height:100%;
border:1px solid lightgrey;
`
const Content1 = () => (
<div>
Lorizzle ipsizzle dolor sit amet, ass adipiscing elizzle. Ass
izzle velizzle, volutpizzle, suscipit quizzle, we gonna chung
vizzle, arcu. Pellentesque egizzle boom shackalack. Fo shizzle
my nizzle erizzle. Pimpin' crunk dolor dapibus rizzle tempizzle
sizzle. Maurizzle fo shizzle mah nizzle fo rizzle, mah home
g-dizzle nibh daahng dawg go to hizzle. Shizznit izzle tortor.
Pellentesque sizzle rhoncizzle shizzlin dizzle. In hizzle
habitasse platea dictumst. For sure fo. Break it down izzle
urna, pretizzle eu, mattis go to hizzle, eleifend black, nunc.
Daahng dawg suscipit. Tellivizzle yo mamma velit sed check
out this.
</div>
)
const Content2 = () => (
<div>
very short content
</div>
)
export default function App() {
const [toggle, setToggle] = useState(false)
return (
<Wrapper>
{toggle ? <Content1 /> : <Content2/>}
<button onClick={()=> setToggle(!toggle)}>toggle content</button>
</Wrapper>
);
}
https://codesandbox.io/s/still-smoke-5ikkg?file=/src/App.js
Thanks!
you can use react-fade-in, not the best, but a fast solution
https://www.npmjs.com/package/react-fade-in
I have a slider and I have added it in my wordpress project and its working fine as per my expectation.
How I did add slider without plugin
I have entered following code in the following files..
/*.........HEADER.PHP......*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
/*............... FOOTER.PHP ...........*/
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
/*.................... INDEX.PHP ........................*/
<div class="wrapper">
<div class="cont col-12 col-m-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active col-12">
<img src="<?php bloginfo('stylesheet_directory')? >/images/demo/slider/sdslider-1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis. </p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic3.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic2.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic4.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified col-12">
<li data-target="#myCarousel" data-slide-to="0" class="active">College Overview</li>
<li data-target="#myCarousel" data-slide-to="1">Our Collaborators</li>
<li data-target="#myCarousel" data-slide-to="2">Workshops</li>
<li data-target="#myCarousel" data-slide-to="3">Guest Lectures</li>
<li data-target="#myCarousel" data-slide-to="4">Industrial Visits</li>
</ul>
</div><!-- End Carousel -->
</div>
</div>
So by adding these code in php files slider is working fine.
So whats the problem?
Problem is that code which I have entered in index.php that code I wants to add in wordpress page. Because if I leave my code in index.php then In future I have to use filezila to upload new images, So I wants to add html in wordpress page instead of index.php.
I tried to add code of index.php into wordpress page But that method is not working, don't know what's the reason. I tried to find solution but didn't get sufficient answer.
This is because you can't use php code directly in Wordpress. Simple way to do this is to place your javascript and css code in header.php or footer.php file of your Wordpress theme.
Best is to keep all your css files and code in header.php and javascript files and code in footer.php.
/*....WP-Content/Themes/Selected-Theme/header.php ...*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
/*....WP-Content/Themes/Selected-Theme/footer.php ...*/
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
Then in your carousel code update slider [image src=""] with full url according to your live website like this:
<img src="http://YOUR-WP-WEBSITE/wp-content/themes/YOUR-THEME-DIRECTORY/images/demo/slider/sdslider-1.jpg" width="100%">
After updating your images path in carousel code you can paste it in any page through WP-Admin.
Note: Wordpress also adds paragraph "p" tags automatically this can produce an issue for bootstrap slider. If this happens then you need to place below code in functions.php file of your theme. Taken from here
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
I have tried many tutorials for custom header support but i am able to add up the support but i am not able to change header..Down here is Index.php
<div id="page">
<div id="header"><h1>Super Plain</h1></div>
<div id="nav">
<ul>
<?php wp_list_pages('title_li=');?>
</ul>
</div>
<div id="main">
<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div><!--/ #content -->
<div id="sidebar">
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare sodales porta. Mauris laoreet tempor luctus. Nunc consequat </p>
</div><!--/ #sidebar -->
</div><!--/ #main -->
</div><!--/ #page -->
here is my css
#header{
background-color:#c1d9c5;
color:#405952;
padding:55px;
}
#header h1{
margin:0;
font-size:72px;
font-weight:normal;
}
and here is my function.php file
<?php
$args = array(
'width' => 980,`enter code here`
'height' => 60,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );
?>
Why you are try to enable custom header when you can change your header image easily by editing CSS stylesheet?
does anyone have an idea on the css that would turn the following in to a linked block?
<div class="one_third">
<?php
//The Query
query_posts('posts_per_page=1&cat=15');
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<small><?php the_time('F jS, Y') ?></small>
<?php if ( has_post_thumbnail()) the_post_thumbnail('medium-thumbnail'); ?>
<div class="entry">
<p><a style="display: block;" rel="bookmark" href="<?php the_permalink(); ?>"><?php echo strip_tags(get_the_excerpt());?></a></p>
Sorry, no posts matched your criteria.
Thanks
#Sotiris
Sorry for the late reply only get to work on this site after working hours.
<div class="one_third">
<h2>News Letters Suday test post</h2>
<small>May 15th, 2011</small>
<div class="thumbnail"><img width="190" height="140" src="http://localhost:8888/edinburghshiatsuclinic/wp-content/uploads/2011/05/front-page3-200x147.jpg" class="attachment-medium-thumbnail wp-post-image" alt="front-page3" title="front-page3" /></div> <div class="entry">
<p><a style="display: block;" rel="bookmark" href="http://localhost:8888/edinburghshiatsuclinic/news-offers/news-letters-suday-test-post/.">Suspendisse tempus semper dignissim. Pellentesque ac tempus ligula. Aenean eu nisi eu mi consequat vehicula venenatis et leo. Praesent ornare aliquam ultricies. Nunc justo tellus, varius quis viverra a, scelerisque non justo. Suspendisse leo turpis, elementum in dignissim sed, facilisis … Continue reading →</a></p>
</div>
</div>
Well, based on the code you posted, everything in the div is a link already. If you want clicking anywhere on the div to work like a link, you'll need to use Javascript--can't really wrap a block-level element (<div>) in an inline element (<a>).
Here is a jQuery way to do that:
$('#one_third').click(
function(){
$(this).find('h2 a').click();
});
It just says "when you click on the div with id 'one_third', look for the element 'h2 a' in it and trigger a click on that element. (I narrowed it down to just one of the links, if you didn't do that, if you just said ('a'), it would click all the links. Which could be interesting as well.)