I'm looking to integrate a lightbox2 gallery system with Slick Flickr's ability to pull in a RSS feed containing image information. So far, I have lightbox set up and display correctly, but it fails to show next or previous buttons to cycle through the other images on the gallery.
Here's the current html. The rest is default lightbox2 file stuff.
<div class="album-wrapper">
<?php foreach ($feed->get_items() as $item): ?>
<div class="photoContainer">
<?php
if ($enclosure = $item->get_enclosure()) {
$img = image_from_description($item->get_description());
$full_url = select_image($img, 4);
$thumb_url = select_image($img, 0);
echo '<a href="' . $full_url . '" rel="lightbox" ><img class="photo' . $i . '" src="' . $thumb_url . '" /></a>'."\n";
}
?>
</div>
<?php endforeach; ?>
Put <!doctype html>on the first line of your code will fix the problem
Related
I am using domPDF to generate PDFs on certain pages of my site
The problem I am having is that it won’t allow me to use repeater values (via any sort of loop), it doesn’t seem to want to generate them when the PDF is created.
If I call the repeater field itself as a variable, it returns ‘array’, so I assume it’s possible to get it working, somehow.
It appears the repeaters first need to be generated and then included (perhaps as a variable?), but I’m unsure of how to do this.
Does anyone have any idea of how I can get this to work?
This is my ACF repeater code:
<?php if( have_rows('team_contact_details') ): ?>
<div class="profile-item">
<ul class="list-contact">
<?php while( have_rows('team_contact_details') ): the_row(); ?>
<li>
<div class="list-contact-letter">
<?php the_sub_field("contact_label"); ?>
</div>
<div class="list-contact-detail">
<?php
if(get_sub_field('contact_link') == 'phone' ) {
echo '' . get_sub_field("phone_number") . '';
} else if(get_sub_field('contact_link') == 'email' ) {
echo '' . get_sub_field("email_address") . '';
}
?>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
This is my domPDF code:
//Print PDF
require_once get_template_directory() . '/dompdf/autoload.inc.php';
use Dompdf\Dompdf;
$content = '
<html>
<head></head>
<body>
<div class="person">
<img src="' . get_field('page_image') . '"/>
</div>
<h1>' . get_the_title() . '</h1>
<div class="pdf-label">' . get_field('team_academic') . '</div>
<div class="pdf-label">' . get_field('team_position') . '</div>
<<<< Attempting to put repeater values here as unordered list >>>>
</body>
</html>
';
// instantiate and use the dompdf class
$dompdf = new Dompdf(array(
'enable_remote' => true
)
);
$dompdf->loadHtml($content);
// (Optional) Setup the paper size and orientation
$dompdf->set_paper( 'letter' , 'portrait' );
// Render the HTML as PDF
$dompdf->render();
$doctitle = get_the_title();
$dompdf->stream($doctitle);
Thanks
I got it. FYI, this was how:
if( have_rows('team_contact_details')) :
while(have_rows('team_contact_details')) : the_row();
$content .= '<h3>'. get_sub_field('contact_label') .'</h3>';
if(get_sub_field('contact_link') == 'phone') {
$content .= '<div>'. get_sub_field('phone_number') .'</div>';
} else {
$content .= '<div>'. get_sub_field('email_address') .'</div>';
}
endwhile;
endif;
I'm using Bootstrap3 to create a Wordpress theme, and I am using the responsive columns like so:
<div class="col-md-4">
<div class="panel panel">
<div class="panel-heading"><h1><?php the_title(); ?></h1></div>
<div class="panel-body">
<p><?php the_post_thumbnail(); ?></p>
<p><?php the_content(__('(more...)')); ?></p>
Take a look
</div>
</div>
</div>
What I've noticed though is that the featured images are not scalable. They have set sizes, but you can't define them so that the width is 100% of, in my example, the class panel-body.
I'd like to do this as when the screen size changes, so do the size of the columns, and I'd like the image to scale with them.
Does anyone know a way of doing this, I seem to have become a bit stuck.
Try below code to make image scalable:
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive img-circle'));
?>
You need to add class .img-responsive to make images responsive with bootstrap 3.
For adding the class .img-responsive to your wordpress images you can add the below function in your functions.php file.
<?php
//----------------------------------------------------------/
// responsive images [ 1) add img-responsive class 2) remove dimensions ]
//----------------------------------------------------------/
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
Hope it helps you.
I have tried as following code in my template file in wordpress...
<?php query_posts('showposts=3&post_type=packages&order=ASC&paged='.$paged) ?>
It's not working... Please help me!!! I am a beginner in wordpress
first parameter is your seperator between links
second parameter is previous page
third parameter is next page
<div style="text-align:center;">
<?php posts_nav_link(' · ', 'previous page', 'next page'); ?>
</div>
you can replace them with images as well
<?php posts_nav_link( ' ', '<img src="' . get_bloginfo('stylesheet_directory') . '/images/prev.jpg" />', '<img src="' . get_bloginfo('stylesheet_directory') . '/images/next.jpg" />' ); ?>
I would like to build a new Wordpress responsive website with responsive images for smartphones, tablets and computers.
I have built a javascript function (working) that load the correct image according to the width of the device.
Here is my html layout to load the same image with 4 different sizes:
<div pictures-content alt="alt data">
<div src="<?php bloginfo('template_directory'); ?>/images/small.jpg">
<div src="<?php bloginfo('template_directory'); ?>/images/medium.jpg" data-media="(min-width: 400px)"></div>
<div src="<?php bloginfo('template_directory'); ?>/images/large.jpg" data-media="(min-width: 950px)"></div>
<div src="<?php bloginfo('template_directory'); ?>/images/extralarge.jpg" data-media="(min-width: 1200px)"></div>
</div>
Here is my problem: when I will have to add a picture in Wordpress, I will have to push 4 pictures.
I would like to know if there is a convenient way to add in a post 4 images by adding directly the code with the Wordpress visual option?
Using the WP gallery is a good choice?
Do I have to download a plugin and set up custom fields?
Do I have to write a Js function that build and add automatically the html layout according to the only picture on the post?
I'm taking any other solutions,
Thanks for helping
Not a complete answer but enough to get you started.
you need the correct image sizes see add_image_size
When adding an image into the editor you can use a filter to set up the correct HTML image_send_to_editor
This can give you something like this:
<?php
function responsive_image($html, $id, $caption, $title, $align, $url, $size, $alt)
{
$html = '<div pictures-content alt="' . $alt . '" title="' . $title . '">
<div src="' . wp_get_attachment_image_src($id, 'thumbnail') . '">
<div src="' . wp_get_attachment_image_src($id, 'medium') . '" data-media="(min-width: 400px)"></div>
<div src="' . wp_get_attachment_image_src($id, 'large') . '" data-media="(min-width: 950px)"></div>
<div src="" data-media="(min-width: 1200px)"></div>
</div>';
}
add_filter('image_send_to_editor', 'responsive_image', 10, 8);
Adjust the image sizes test it and let me know if you get stuck.
I want to make a slide show in wordpress, I made a category for it and now I want to get images of that category for my slide show. Here is part of my code:
<div id="slide-show">
<ul>
<?php query_posts('cat=1'); while(have_posts()): the_post();?>
<li>
<a href="<?php the_permalink();?>">
<img src="<?php
$image=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail');
echo $image[0];?>" alt="<?php the_title();?>" /></a>
</li>
<?php endwhile; wp_reset_query();?>
</ul>
</div>
But it does not work. Can anybody help me please?
First of all, I'll repeat myself:
First of all, don't use query_posts.
Please, check:
When should you use WP_Query vs query_posts() vs get_posts()?
When to use WP_query(), query_posts() and pre_get_posts
In this case, I'd suggest building a function to create the desired output. You put it inside your theme functions.php file. Put it at the end of the file.
If there is any ?> as the last thing of a PHP file, remove it, it is not necessary and may break your site if there is any white space after it.
That said, our function will print exactly the Html you want and it is called like this in any theme template file (index.php, single.php, page.php, etc).
<?php get_gallery(4); ?>
The number 4 is the Category ID.
And this is the function, check the comments in the code:
function get_gallery( $id )
{
// Simple query
$posts = get_posts( array(
'category' => $id,
'post_status' => 'publish',
'post_type' => 'post',
) );
// Start building the Html code
$slide_show = '
<div id="slide-show">
<ul>';
// Iterate through the results
foreach ( $posts as $post )
{
// Assign value and test if it exists at the *same time*
if( $thumb = get_post_thumbnail_id( $post->ID ) )
{
$permalink = get_permalink( $post->ID );
$image = wp_get_attachment_image_src( $thumb );
// Build the Html elements
$slide_show .= '
<li>
<a href="' . $permalink . '">
<img src="'. $image[0] . '" alt="' . $post->post_title .'" />
</a>
</li>';
}
}
// Finish the Html
$slide_show .= '
</ul>
</div>
';
// Print the Html
echo $slide_show;
}
Result: