I'm currently in the process of making a portfolio website for myself, using a modified version the 'Gridly' wordpress theme. Here's the current website.
Right now I'm trying to implement the 'infinite scroll' plugin, but I can't seem to get it to work.
I'm not sure if anyone here is familiar with this specific plugin, but just in case, the selectors that I'm using are:
Content Selector: #post-area
Navigation Selector: .view-older
Next Selector: .view-older a:first
Item Selector: .post
I can't really tell what code would be relevant to post here, but here is what the index.php contains:
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<div id="post-area">
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) { ?>
<div class="gridly-image"><?php the_post_thumbnail( 'summary-image' ); ?></div>
<div class="gridly-category"><p><?php the_category(', ') ?></p></div>
<?php } ?>
<div class="gridly-copy"><h2><?php the_title(); ?></h2>
<p class="gridly-date"><?php the_time(get_option('date_format')); ?> </p>
<?php the_excerpt(); ?>
<p class="gridly-link"></p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php else : ?>
<?php endif; ?>
<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>
<?php get_footer(); ?>
I've also set the behavior to Masonry/Isotope, and made sure the plugin is activated.
If anyone could help me solve this problem I'd hugely appreciate it. I'm (clearly) not a web developer, so please bear with me if any of this sounds silly.
I did it! For the benefit of anyone who might encounter the same problem, this was how I solved it:
Firstly, for some reason this theme included a 'view older posts' function, but it didn't include a 'view newer posts' one. I solved this by copying
<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>
and both creaing a div around the link, and adding another line of code, so that it states
<div ="navigation>
<?php next_posts_link('<p class="view-older">View Older Entries</p>') ?>
<?php previous_posts_link('<p class="view-newer">View Newer Entries</p>') ?>
</div>
Next, I changed the infinite scroll selectors to
Content Selector: #post-area
Navigation Selector: #navigation
Next Selector: #navigation a:first
Item Selector: #post-area .post
Hopefully that will help if anyone else encounters a similar issue. :)
Not really an answer, I'm afraid, but it's too long for a comment. Your link ends up a bit screwy in the HTML, with an a wrapped around a p (which, though technically 'legal' with your doctype, isn't a good idea).
View Older Entries</p>
Not sure how a:first is meant to be targeted, or what it refers to.
Related
I would like that my php detects seperatly images (media) and text, from a same wordpress post, in regard to display them in different columns. I am using Bootstrap, and I would like different display of each (text and image) according to the screen size.
Here is a code I have that displays all of the content of my post (image and text) at once, it works perfectly :
<div class="container">
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
I would like the same way of loading content but instead of having just
<?php the_content(); ?>
I would like something like this to place text and image (of same post) in different div class:
<?php the_image(); ?>
AND
<?php the_text(); ?>
I know this is wrong code but I am trying to be clear in my explanation. I need that my client does not touch any of code, also shortcode in Wordpress post. Any input or advice would be very appreciated!
Many thanks!
Thank you for your answer! Lars Beck, you solved my problem!
Here is the code I was looking for:
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img;
}
?>
</div>
There is no way, to separate out images from the content section if they have just been included as part of the content.
Wordpress has featured image functionality built in for you. so you can use the_post_thumbnail() to echo out the image. Maybe this question can help you Wordpress featured image code
If this isn't enough for you and you need more flexibility you might want to look at advanced custom fields plugin - https://www.advancedcustomfields.com/ it makes it easy for you to add your own fields of any type you want.
I was referring the page.tpl.php(Drupal 7 theme) for understanding the code. I found the following code,
<?php if ($site_name || $site_slogan): ?>
<!-- !Site name and Slogan -->
<div<?php print $hgroup_attributes; ?>>
<?php if ($site_name): ?>
<h1<?php print $site_name_attributes; ?>><?php print $site_name; ?></h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<h2<?php print $site_slogan_attributes; ?>><?php print $site_slogan; ?></h2>
<?php endif; ?>
</div>
<?php endif; ?>
Can you see the code in third line, <div<?php print $hgroup_attributes; ?>> WHY the php code is inside the first div tag of html? Same thing in later part of code also, as you can see h1 and h2 code. So, what is this convention of combining the html and php in so complicated way? and how should I read that?
Combining HTML and PHP code in Drupal templates is actually a very strong feature. In this case, $hgroup_attributes will probably contain some classes that style the div. Printing it in the template results in something like
<div class="SOME_CLASSES"> ... </div>
If you're further interested in the variable $hgroup_attributes, you can inspect by pasting <?php dpm($hgroup_attributes); ?> in your template file after you've installed the Devel module.
I made a custom template for the team I'm working on. I used this code for the template (along with the parts that get the header and footer ofc)
<div class="main-container">
<?php
the_post();
$thumbnail = has_post_thumbnail();
?>
<section class="section-header overlay preserve3d">
<div class="background-image-holder parallax-background">
<?php the_post_thumbnail('full', array('class' => 'background-image')); ?>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="article-body">
<?php
if(!( $thumbnail ))
the_title('<h1>','</h1>');
the_content();
wp_link_pages();
?>
</div><!--end of article snippet-->
</div>
</div>
</div>
</section>
But if there's no featured image, a gray box will appear. I'd rather just have the whole section be hidden if there is no featured image, because it will look much better.
I'm a php rookie so I have no idea how to do this. What I think I need to do: Have an if/else statement check for the featured image. If there is no image, add a class to said section and define 'display none' in my css file for that class.
So this is the code I tried to pair with that, but it did not work:
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
$("section:first").addClass("noshow");
}
?>
Is this code incorrect? Where do I need to place this in my document for it to work?
While PHP is executed on the server, jquery is executed on the user end. You could always echo that jquery statement and that way it would be sent to the user.
You could follow the path Martin E. said on his comment (which in my opinion is a much cleaner version) or you could pursue the way you were working on by adding jquery on your header if you haven't and trying something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<script>$("section:first").addClass("noshow");</script>';
}
?>
my name is Chris and this is my first help question.
I am having some issues trying to figure out how to embed a Minecraft Server Dynamic Map into my PHP.
The map is 209.105.236.244:8123
The code in which I am trying to embed it is
<div class="span6">
<?php if( protectThis("1, 2") ) : ?>
<h1 class="page-header"><?php _e('You have the ability to view this map'); ?></h1>
<p><?php _e('You will only be able to see this content if you have a <span class="label label-info">special</span> user level. ')?></p>
<?php else : ?>
<div class="alert alert-warning"><?php _e(' ***Dynamic Map Here***'); ?></div>
<?php endif; ?>
</div>
I am just not able to figure out how to make the map display here instead of them just going to the url. :3
If anyone can provide me with a solution or even a jumping off point on how to go about this, that would be simply amazing! Please and thank you :)
I'm assuming you intend to call javascript based on the page source at 209.105.236.244:8123
You could forgo the echo <?php _e(' ***Dynamic Map Here***'); ?> and include your map related scripts here just as you did with your other html tags. It should still fall within your "else" condition so that these scripts are only called if your requirements are met.
In this case, any time protectThis("1, 2") is not true, the map should be displayed.
<?php if( protectThis("1, 2") ) : ?>
<h1 class="page-header"><?php _e('You have the ability to view this map'); ?></h1>
<p><?php _e('You will only be able to see this content if you have a <span class="label label-info">special</span> user level. ')?></p>
<?php else : ?>
<div class="alert alert-warning">
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/script.json.js"></script>
</div>
<?php endif; ?>
Okay, so I'm a newbie to Magento and have been making lots of changes to get it working the way a client is wanting.
Obviously at install and early on, the shopping cart was working fine. I moved it up to the top right corner for a while w/ CSS and then I THOUGHT that I display:none'd it, as I just wanted to focus on other things for a while before moving on to styling it. Now I've done all those other things and want to deal with the cart. Trouble is - it is nowhere to be found and the display:none that I thought I'd used to turn it off is similarly missing. Maybe I never did it?
I can't find anything in the CSS that would have turned off the cart - I can't find a display:none on it or any parents. Most of the site is using a 2 column with left sidebar layout, and I know the shopping cart resides by default in the right. But when I turn back on the right sidebar - no cart. Furthermore, when I go to add a product to the cart, I am redirected to mydomain.com/checkout/cart as expected, but there is nothing on the page. My styling, menus, etc are present but the .col-main element where the full-page detailed cart should be is empty. Which makes me think again that the problem isn't CSS.
It's as if the site just isn't calling for the cart (I assume cart.phtml?). It is totally possible that I screwed something up while messing with other things (adding a CMS page menu at top, lots to do with resizing images, moving the category menu to the left sidebar). My php isn't good enough to find the culprit and I'm not even sure which file I should be looking at - checkout.phtml?
I realize this question has very little valuable information, but does anyone have any ideas as to where I should be looking? I can post the relevant code if I know which file to look in. The site is cart.oldfloridian.com. If you want to try to add a product, there is only one at the moment, at "ak starfish --> starfish women's"
Edit: so the /checkout/cart page is a 3column layout. Here is the 3columns.phtml code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<div id="cms-menu">
<?php $collection = Mage::getModel('cms/page')->getCollection()->addStoreFilter(Mage::app()->getStore()->getId());?>
<?php $collection->getSelect()
->where('is_active = 1'); ?>
<ul>
<?php foreach ($collection as $page): ?>
<?php $PageData = $page->getData(); ?>
<?php if($PageData['identifier']!='no-route') { ?>
<li>
<?php echo $PageData['title'] ?>
</li>
<?php } ?>
<?php endforeach; ?>
</ul>
</div>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div class="main-container col3-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-wrapper">
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
<div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
</div>
<div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
</div>
</div>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
There does seem to be a bug in there somewhere - we had a similar issue where two devs in the team couldnt see the cart, 1 could - but it wasnt just the cart it was the whole customer section (login, cart, my account etc).
We tried enabling Template Path Hints but the only thing in the main section of the page was "frontend/default/default/template/catalog/msrp/popup.phtml". We re-installed most of magento - no luck
We tried pretty much everything and what fixed it was coping all of the theme files into a new theme and re-naming it. Only thing I can think of that it could have been was a hyphen in the theme name