I'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags
Related
This is my first time ever using isotope. So, I create the isotope instance inside of my document.ready function like so:
var grid = $('.headshots-list');
grid.isotope({
// options
itemSelector: '.headshots-list-item-alt',
layoutMode: 'fitRows',
sortBy: '[data-number]'
});
Then I set the values of each element in my grid layout including setting the data-number attribute.
$("#headshot_" + $(this).val()).attr('data-number', 2); // Users who are not chairpersons
$("#headshot_" + $(this).val()).attr('data-number', 1); // Users who are chairpersons
Then I try to sort the grid. Currently, I am using the setTimeout only because I was testing to see if maybe I had a race condition but it made no difference. The grid does not order itself in the way that I am expecting so that the user with data-number 1 will show before all other users. These attributes are being set. I have viewed the elements in dev tools to be sure.
As I mentioned earlier, this is the first time I have ever used isotope so not sure what I am doing wrong. Any pointers in the right direction will be greatly appreciated.
As requested below, this is the HTML where I build out the li that goes with this.
<li id="headshot_<?php echo $user->ID; ?>"
data-number = "1" class="headshots-list-item-alt js-headshot <?php echo $user_terms_classes . ' ' . $board_status . ' ' . $number; ?>"
data-toggle="modal"
data-target="#memberInfo_<?php echo $member_id; ?>">
<div class="headshot-list-item-inner">
<div class="headshot-list-photo">
<?php //suppress photo until they come in
?>
<?php if ($photo_id): ?>
<?php // echo wp_get_attachment_image( $photo_id, 'Avatar' ); ?>
<?php else: ?>
<?php // echo '<img src="https:somedomain.com/imgs/user_img.jpg"/>'; ?>
<?php endif; ?>
</div>
<h4 class="no-margin">
<?php echo $name; ?>
<input type="hidden" class="user_id" value="<?php echo $user->ID; ?>">
<span style="font-size:14px; display: block; position: relative; width: 100%;"
class="chair_designation" id="chair_designation_<?php echo $user->ID ?>">
</span>
</h4>
<p class="no-margin"><?php echo $title; ?></p>
<span class="headshot-list-item-tag">View Bio</span>
</div>
</li>
I'm trying to switch a base image with a thumbnail when clicked (under product pages). For some reason I can't get it to work at all. Here's my code that creates the thumbnails:
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="desktop more-views">
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
Here's my JS code (in the file MY_THEME/skin/frontend/rwd/default/js/app.js) for switching the actual image:
wireThumbnails: function() {
//trigger image change event on thumbnail click
$j('.product-image-thumbs .thumb-link').click(function(e) {
e.preventDefault();
var jlink = $j(this);
var target = $j('#image-' + jlink.data('image-index'));
ProductMediaManager.swapImage(target);
});
}
Does anyone know what I'm doing wrong? I've followed the solutions at this link but they don't work! I wanted to comment on that post but I don't have enough reputation to do so! :( any help would be greatly appreciated!
EDIT: Here are the errors showing up on the console:
Each time I click on a thumbnail the last-most error comes up again and again...
I'm having a hard time understanding how to import a specific variable for use with jQuery.
Some links on a Wordpress theme are using
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<h1 class="portfolio-title">
<a target="_blank" href="<?php the_field('portfolio_link'); ?>">
<?php the_field('portfolio_title'); ?> <span class="sosa-icon">p</span>
</a>
</h1>
<!--get PDF if not empty-->
<?php else: ?>
<h1 class="portfolio-title"><?php the_field('portfolio_title'); ?></h1>
<?php endif; ?>
As you can see the href is set as
href="<?php the_field('portfolio_link'); ?>"
Now I have a jQuery script as follows
<script>
<?php if( get_post_meta($post->ID, "portfolio_link", true) ): ?>
<?php
$phpVar = 'http://www.google.com';
echo "var phpVariable = '{$phpVar}';";
?>
jQuery(".box").click(function() {
window.open(phpVariable);
});
<?php endif; ?>
</script>
This script currently works. It opens google in a new tab as a placeholder until I know how to make it open the same result as the href.
Now what I can't understand is how to set '$phpVar' to have the same effect as the 'href' I showed before instead of 'http://www.google.com';
Not sure just how the WordPress handling of this is, but given that the_field('portfolio_title'); returns a valid URL, you can simply assign the JavaScript variable the output of this variable.
var phpVariable = "<?php the_field('portfolio_link'); ?>";
The following Wordpress loop creates several textblocks on a page:
<?php while ( $query->have_posts() ) : $query->the_post();?>
<div class="col-md-<?php echo $column_width_input = get_post_meta( get_the_ID(), 'column_element_grid_class_meta_box', true ); ?>">
<div id="post-<?php the_ID(); ?>" class="textblock dicon" data-animation="<?php echo $animation_type_input = get_post_meta( get_the_ID(), 'animation_element_grid_class_meta_box', true ); ?>" data-delay="1">
<div class="dicon discipline-icon"><i class="fa fa-comment-o fa-2x"></i></div>
<h4 class="text-center"><?php echo the_title(); ?></h4>
<p class="text-center"><?php echo the_content(); ?></p>
</div>
<!-- END #post -->
</div>
<?php endwhile; ?>
I am trying to write a script that will animate a particular text block .textblock with a particular animation (each textblock has a different animation). I figured that I'll use the post ID to target a textblock (id="post-") but I'm not sure how to use the_ID(); in the JS file. I have seen the rel attribute used to do this but is is not currently working for me. Here is what I have so far which only applies the same animation to all the text boxes:
var topOfOthDiv = $(".textblock").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv - 400) { //scrolled past the other div?
$(".textblock").addClass('animated ' + $(".textblock").data('animation'));
}
});
You could have a hidden input, and get it through js like this:
HTML:
<input type="hidden" id="post_id" value="<?php the_ID() ?>">
Javascript:
post_id = $("#post_id").val();
http://bit.ly/bsydBA
I've widened the product slider displaying boots to be full page width but I'm not seeing how to expand the number of products being displayed neither vía CSS or the code in featured.phtml (below). I also haven't found anything in the admin which would let me set any parameters.
The site just came to me after a variety of prior developers got under the hood so I'm just wrapping my head around any changes made to core files (yes, they didn't use /app/code/local/).
Has anyone worked with theme or see where I might be able to make the required adjustment?
Thanks in advance.
<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?>
<div class="note-msg">
<?php echo $this->__('There are no products matching the selection. Please provide a category ID.') ?>
</div>
<?php else: ?>
<?php // Grid Mode ?>
<ul id="featured" class="jcarousel-skin-tango">
<?php $_collectionSize = $_productCollection->count() ?>
<?php $i=0; foreach ($_productCollection as $_product): ?>
<?php if($i++%4==0): ?>
<?php endif ?>
<li><a class="preview" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300, 300); ?>" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(105, 105); ?>" width="105" height="105" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
</a> </li>
<?php if ($i%4==0 && $i!=$_collectionSize): ?>
<?php endif ?>
<?php endforeach ?>
I solved the issue. Turns out the site was using GTSpeed to minify the JS and CSS and cache them so the changes that I made in Firebug just didn't appear.
Once I figured this out and disabled it was a snap, just needed to change
.jcarousel-skin-tango .jcarousel-container-horizontal for the outer container
.jcarousel-skin-tango .jcarousel-clip-horizontal for the inner container