I wrapped a WordPress function, .the_post_thumbnail(). inside of a span with class 'post-image', like this:
echo "<span class='post-image'>".the_post_thumbnail()."</span>";
The style that I'm trying to apply is width: 100% to make the image take up 100% width of it's <div> / container. But when inspecting the post images in the browser, none of the post images are inheriting this style.
My CSS is simply:
.post-image {
width: 100%!important;
}
This is the type of situation where I just don't know what else to try. I don't want to make any changes in reset.css because that would affect all other images - I'm just trying to style the images for the blog posts.
Try this: (no need for echo, this function echo`s)
the_post_thumbnail('post-thumbnail');
Post thumbnails are given a class wp-post-image and also get a class depending on the size of the thumbnail being displayed. You can style the output with these CSS selectors:
img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
You can also give post thumbnails their own class. Display the post thumbnail with a class post-image:
the_post_thumbnail('post-thumbnail', ['class' => 'post-image']);
Style it:
img.post-image {
width: 100%;
}
Try to use clear css property.
https://developer.mozilla.org/en/docs/Web/CSS/clear
Related
I would like to use a different logo for my mobile version.
I found out that you add another logo in your HTML source code and then define in CSS which logo is shown based on page size.
My problem is that I use Wordpress and can't really access the source code. I can only write something in the functions.php file.
My logo is places in the navigation bar, which makes it more difficult, too.
Would be soooo thankful for any help :)
Daniel
My Page
Yes you can use media queries to do that for example :
.mobile-logo-class {
display:none;
}
#media screen and (max-width: 768px) { // 768px or your break point
.mobile-logo-class {
display: inline-block; // or block
}
.desktop-logo-class {
display:none;
}
}
Or you can use the "Picture" tag but be careful for IE Support:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015
In normal case, if your theme provides the options for mobile logo then you can upload different logo for your mobile sections,
if there are not options for the mobile logo into your theme then you can use media queries to set the path for mobiles width
or
you can use the plugins to show different logo for your website in mobile something like this.
https://wordpress.org/plugins/rocket-wp-mobile/
STEP 1: OK first copy the code of logo in your header file which one calling the log on your desktop, copy the code and paste it below the same dive now remove the PHP code and change the div class, and give there <img src=" your image path"> and save it. you can write HTML too for image
STEP 2: Now in CSS use CSS for hiding it. something like
.logo2-img {
display: none;
}
here logo2 is your 2nd div class .
STEP 3: Now write css with media query
#media screen and (max-width: 768px) { // 768px or your break point
.logo2-img{
display: block; //
}
.desktop-logo-class {
display:none;
}
}
thats it sorry for poor English
I put embed codes of videos in custom field, every embed code (video) from every site have a different size..
there is a way to set a specific size for all embed videos without change the sizes in the embed codes?
i mean just copy and past the embed code with all parameters and then some code will change the videos to specific size?
You can do that with CSS or JS. For example, you can:
Have specific width and height for iframe in css
Have a JS script that will resize your iframe dynamically, for example on document.ready.
An example of the CSS would be something like:
.content iframe { width: 600px; height: 480px; }
An example of the JS would be something like:
jQuery(function($) {
var iframes = $('.content iframe');
iframes.css('width', 600);
iframes.css('height', 480);
});
Please, note that these examples would apply to iframes that are within an element with class "content", for example <div class="content">.
All of my CSS styling is done with an external stylesheet, but I have a php-generated gallery of user photos that requires a background-image for a div that is the user's picture (as the variable $userpic below). There is no problem with this using inline css:
echo "<div style=\"width:100px;height:110px;z-index:1;background-
image:URL('$userpic');background-size:100px 110px;background-repeat:no-repeat;\">
</div>";
but is there a way move the styling elements of the echoed div (class "NoPicDiv") below into the external stylesheet, perhaps something like the following?
echo "<div class=\"NoPicDiv\"></div>"//modified php echo statement
/*The following would be in my external css file*/
.NoPicDiv {
width:100px;
height:110px;
z-index:1;
background-image:URL('$userpic');
background-size:100px 110px;
background-repeat:no-repeat;
}
Worst case scenario I move all the styling elements to the stylesheet except the background-image element and just keep this inline. Thanks for any help!
Option…
A) generate a second, smaller CSS file via PHP, which only contains the background-image properties;
B) write the image URLs either inline to the tag or at the end of the body
The question here is, why do you need background images at all and not just output <img> tags. Background images won't get indexed by search engines and you can't store a title to them. If you are handling photos, you should definitely use IMG tags.
I'm using a jquery plugin to create an image slider with thumbnails underneath.
My goal is to have the main image's background be bg.png, with the thumbnail section background be wood.png.
I've changed the CSS to what I believe to be correct(see below), but the background of the thumbnail section isn't extending the full 961px, it's restricted to the 921px width I've established with the main image. I have a feeling this might be due to nesting within the plugin's php/jquery, I'm just not sure how to go about altering it to work. If that is the case, how do I fix it? If it's something else, how do I determine what it is/how to fix it?
thethe-image-slider.php
timthumb.php
live site
Thanks.
CSS
.thethe_image_slider.white-square-1{
background: url('../images/bg.png');
}
.white-square-1 .thethe-image-slider-thumbnails{
background: url('../images/wood.png');
margin-top: 20px;
margin-bottom: 40px;
width: 961px;
}
find this line
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:921px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;">
and change to this
<div class="thethe_image_slider white-square-1" id="thethe_image_slider323" style="width:961px;"><div class="thethe_image_slider_inner" style="width:921px; height:392px;margin:0 auto;">
in your code
Move your thethe-image-slider-thumbnails div out of your thethe_image_slider white-square-1 div but inside the gallery div. Works fine for me then.
First I have php generate a table, then when it comes to an arrow image I want php to assign a specific class to the object depending on conditions. The goal is to get a different linkable image for different conditions.
Here is my php script generating the link.
<a href="javascript:void(0)"
'; if ($row['upVote'] > 0) { echo '
class = "used_upArrow"
';} else {echo '
class = "new_upArrow"
';} echo '
rowid="' . $row['item_id'] . '">
</a>
Here is my CSS:
a.new_upArrow{
background-image: url('../Img/new_upArrow.gif');
}
a.used_upArrow{
background-image: url('../Img/used_upArrow.gif');
}
The only way for me to get the image to actually show up is if I add text < a>HERE< /a> in the php script, but obviously this gets in the way of the image. Looking online there are "css hacks" to hide text or move it, but that seems like an unnecessary work around that not every browser will respect. Are there other options here?
FYI,The end result is I would like to be able to change the class with jQuery and have the image change, that is why I am doing it like this.
Anchor tags () and other inline elements expand to the size of the content they contain. Since your anchor tag is empty, it has a height and width of zero. The background image is there, but the element is so small you can't see it.
To fix the problem, convert the anchor tag into a block element (instead of inline) and give it a size. CSS:
a.new_upArrow, a.used_upArrow {
display: block;
height: 100px;
width: 100px;
}
Change the height and width to match the dimensions of your image.