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.
Related
I am building a custom WordPress theme without plugins. The header image for each page may be different, so I am using the dashboard to assign the image and calling the "get_header_image()" function in my theme's code. The header image is properly displayed, but the alt text is not.
I wrote the following code:
function alt_text_display() {
$header_id = get_header_image(get_the_ID());
$alt = get_post_meta($header_id, 'wp_get_attachment_image_alt', true);
echo $alt;
}
add_action( 'wp_enqueue_scripts', 'alt_text_display' );
It doesn't work, probably because get_header_iamge() doesn't take arguments, right?
My HTML looks like this:
<div class="hero_container">
<img src="<?php echo( get_header_image() ); ?>" class="hero">
</div>
I set the image's alt text when I uploaded it to the media library. That text is not showing. Instead, the site's title is showing. How do I display the alt text that I set in the Media Library?
It looks like you forgot to add "alt" attribute in html and call function inside it.
<div class="hero_container">
<img src="<?php echo( get_header_image() ); ?>" alt="<?php display_alt_text(); ?>" class="hero">
</div>
Or you can use wp_get_attachment_image inside html to output image:
<?php echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "alt" => "My image alt text here" ) ); ?>
I figured it out. Here's my custom function
function alt_text_display() {
$data = get_object_vars(get_theme_mod('header_image_data'));
$image_id = is_array($data) && isset($data['attachment_id'])
? $data['attachment_id'] : false;
if ($image_id) {
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true);
return image_alt;
}
}
add_action( 'wp_enqueue_scripts', 'alt_text_display' );
Here's my HTML:
<div class="hero_container">
<img src="<?php echo( get_header_image() ); ?>" alt="<?php echo( alt_text_display() ); ?>" class="hero">
</div>
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'm having trouble trying to set the width and height of my post thumbnail.
Here is the link for the image
http://i255.photobucket.com/albums/hh140/testament1234/postthumbnail_zpsbe1027f9.png
As you can see both of the post have different dimensions
I have tried a couple of times in fixing the height and width of my post in fuction.php but no luck. Basically what i want to accomplish is that if i upload an image in the featured image regardless of size it would come out with a height of 250px and a width of 250 px. But whatever i do it seems incorrect.
This is the code that i have encoded
index.php
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
functions.php
//post thumbnail support 3
add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 250, 250 );
Am i missing something? I'm still trying to code in wordpress and PHP language. Basically i'm still a newbie. I really want to accomplish this without having to really on plugins
here is the code :
<?php the_post_thumbnail(array(215,152), array('class' => 'thumbnail')); ?>
array(215,152 you can change its value to your value which is height and width
or
you can use this which used for large images
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" width="250px" height="250px" >';
}
?>
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'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