I have a problem. When I post a featured image in a post and I publish, the only thing that is seen is one color background. The funny thing is that only one picture works. I have 5 pictures. 1 of them is showing up. All have the same size, all are .jpg. I don't know what to do. Has anybody seen something like that?
This is the functions.php
function fotosani_setup(){
add_theme_support('post-thumbnails');
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
}
add_action('after_setup_theme','fotosani_setup');
CSS is just styling for the border.
single.php is calling in the same way as in index.php
<div class="post-image">
<?php the_post_thumbnail('banner-image'); ?>
<?php
echo the_content();
if(is_active_sidebar ('post1')) : ?>
</div>
Your function calls to add_image_support() are not correct.
add_image_size('small-thumbnail', true); /* width, height, softcrop*/
add_image_size('banner-image', true);
is equivalent to:
add_image_size('small-thumbnail', 1); /* width, height, softcrop*/
add_image_size('banner-image', 1);
In other words, you are creating images that are 1px wide.
You need to set the widths and heights to what you want, just like the comment says:
add_image_size('small-thumbnail', some width, some height, true/false);
add_image_size('banner-image', some width, some height, true/false);
Related
I converted my wordpress theme to responsive..
all values of "width" change to percents (%)
and the poroblem is :
from 400px width it show:
first line 2 post
second line just one post (instead 2 post)..
how can i fix that so the page will show 2 post in all line?
i attached some pictures to explain the situation.
image of smartphone until 400px width
image of 500px
Ok your situation was a little tricky. The theme was not really designed in the best way to make those "blocks" responsive. To make it work I added js to your footer (you can move this to a js file if you prefer)
<script>
function equal_cols(el)
{
var divs = jQuery(el);
divs.css('height', '');
var tallestHeight = divs.map(function(i, al) {
return jQuery(al).innerHeight();
}).get();
divs.css('height', Math.max.apply(this, tallestHeight));
//alert(Math.max.apply(this, tallestHeight));
}
( window ).resize(function() {
$('.products-row').each(function(){
var el = $(this).find('.product-container');
equal_cols(el);
});
}).resize();
jQuery(window).resize(function() {
columnConform();
});
jQuery(document).ready(function() {
columnConform();
});
Then in the movie-home.php and taxonomy-movie-genre.php file I commented out the "clears" that were being added every third row. We don't need that any more since we are making all the boxes the same size with JS.
<?php /* if(++$counter % 3 == 0) : ?>
<div class="clear"></div>
<?php endif; */ ?>
The only gotcha is that all the boxes are the same size now regardless of how much content is in them.
Since I'm complete new to this, I'll try to be as clear as possible.
My questions concerns the positioning of my buttonicons for my mobile pages.
Basically, for every page there is an option to select an icon which gets displayed to the left of the page title.
How would I change the positioning below in order to get the icons displayed on the right side of the page titles. Unfortunately I can't post a screenshot of the current and ideal situation. Ideally I would like to have the page titles slightly more to the left.
I hope this still makes sense without a screenshot.
if($page->buttonicon){
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
If I may say, referring me to another post doesn't help me a lot since I'm completely new to this, so in order to avoid getting confused - I need this particular code to be used/rewritten.. :)
Any help is more than welcome, thanks in advance!!
EDIT
The CSS stylesheet doesn't seem to affect the positioning. The CSS stylesheet only seems to be called for the layout of the navigation buttons. The icons within the navigation buttons are related to the first code mentioned above.
With CSS you can float HTML elements example:
float:left
float:right
If that doesnt work try setting the position of the element to absolute and physically margining the element into place:
position:absolute;
margin: 10px, 10px, 10px, 10px
In your code, this inserts the image:
if($page->buttonicon){
$icon = "buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "";
}
and this inserts the title:
$menurow = "id." style=\"display:$rstyle\">$iconurl)."\" $target >".$page->title."\n";
If no CSS interferes, you should be able to simply switch the order of those two statements to get the desired effect.
EDIT
Thanks. Something like the code below? I tried (without any luck):
if($page->buttonicon){
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
I am using a Jetpack Tiled gallery as a widget for my site. It was taking forever to load.
I realized that the thumbnails were actually loading the full size images and then sizing them down to small thumbnails. The originals are very large, so that is why it was taking so long.
I noticed that in all of the jetpack gallery examples online the source of the image looked like this:
http://example.com/wp-content/uploads/2013/10/test.jpg?w=83&h=110
When I go to the URL for those examples, the image is resized correctly. However, those parameters do not work on my site and the full size image is loaded instead.
Is there any way to solve this?
I noticed this behaviour today as well, took some heavy galleries to notice that it was actually serving my high res images for the gallery. I made a quick fix that uses the different image versions that are available.
It's a quick'n'dirty fix, it should really check all registered image sized with
get_intermediate_image_sizes() and sort on sizes and return the proper URL.
Well well...This fix will save me bandwidth and load times..
I patched the rectangular_talavera. in plugins/slimjetpack/modules/tiled-gallery/tiled-gallery.php
$size = 'large';
if ( $image->width <= 150 ) {
$size = 'thumbnail';
} elseif ( $image->width <= 590 ) {
$size = 'medium';
}
$image_title = $image->post_title;
//$orig_file = wp_get_attachment_url( $image->ID );
$image_attributes = wp_get_attachment_image_src( $image->ID, $size ); // returns an array
$orig_file= $image_attributes[0];
I would like to display the manually-cropped thumbnail in the blog archive page. If I use this code, the original image is scaled and resized and not the manually cropped/sized thumbnail, which in my case chops off the head of the person in the picture:
//functions.php
add_image_size( 'archive-thumbnail', 220, 150, true );
set_post_thumbnail_size( 220, 150 );
//archive.php
get_the_post_thumbnail( get_the_ID(),'archive-thumbnail');
If I use the_post_thumbnail(array(220,150)); , I get 150px high "square-ish" image scaled down, again, based on the original image and not the manually-cropped thumbnail.
The closest to what I want is this:
$url=wp_get_attachment_thumb_url(get_post_thumbnail_id(get_the_ID()));
I get the manually cropped image, but it is scaled incorrectly - it is 150px wide and not tall.
So my question: how do I get the scaled URL of the manually cropped media thumbnail?
You want to use wp_get_attachment_image_src() to get the resized image - the functionwp_get_attachment_thumb_url() is a shortcut to get the thumbnail size.
$post_id = get_the_ID();
$thumb_id = get_post_thumbnail_id( $post_id );
$img_src = wp_get_attachment_image_src( $thumb_id, 'archive-thumbnail' );
If you edit code related to thumbnails after thumbnails have already been created, you need to regenerate them. Try using the Regenerate Thumbnails plugin.
Using GD Star Rating Wordpress Plugin.
I'm having an extremely tough time trying to figure out how to do something as simple as resizing the rating button.
I have an image that I want to use as thumbs up/down, but it's width is 232px instead of the default max 40px.
Has anyone accomplished resizing the stars/thumbs past 40px or am I the only one in the world with this problem?
To put it simply:
BEFORE
AFTER
If you can do it via css use width:40px !important;height:40px !important;
comment-> It would help if you paste a link to your site.
The new image width is 232px, so the code should be:
width:232px !important;height:232px !important;
But can you be more specific about what issue you are having?
new image being cut off? or is it not resized at all when you view it on browser?
I know how can you change the size of thumb.
Go to : plugins/gd-star-rating/css/gdsr.css.php line:183
you found this:
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: %spx; height: %spx; }\r\n", $size, $size, $size, $size, $size);
change it:
echo sprintf(".gdt-size-%s.gdthumb, .gdt-size-%s.gdthumb a, .gdt-size-%s.gdthumb div { width: 232px; height: 232px ; }\r\n", $size, $size, $size, $size, $size);
change: width and height , after that change the image size.