I'm building a wordpress site (here: http://dev.tps.entropii.com/contact-us/) that requires a full page width google map on the contact page. The Business has two addresses so they effectively need two maps with a means to switch between them. I'm using Advanced Custom Fields plugin to give the user the functionality to update/edit their addresses.
Here's the problem. In order to give the functionality to switch back and forth between the two maps I decided to put them inside a twitter bootstrap carousel. One slide for each map. This works as expected with one problem. The map that is contained within the inactive slide (e.g. the slide that doesn't have the class 'active' on page load), doesn't seem to fully load. If I put the maps side by side on the page without the carousel they load no problem.
Because I'm using advanced custom fields, the maps are being loaded using php. Here's the HTML/php from my template file:
`
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<!-- map 1 -->
<?php $map1 = get_field('map_1'); if( !empty($map1) ): ?>
<div class="acf-map" id="map1">
<div class="marker" data-lat="<?php echo $map1['lat']; ?>" data-lng="<?php echo $map1['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
<div class="item">
<!-- map 2 -->
<?php $map2 = get_field('map_2'); if( !empty($map2) ): ?>
<div class="acf-map" id="map2">
<div class="marker" data-lat="<?php echo $map2['lat']; ?>" data-lng="<?php echo $map2['lng']; ?>"></div>
</div>
<?php endif; ?>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#map-carousel" data-slide="prev"></a>
<a class="right carousel-control" href="#map-carousel" data-slide="next"></a>
</div>`
My suspicion is that because the inactive slides of the bootstrap carousel are set to display none, that the content isn't being loaded int he first place properly. However I'm completely stabbing in the dark. Can anyone shed any light on this?
Let me know if you ned any more info. Thanks,
Related
I have a custom theme I am working on in wordpress, and I want to display the last 3 blog posts made onto my home page. I also want to style certain information regarding each post differently, like have the month and year be a certain font, and the day be much bolder and different font as well, along with displaying like a sentence or less of the article, followed by a "..." and "read more" type of thing.
How do I pull data from the blog? I know there are certain wordpress functions that can get me this data but I haven't been able to quite figure out how to do it, I'm not really well versed in the wordpress php functions. Right now I just have it hard coded but it's annoying to have to retype everything when I make a new post. I know you can set to show however many blog posts on the settings->reading but I want to be able to fully customize how it looks.
Let me know any suggestions on how I should go about doing this!
<div class="bottom">
<div class="wrap-2">
<h2>Blog</h2>
<div class="content-div">
<div class="bottom_box">
<div class="btm-img"><h4>April <span>25</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 1</p>
<p class="highlight3">lksj sldkf jsl lsdkfj sdklf sd</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>24</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 2</p>
<p class="highlight3">lsdkjf lsdk fjsl dkkddk lsdkfjpaskldfj;</p>
Read More >
</div>
</div>
<div class="bottom_box">
<div class="btm-img"><h4>April <span>23</span><br />2014</h4></div>
<div class="right_block">
<p class="highlight2">blog title 3</p>
<p class="highlight3">lksdjf slkdfjsldkfj;as dfklsd;j fsld;kfj</p>
Read More >
</div>
</div>
</div>
</div>
</div>
Try the snippet below. Use your custom HTML block (the one with botom_box class) instead of this used below.
<?php $posts = get_posts("numberposts=3"); ?>
<?php if($posts) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<!-- your HTML block goes here --->
<div class="post">
<h3><a href="<?php echo get_permalink($post->ID); ?>" ><?php echo $post->post_title; ?></a></h3>
<?php the_excerpt(); ?>" rel="bookmark">read more</a>
</div>
<!-- end of the HTML block -->
<?php endforeach; ?>
<?php endif; ?>
apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/
I am trying to pull some information from my database and put it in a modal. I went to the foundations website and tried to figure it out from their docs section. I dont exactly understand it. So I have a section of my site that allows users to request to delete a song they uploaded. Now if they click the X a modal should pop up and ask to confirm.
<div class="row">
<div class="large-8 column musicup">
<p> <?php echo "No music uploaded..."; ?> </p>
</div>
</div>
<?php
}else{
?>
<h2 style="margin-top:1em;">Music uploaded</h2>
<hr style="opacity:.4;">
<?php
while($row_a = mysql_fetch_array($res))
{
?>
<div class="row">
<div class="large-4 column musicup">
<p><?php echo $row_a['title']; ?></p>
</div>
<div class="large-3 column musicup"><span data-tooltip class="has-tip tip-top" title="<?php echo $row_a['reason']; ?>">
<div class="button <?php echo $row_a['status'];?>"><?php echo $row_a['status'];?></div>
</span></div>
<div class="large-3 column musicup_date">
<p><?php echo date('F j Y',strtotime($row_a['uploaded'])); ?> </p>
</div>
<div class="large-2 column musicup">
<p>X</p>
</div>
</div>
<?php
}
}
}
?>
</div>
So now I have the modal and all the database queries on a new page called song_delete.php.
Here is the code for that:
<?php
include_once "functions.php";
$query = sprintf("SELECT * FROM songs WHERE user_id = %d AND song_id = %d",$_SESSION['user_id'], $_GET['id']);
$res = mysql_query($query) or die('Error: '.mysql_error ());
$row_a = mysql_fetch_assoc($res);
$totalRows_a = mysql_num_rows($res);
?>
<div id="deleteMusic" class="reveal-modal medium">
<h2>Request to delete<span style="color:#F7D745;"> <?php echo $row_a['title']; ?></h2>
<p class="lead">Are you sure you want to delete this song? Please allow 2 full business weeks for deletion.</p>
<span style="float:right;">Cancel
Submit </span>
<a class="close-reveal-modal">×</a>
</div>
Thanks for any help in advance. I appreciate it.
Please dont tell me about the mysql_query and how I should use PDO or MySQLi and OOP i know this, but this site is not currently coded with all that..
OK first things first - its often better to look at the compile source (HTML Source Code) in these cases. Can you do this? From the code you've given it looks fine but without the css/js linking and showing the placement of the reveal code there's no way to tell.
How Foundation Reveals Work
1 - The modal code is placed just before the ending </body>.
2 - It should look something like this:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
3 - Depending on the size you want you can use an extra class of .small (for a reveal size of 30% browser width. Or one of these (taken directly from Foundation Docs)
.medium: Set the width to 40%.
.large: Set the width to 60%.
.xlarge: Set the width to 70%.
.expand: Set the width to 95%.
4 - At this point you can attach data-reveal-id="<id of modal here>" or call the modal via foundation. At this point your modal will popup in all Foundation 4 supported browsers. However you need the javascript files to close it.
5 - Now make sure you have the necessary scripts
<!-- If running version with default scripts -->
<script src="foundation.js"></script>
<script src="foundation.reveal.js"></script>
6 - Then call $(document).foundation() and then via the magical jQuery javascript library it should work as intended :-).
Extras
You can add extras attributes to reveal if you wish this way (List of all the attributes
):
$(document).foundation('reveal',<options here>,<callback>)
Lastly you might want to take the ajax tag off this (you aren't calling any content in asynchronously - it's all compiled at runtime via your server
I am doing some WordPress theming. I have a #novelsslider div. Inside of #novels, I used this code to get the latest three posts in the "novels" category, inside of the html divs, I used some php functions to get the latest 3 posts and load the html 3 times floated to the left to build a slider:
<!-- slider -->
<div id="novelsslider" class="slider">
<? $novels = get_option('of_novels') ?>
<?php query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<a href="<?php the_permalink(); ?>">
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
</a>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php endwhile;?>
<div id="novelsslidebars">
<input type="submit" value="" class="slidebars" id="novelsslidebtnleft">
<input type="submit" value="" class="slidebars" id="novelsslidebtnmiddle">
<input type="submit" value="" class="slidebars" id="novelsslidebtnright">
</div>
</div>
<!-- End novelsslider -->
ow I have some arrows.. I want them when clicked to get a set of previous 3 posts and load them, how can I do such a loop?
To achieve this you can adopt any of these methods :
1- If your posts are not in large number then you can preload them and store in some container which is hidden by default and will appear when you click the next / previous button, like a content slider, but this is a bad approach and not recommended.
2- Use AJAX to load the rest of the posts, this is a good method and will be purely dynamic. Look on the following links to have the idea:
http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/
Wordpress - how can I fetch more posts via AJAX?
This is my current set up.
I have created a new custom theme with the following regions.
regions[header] = Header
regions[content] = Content
regions[footer] = Footer
page.tpl.php
<div id="Header">
<div class="row">
<div class="span12" style="text-align:center;padding-top:20px;">
<div><img src="logo.png" width="150" height="150" alt="KT Logo"></div>
</div>
</div>
<div class="row"> </div>
</div><!-- /Header -->
<div id="Navigation">
<div class="row" style="text-align:center;">
<div class="span12" style="text-align:center;">
<?php print render($page['header']); ?>
<hr class="style-two">
</div>
</div>
</div><!-- /Navigation -->
<div id="Content">
<div class="row"> </div>
<div class="row">
<div class="span8 offset1">
<h1><?php print $title; ?></h1>
</div>
</div>
<div class="row"> </div>
<div class="row">
<div class="span10 offset1">
<?php print render($page['content']) ?>
</div>
</div>
<div class="row"> </div>
</div><!-- /Content -->
<footer>
<div class="row">
<div class="span12">
<img src="separator.png" alt="separator">
<?php print render($page['footer']); ?>
</div>
</div>
<div class="row"> </div>
</footer>
</div><!-- /container -->
This all works well and I have created several basic pages fine. The problem comes when I want to have a custom "content type" with 2 blocks on a page, one with main content on left, one with a sidebar on right. Now I'm not completely understanding how the regions work.
I am wanting something like the sidebar_second effect but I'm not sure how it would set in with my widths. Here is a screenshot of my regions. http://goo.gl/XFVnl
So I think I need to change the way my content region is displayed so that it can include the sidebar region?
Thanks for any help
Content-type specific templates are usually node.tpl.php files, and page templates are page.tpl.php files.
page.tpl.php file is already included when you are using a node.tpl.php
First, add ALL the regions to the .info file of them theme. This directly affects which regions are available in blocks administration page.
It's not necessary to have all the regions you defined (in .info file) to present in all page.tpl.php files.
As you have 3 regions in the page.tpl.php file, leave it and it will continue to work.
But to override the page.tpl.php for specific node types, you will have to set them in the theme's template.php file. You simple "ask" Drupal to use this page.tpl.php file is node type is a "page" (for example).
Add this to your template.php file. Drupal will not look in to page--node-book.tpl.php file for an alternative page.tpl.php file if the node type is (machine name) is "book".
<?php
function themename_preprocess_page(&$variables) {
if (!empty($variables['node'])) {
$variables['theme_hook_suggestions'][] = 'page__node_' . $variables['node']->type;
}
}
?>
Now you can copy the page.tpl.php file to page--node-[type].tpl.php and make your changes there. Whatever you put in this file will be used for page template for that node type.
(Note: 2 hyphens between "page" and "node", and one between "node" and "[type]")
Remember to clear caches if you can't see the changes.
I believe the first step is to declare a sidebar region in your .module file along with your other regions even if it will not be displayed on every page.
In your page template you can check (psuedo-code)
if (isset($page['sidebar'])) {
<div sidebar float left theme this how you want>
print render($page['sidebar']);
</div>
}
Now when you create a block you can specify a specific path for it to show up on or a specific content type for it to show up on. The code above will check if the page has a block in your sidebar and render it accordingly.
You will probablly be more likely to get answers if you post on drupal stack exchange.
https://drupal.stackexchange.com/