I am learning to develop WordPress theme and I am unable to find out how to align images, resize or crop them, or display them in a gallery format.
Image Alignment
CSS handles the alignments of images. When a user uploads an image and selects how their image will be aligned, WordPress simply adds a class based on the user's selected alignment (e.g. alignleft, alignright, aligncenter, etc.)
A complete list of such WordPress generated classes can be found here in WordPress codex.
Resize and Crop
It is recommended to use the default image sizes and manipulate the images with CSS, so that the site doesn't generate additional images unnecessarily and thus increase the size of the WordPress folders.
However, if you do need to resize or crop images when they're uploaded, as a theme developer, you can use the add_image_size() function in your theme's functions.php file.
Here are the parameters that this function takes:
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
Here's an example use of the function:
add_image_size( 'custom-size-name', 440, 360 );
To do a hard vs soft crop, you can add a fourth (boolean true/false) parameter in the add_image_size() function.
For example, to do a hard crop:
add_image_size( 'custom-size-name', 440, 360, true );
Read more about this in codex
To use these sizes of post thumbnails, you can do this (inside a loop):
the_post_thumbnail( get_the_ID(), 'custom-size-name' );
or this (outside a loop)
the_post_thumbnail( '123', 'custom-size-name' );
// here 123 is the ID of the post, which has the thumbnail.
Gallery
To show the images in a gallery format, you either need to create a custom gallery view using css and js (or use one of the gallery css/js plugins), or use the default WordPress gallery shortcode.
An example usage of the shortcode in the WYSIWYG editor or the block editor (or even page builders)
[gallery ids="123,345,456,567"]
The ids used in the gallery shortcode refer to the ids of the images, not the posts they're related to (whether they are connected to any post or not).
To use the gallery shortcode in a .php file, use the do_shortcode() function:
<?php echo do_shortcode('[gallery ids="123,345,456,567"]'); ?>
Related
I am trying to limit the images sizes created by themes and plugins.
For instance, if you upload an image to a woocommerce product, I only want the sizes set by woocommerce to be created.
The same for my custom slider plugin; When I upload a slider, I only want the image sizes I set for the slider custom post type to be generated.
Then, to make it more complicated, I created a couple of plugins that don't use CPT, but instead an options page (like my testimonial plugin).
I thought this may work, but it doesn't.
if( get_post_type() == 'product' ) {
add_image_size( '1280-thumb', 1280 );//1280px wide, free high
}
Thank you
Okay, first of all, do regenerate thumbnails and set your image size with same add image size function then check if the image will be cropped or not as per your custom image size try with this one.
add_image_size( 'custom-size', 220, 180, true );
Using this plugin you can do regenerate your existing thumbnails https://wordpress.org/plugins/regenerate-thumbnails/.
I'm making a child theme to the Twentyfifteen theme in wordpress. The theme has a function in it's functions.php that I wan't to remove:
set_post_thumbnail_size( 825, 510, true );
I can remove it from the parents functions.php but I don't want that because I wan't the parent to be untouched. Does anyone know how to do this.
(I wan't to remove it, not change it)
In Wordpress, your theme either supports thumbnails, or it doesn't.
If you do not want to support thumbnails (now called featured images), then add the following to your functions.php:
remove_theme_support( 'post-thumbnails' );
Then the set_post_thumbnail_size() in Twentyfifteen will have no effect.
If you do want to support thumbnails, then you can choose your own thumbnail size. Just run set_post_thumbnail_size() again in your functions.php to set it to what you want it to be:
set_post_thumbnail_size( width, height, cropOrNot );
Note that the only reason to set post thumbnail size is to set a default.
WordPress as installed has 4 default image sizes ('thumbnail', 'medium', 'large' and 'full'). 'full' is the original image, while the others are set in Settings > Media.
All set_featured_image_size() does is add an additional size named 'post-thumbnail'.
When you retrieve a post thumbnail, for example with the_post_thumbnail(), it will by default return the 'post-thumbnail' size of the image. However, the various functions for retrieving post thumbnails allow you to specify any size you want. For example, if you want to use the original image size for your featured image, you can get it by:
<?php the_post_thumbnail( 'full' );
I am using the nextgen gallery plugin for WordPress. I am making a page in which I want to get the nextgen gallery by id and limit the number of images in it to 2. The code I am using to get the gallery is:
$post_id = get_the_ID();
$gallery = get_post_meta (get_the_ID(), 'Gallery', false);
$successes = $gallery[0]; /* Where $array is the variable holding the result */
$gallery_id= $successes[0];
echo do_shortcode('[nggallery id='.$gallery_id.']');
There are six images in the gallery and they are used in the original post. This is just a tour post so I want to limit the number of pictures here. Is this possible?
You can try the following shortcodes:
1.
echo do_shortcode("[nggallery id=$gallery_id images=2]");
the images parameter controls the number of displayed images. 0 means show all. You will also get some pagination links to navigate through gallery's images. I haven't found an option to hide them, so if they are unnecessary you can hide them via css (display: none).
2.
echo do_shortcode("[random max=2 id=$gallery_id]");
which displays randomly maximum 2 pictures from your gallery.
I also recommend the following links:
NextGEN Gallery Shortcodes, var 2.0 and up:
http://www.nextgen-gallery.com/nextgen-gallery-shortcodes/
NextGEN Legacy Shortcodes:
http://www.nextgen-gallery.com/help/shortcodes/
Undocumented NextGEN Gallery shortcodes:
http://www.ralph-kemps.eu/2013/03/19/undocumented-nextgen-gallery-shortcodes/
Hi I just started today on creating my first Wordpress Theme and I am trying to create a featured Image for each post.Aldo I have managed to acomplish that it seems that the sizes I am giving it are not taking effect.Here is my code:
if(function_exists('add_theme_support')){
add_theme_support('post-thumbnails' , array('post'));
set_post_thumbnail_size(200,120);
}
if(function_exists('has_post_thumbnail') && has_post_thumbnail()){
the_post_thumbnail();
}
It seems that my featured images are not always set to the same size.For example if the image is smaller then what size I set it will remain the same , for big images the width is the same but for some the height is different.
What am I doing wrong here?
Are you setting the thumbnail size in functions.php? It will not work properly if it's just in index.php or another theme file.
From the codex:
This feature must be called before the init hook is fired. That means
it needs to be placed directly into functions.php or within a function
attached to the 'after_setup_theme' hook. For custom post types, you
can also add post thumbnails using the register_post_type function as
well.
the_post_thumbnail() displays the thumbnail and should be placed where you want the thumbnail to display.
My site needs to have image based posts, meaning the post is only an image.
Now i tried implementing it with Custom Post Types, but have encoutred problems,
like categories didn't show the right posts, pagination caused problems etc.
Now i thought to myself that i don't need the regular posts and if i could just edit them
to have only the featured image option enabled, life would be much easier.
But i failed to find any information regarding this.
Anyone can help me please?
To add featured image support/option simply add the following code snippet to your functions.php file located inside your theme's root folder
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
and to show the featured image inside your template you can do
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail(); // will show the featured image if you have set any for the post
}
Applicable to Wordpress version-2.9 and higher.
When you add new post just find the featured image meta box and set an featured image from there.
You can also setup image sizes (depending on that images will be displayed) at the front end, just take a look at here.