I'm having a hard time trying to solve this problem. I don't want WP controlling the size of my images, so I stopped it from generating image sizes setting all values in Settings>>Media to 0. Also, my functions.php doesn't have any add_image_size(). This should be enough but WP is still getting width and height from somewhere.
My code:
<div class="post-image-div"><?php the_post_thumbnail('thumbnail', array('class' => 'img-post')); ?></div>
CSS:
.post-image-div {
width: 100%
}
.img-post {
max-width: 100%;
heigth: auto;
}
The output:
<img src="" class="img-post" alt="" width="128" height="86">
What is preventing my code from working is the "width" and "height" WP is adding in <img>. I don't know from where WP is generating these values.
If you want the original image as output then use
// Full resolution (original size uploaded)
<?php the_post_thumbnail( 'full', array('class' => 'img-post')); ?>
Instead of
the_post_thumbnail('thumbnail', array('class' => 'img-post'));
I hope this will solve your issue.
try this:
the_post_thumbnail('full', array('class' => 'img-post'));
Related
First of all i'm using acf to create gutenberg blocks (i think it's important to say about it).
I made custom post type for my restaurant menu, where i want to force exactly the same layout for each
posts.
I made background block to can adding blocks inside there.
<div class="background">
<div class="background-color" style="background-color: <?php echo $background ?>"></div>
<InnerBlocks />
</div>
To get similar layout to each posts i set template parametr in my cpt
'template_lock' => 'all',
'template' => [
['acf/background', ['className' => 'meal_description', 'data' => ['admin_section_name' => 'Meal description']], [
['core/paragraph', ['align' => 'center', 'placeholder' => __('Your block there', 'restaurant')]],
]],
];
Unfortunately when i set template_lock to all i cant add block in my 'inner_blocks" called background.
I'm looking for solution in which admin could add some block only in predefined blocks.
Have you tried adding templateLock="false" to the InnerBlocks element?
E.g. <InnerBlocks templateLock="false"/>
templateLock is passed down to child elements, so setting the value on the InnerBlocks should overwrite the parent value.
https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inner-blocks#templatelock
If locking is not set in an InnerBlocks area: the locking of the
parent InnerBlocks area is used.
I need to apply css3 properties to kartik time picker widget tried with
<div style=" position: none;">
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(), [] )->label(false); ?>?>
</div>
But not able to get it, is there any way so to apply css3 properties?
I think you should use containerOptions is the array that set the HTML attributes for the main widget container
<?php echo $form->field($model, 'checkin_time')->widget(TimePicker::classname(),
['containerOptions' => ['style' => 'position:none;']] )->label(false); ?>
I have just begun exploring CSS and am looking forward to gain an in-depth understanding of the language.
One of the issues I'm facing with a project is the alignment of the products in mobile view.
Website - http://klcl.com.my/product-listing/
In the mobile view, the products are touching the right side of the screen. I want them to be centered. I tried adding a 'margin-right: 15px' and it works; however, that new line of code affects the social media icon in the footer as well. I'm guessing because both the product list and the icon are using the '.col-md-4' class tag.
Here is the code:
<div class="col-md-9 product-listing-main">
<div class="row">
<?php
$args = array(
'posts_per_page' => -1,
'post_type' => 'product'
);
$query = new WP_Query($args);
while ($query->have_posts()) :
$query->the_post();
?>
<div class="col-md-4">
<figure>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($post->ID));?>" />
<figcation><?php the_title(); ?></figcation>
</figure>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
</div>
How can I align the products to the middle without affecting any other elements on the website? Any help will be greatly appreciated.
After a short look at your code i see that you are often manipulating the paddings of bootstrap elements (container, col-* …) and that leads to confusion. Try to avoid this and everything runs fine.
add this to your css to reset the previous settings:
.on-social{margin-right:initial !important;}
or
.on-social{margin-right:0px !important;}
please consider margin: 0 auto; for centering the elements.
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.
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.