I can easily make images within a post responsive, but am have an issue getting custom post type thumbs to do the same b/c WP automatically inserts a width and height. I am looking for a way to at least override these default widths/heights on them. Anyone happen to have a solution for this?
Thanks in Advance!
- j
This is what you want in your CSS:
img {
max-width: 100%;
height: auto;
}
The first declaration makes sure all images won't exceed the width of their containing element. The auto declaration for height ensures all images retain their proportions when scaled down even when they have size attributes in the img element. So in a way this overwrites the size attributes.
You should use WP's wp_get_attachment_image_src() to output the URL of the thumbnail and then proceed with building your own <img/> tag and responsive-ing it.
<img src="<?php $img=wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>
If you want a specific size, insert this: wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large')
<img src="<?php $img=wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID),large);
echo $img[0]; ?>" alt="<?php the_title(); ?>"
style="display:block; width:50%;"/>
That should do it.
Related
I'm using Bootstrap 4.
My question is quite simple: how to put an image side by side with a text using bootstrap ?
This is my code:
<div class="card-content">
<div class="portfolio-desc">
<h3><?php echo $galleryTitle; ?></h3>
<img id="authorImg" style="border-radius: 50%; height: 36px;" src="<?php echo $author_photo; ?>" />
<span id=authorSpan"><?php echo $galleryAuthor; ?></span>
<span>Gallery: <?php echo $galleryName; ?></span>
</div>
</div>
How can I put "authorImg" side by Side with authorSpan ?
Now, each img, span etc are on new line .
Thanks
Images do not cause a line break by default, so it must be some additional css or other formatting. try removing some classes and see if that fixes the problem. If you find a class that causes the line break then add whitespace: nowrap; to that class; I tried this myself and the image was on the same line as the text so it may be some additional css you wrote.
Side note: your id does not have the first quote mark.
I'm trying to get an image asset shown on the front-end using the wp_get_attachment_image WordPress function, but it doesn't seem to work with my options page on ACF.
Here is my code:
<?php
$image = get_field('logo', 'option');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
Which looks like this on the back-end:
The picture you see above is an options page in ACF and when I try to query that image into the wp_get_attachment_image function, it doesn't work. However, when I run this code:
<img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" />
which is within an image tag, it works just fine.
I copied and pasted what was shows on the ACF docs located here (Basic Display ID), but it's not showing the image on the front-end.
Anything I'm missing guys?
Thanks a lot!
Return value in field should be Image ID. See Screenshot
What is the return value type you used? Image Array, Image URL, Image ID
And you need to get a field like this:
get_field('logo'); why do you add option?
More info here:
https://www.advancedcustomfields.com/resources/image/
wp_get_attachment_image requires the first parameter to be an image ID. In your case, if you are seeing the image using the code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> then get_field('logo', 'option') is returning the url of the image.. not the ID which is what you need if you are using wp_get_attachment_image.
What you need to do is change the Return Value of your logo field to Image ID.
Then you might have to re upload the image.
And also change this code <img data-src="<?php the_field('logo', 'option'); ?>" alt="footer logo" class="lazyload" /> to <img data-src="<?php echo wp_get_attachment_url(get_field('logo', 'option')); ?>" alt="footer logo" class="lazyload" />
ACf plugin returns value as you have set the return type.
If you have sent the return type as Image array then :
$image[0] -> full or $image[0][$full] or $image[$full] depending on the number of image uploaded.
If you have set return type as Image url:
<img src="<?php $image; ?>"> would do the work.
If you are setting return type as Image Id:
$img2 = wp_get_attachment_image_src(get_post_thumbnail_id($image),
$full); echo $img2[0];
I guess above methods will surely help you out.
Thanks
I have two code blogs
I want it to look like this:
How should the code blog be
Missing alt text
And width height value
remove url and wordpress url
Sample:
<img class="alignnone" title="Women" src="https://3.bp.blogspot.com/-cR_7KLccvBM/WJ7h-yanzRI/AAAAAAAA6ps/hIk6C6Ha0eQzwIUaFpgYEkA6sY1bheTnwCLcB/s1600/women.jpg" alt="beatiful women" width="650" height="350"
<meta itemprop="url" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />
If you want to display your image like the sample then wordpress has two function to use:
If you are wanting to get outside the loop then,
wp_get_attachment_image(get_post_thumbnail_id( $post->ID), 'thumbnail');
inside the loop
if ( has_post_thumbnail( 'thumbnail' ) ) {
the_post_thumbnail();
}
This will directly create as you sample code. Hope this will work for you
Thank You
I have a simple question, you might know it.
<img src="images/sample.jpg" />
In a regular wordpress theme it should be like this ..
<img src="<?php bloginfo('template_directory'); ?>/images/sample.jpg" />
Right?
What about in Genesis themes?
If you are using a Genesis child theme, you should reference the stylesheet directory:
src="<?php echo get_stylesheet_directory_uri(); ?>/images/sample.jpg"
Every theme consist their own user defined functions to implement the functionality to expend more functionality beside basic that you are using.
I am not familiar with the Genesis theme, but i also used CANVAS and many more. It is up on the theme developer that how do he/she used the trick so that the theme functionality will be easily to extend.
Let's take and example:
<img src="<?php bloginfo('template_directory'); ?>/images/sample.jpg" />
the alternative of this:
function get_template_image( $image_name = "sample.jpg" ){
echo '<img src="'. get_template_directory_uri() .'/images/'. $image_name .'" />';
}
and add this function into the functions.php file. and call it like this.
get_template_image( "sample.jpg" );
I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.