So I am currently using the following script (effect 3):
http://tympanus.net/codrops/2013/06/18/caption-hover-effects/
I am trying to make these boxes show on my blog content listings, which currently uses the content feature. I have included the call for the CSS and JS of the demo file for this effect;
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
I have added this to the index.php file rather than the header, as I only need it on this page. Currently, I have this so only the featured image/embed shows for the blog listing. I removed any wordpress title and excerpt tags as I wanted to focus on getting this to work before adding in the content. So, currently, it's just a copy of the code used in the demo combined with the code for the blog listing itself. Shown here is the image post.
<ul class="grid cs-style-3">
<li>
<figure>
<?php
}
if ($format === 'image') { ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
</figure>
This is where I am getting a little bit lost and maybe this is down to too many scripts on the same page, as the blog listing itself uses webkit coding to display. But I have copied all the code exactly as it was in the demo, minus the image section which is my blog code instead. But no matter what I try it just shows without the effect and under the image. I am completely lost as to what to do here and out of ideas.
I have tried searching, but nothing has helped. So I am thinking this is more down to the coding I already have for the theme not playing nicely with this code. I have managed to add additional sections in the same way, but not get extra code to work with the themes functions itself.
You can see the page I am referring to and where it has gone wrong here, under any of the images:
http://outside.hobhob.uk/test/blog/
Happy to provide anything else extra.
Full code: http://hostcode.sourceforge.net/view/6152
The code you posted has some problems, try replacing it with this. I just removed the brachet I was talking about in the comment, and added the endif;s at the end of the block. I still have no idea if the $format variable is correctly populated elsewhere in your code, so there may be other issues.
<figure>
<?php if ($format === 'image') : ?>
<?php if (has_post_thumbnail()) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="post-image" >
<?php the_post_thumbnail(); ?>
</a>
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
Take a look
</figcaption>
<?php endif; ?>
<?php endif; ?>
</figure>
Related
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
I am running a Wordpress site and created a custom theme.
Now I'm stuck with optimizing it for Google PageSpeed. It shows the following for the Mobile page:
Consider Fixing: Only about 63% of the final above-the-fold content could be rendered with the full HTML response
This appears since I've included the Featured Image above my posts on the index.php with the code:
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
How can I fix the issue? It doesn't seems to me that I'm loading something like a sidebar before the featured image, apart from the logo of the site. For a deeper comprehension, here the complete code of my index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<p>
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
</p>
<h1>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<p>
<?php the_content(__(' <br /> <br /> Weiterlesen →')); ?>
</p>
<hr>
<?php endwhile; else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>
<?php if (show_posts_nav()) : ?>
<div class="pagination">
<?php echo paginate_links(); ?>
</div>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Can someone help me with this issue? What am I doing wrong?
As someone who holds a 100/100 pagespeed score, I can tell you that over-optimizing for speed is probably not worth the frustrations you're going to run into fixing the problems. Case in point, run a Pagespeed test on Wikipedia or YouTube. These are top sites and YouTube only has a score of 50, for example. The real reason you'd want to improve these numbers is to provide a better experience to users because they don't have to wait for the page to load.
Your above the fold content is simply what is allowed to be displayed while waiting on additional resources to load:
Your page has 4 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
/…-includes/js/jquery/jquery.js?ver=1.11.3
/…s/jquery/jquery-migrate.min.js?ver=1.2.1
/…ghtbox/jquery.touchwipe.min.js?ver=1.4.6
/…ightbox/jquery.lightbox.min.js?ver=1.4.6
Optimize CSS Delivery of the following:
/wp-content/themes/1000PB/style.css
/…ghtbox/styles/lightbox.min.css?ver=1.4.6
Your efforts are best spent optimizing the delivery of these, (using async or defer for scripts and stylesheets) since those will lower your overall pagespeed score and hurt your search engine rankings.
To answer your question, though, you can inspect elements that are towards the top of your page, generally anything that can be seen without scrolling down, to see their css. Example:
img.attachment-post-thumbnail {
border: 1px solid #e6e6e6;
padding: 3px;
}
So that stuff is best included in an inline <style> element in the header, as then the browser won't have to wait for style.css to load before it can show the page to users.
If you need help with hacking your Wordpress theme to do certain things to make it faster, such as minifying scripts, making scripts asynchronous, using defer, disabling emoji, and so on, just ask in comments or submit another question and we will be glad to help.
I recommend testing on other sites to get a better idea of what's going on. I recommend Webpagetest.org and using a Waterfall chart will tell you which resources are taking the longest:
You can also use tools to help with this:
CSS Tricks: Authoring Critical Above-the-Fold CSS
Critical-path (Above-the-fold) CSS Tools
I cant seem to figure out the code for this. im currently in the functions.php of my child theme.
i'm trying to have an image link to the comments section of the post. I already have a button that links to the post itself.
the code looks like
<a href="<?php the_permalink(); #reply-title ?>">
<img src="http://trueidconference.com/wowministriesblogs/wp-content/images/JOINimg.png" alt="Mountain View" style="margin-left:12px;"></a>
when I try it, it just doesn't show up. if I use it shows up, but of course doesn't link to the post, then to the id.
I have tried different variations even using echo to get it to work.
But I just cant seem to figure out how to add #reply-title to whatever the current permalink is.
the reason it is in the functions.php is because i needed to add this link to the bottom of every post.
Try:
<a href="<?php echo get_the_permalink(); ?>#reply-title">
If I understand correct you need this:
<a href="<?php the_permalink(); ?>/#reply-title">
<img src="http://trueidconference.com/wowministriesblogs/wp-content/images/JOINimg.png" alt="Mountain View" style="margin-left:12px;">
</a>
I am trying to set the Featured image as the og:image
I have tried various ways and plugins (Yoast) but finding it hard to get my head around this.
The issue is that it isn't picking up the feature image at all instead it is picking up the images in the content.
This is my current pages code for the single blog post. This is the part which i need to be able to get when sharing the blog post to Facebook rather then the content images.
<div class="image-wrapper">
<?php if( get_field('featured_image') ): ?>
<?php $featuredImage = get_field('featured_image'); ?>
<img rel="image_src" src="<?php echo $featuredImage['url']; ?>" alt="">
<?php else: ?>
<img src="http://lorempixel.com/842/458/?rand9" alt="">
<?php endif; ?>
</div>
It does do this weird thing when a blog post hasn't got any images in the content it then picks up the feature images and images in the sidebar. I also ran the Facebook debugger but again it is only picking up the contents imagery.
I did find this snippet that targets the featured image but i have a feeling because mine is a custom post it may not be picking it up.
<meta property="og:image" content="<?php $post_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); echo $post_thumbnail[0]; ?>" />
Any help would be great if you need anything else let me know.
Managed to figure it out.
<meta property="og:image" content="<?php $featuredImage = get_field('featured_image'); echo $featuredImage['url']; ?>" /
I had to call the custom field image.
Hi I have a small website im doing for a customer and I have used a html/css-site and transferred it to wordpress by using blank theme. So far so good, have a look at energyshop.se if u want and in startpage the top two images are shown, but not udner the rest of the tabs - why? I add the images in the header.php so it should find them on all tabs...?
//header.php
<body <?php body_class(); ?>>
<div id="container">
<div id="header" onclick="location.href='http://www.energyshop.se/';" style="cursor: pointer;">
<h1><?php bloginfo('name'); ?></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<div id="main_menu">
<?php wp_nav_menu(); ?>
</div>
This is because you're using relative paths. When creating a WordPress theme and you want to load resources from your theme, you should use absolute paths. There are two template tags that make this easy for you: get_bloginfo() and bloginfo(). The first one returns the value, and the second one echoes the value(that you request via the first argument passed to the function).
So in order to display an image, you should have:
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/icon_en_global.png" alt="English.png">
This will always result in this(for your site):
<img src="http://energyshop.se/wp-content/themes/blank/images/icon_en_global.png" alt="English.png">
So simply replace all wp-content/themes/blank with <?php bloginfo('stylesheet_directory'); ?>.