Cómo fijar tamaño imágenes en la página principal de Wordpress

  • Autor Autor lorena20
  • Fecha de inicio Fecha de inicio
L

lorena20

Beta
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola. Estoy creando una web en Wordpress y he hecho cambios en mi plantilla porque quería que las previsualizaciones se mostrasen como una imagen pequeña y a la derecha un fragmento del texto. El caso es que me gustaría saber cómo puedo hacer que esas imágenes se muestren siempre de un tamaño concreto sin que se estiren o encojan, es decir, que se corten desde el centro o algo así.

He leído que es necesario usar la función the_post_thumbnail pero llevo varios días intentándolo y no lo consigo. O tal vez exista algún plugin que me permita hacer lo que quiero, pero he buscado y no he encontrado nada que me sirva.

ACTUALIZACIÓN: He conseguido resolver el problema. Gracias a todos por vuestra ayuda!
 
Última edición:
Usa un <div> y le das el ancho que quieras. Asignalo como id o clase, por ejemplo .imagen

Dentro de ese div metes el the_post_thumbnail

Y después .imagen img y le das un width: de 100% y height:auto, así la imagen siempre tendrá el ancho y alto del div.
 
Vas bien encaminada con the_post_thumbnail. Puedes echar un vistazo en el archivo funciona.PHP de tu plantilla y comprobar si ya está declarada esa función. Si lo está puedes modificarla y definir el tamaño del thumbnail a tu gusto y si no, en el Codex de WordPress esta explicado como hacerlo funcionar.

Como alternativa es casi seguro que existan plugins que cumplan esa función, quizá te sirva buscar como "Custom thumbnail" o parecido.

Suerte!

Enviado desde mi m2 note mediante Tapatalk
 
Usa un <div> y le das el ancho que quieras. Asignalo como id o clase, por ejemplo .imagen

Dentro de ese div metes el the_post_thumbnail

Y después .imagen img y le das un width: de 100% y height:auto, así la imagen siempre tendrá el ancho y alto del div.

Gracias por responder. He intentado eso que dices pero no lo he conseguido. Te digo lo que he hecho:

1)Creé un div en content-excerpt.php, tal que así (pongo el código entero por si eso ayuda):

<article id="post-<?php the_ID(); ?>" <?php post_class('content-excerpt'); ?>>
<?php the_title( sprintf( '<h2 class="entry-title post-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
<!--<div class="entry-meta postmeta clearfix"><?php dynamicnews_display_postmeta(); ?></div>-->
<div class="imagenmini" style="width:100px;"> the_post_thumbnail() </div>
<?php dynamicnews_display_thumbnail_index(); ?>
<div class="entry clearfix">
<?php the_excerpt(); ?>
<a href="<?php esc_url(the_permalink()) ?>" class="more-link"><?php esc_html_e( 'Read more', 'dynamic-news-lite' ); ?></a>
</div>
<div class="postinfo clearfix"><?php dynamicnews_display_postinfo_index(); ?></div>
</article>


2)En el CSS incluí esto:
.imagenmini img {
width: 100%;
height:auto;
}


No me ha funcionado... ¿He hecho algo mal?


Vas bien encaminada con the_post_thumbnail. Puedes echar un vistazo en el archivo funciona.PHP de tu plantilla y comprobar si ya está declarada esa función. Si lo está puedes modificarla y definir el tamaño del thumbnail a tu gusto y si no, en el Codex de WordPress esta explicado como hacerlo funcionar.

Como alternativa es casi seguro que existan plugins que cumplan esa función, quizá te sirva buscar como "Custom thumbnail" o parecido.

Suerte!

Enviado desde mi m2 note mediante Tapatalk

En functions.php no me aparece ese código, pero sí en un archivo llamado featured-content-slider.php, concretamente me aparece esto:
<?php // Display Post Thumbnail or default thumbnail
if( '' != get_the_post_thumbnail() ) :

the_post_thumbnail('');

else: ?>

He mirado en el codex de Wordpress pero no me aclaro. Los plugins que he encontrado no llegan a funcionar bien.
 
No, the_post_thumbnail no la tienes que declarar en el functions.php.

Cómo se muestran los posts? cuantos por renglón? uno por renglón o usas formato grid (2,3 o más)?

Veo que en tu código hay una función <?php dynamicnews_display_thumbnail_index(); ?> esa sí checa que hace en el functions.php, le da un tamaño?
 
No, the_post_thumbnail no la tienes que declarar en el functions.php.

Cómo se muestran los posts? cuantos por renglón? uno por renglón o usas formato grid (2,3 o más)?

Veo que en tu código hay una función <?php dynamicnews_display_thumbnail_index(); ?> esa sí checa que hace en el functions.php, le da un tamaño?

No he entendido lo de los renglones. En la home aparece un fragmento de los últimos posts, no sé si es eso a lo que te refieres.

En el functions.php no le da ningún tamaño, te lo pego tal cual porque llevo tantas semanas con esto que estoy desesperada:

<?php

/*==================================== THEME SETUP ====================================*/

// Load default style.css and Javascripts
add_action('wp_enqueue_scripts', 'dynamicnews_enqueue_scripts');

function dynamicnews_enqueue_scripts() {

// Get Theme Options from Database
$theme_options = dynamicnews_theme_options();

// Register and Enqueue Stylesheet
wp_enqueue_style( 'dynamicnewslite-stylesheet', get_stylesheet_uri() );

// Register Genericons
wp_enqueue_style( 'dynamicnewslite-genericons', get_template_directory_uri() . '/css/genericons/genericons.css' );

// Register and Enqueue FlexSlider JS and CSS if necessary
if ( ( isset($theme_options['slider_activated_blog']) and $theme_options['slider_activated_blog'] == true )
|| ( isset($theme_options['slider_activated_front_page']) and $theme_options['slider_activated_front_page'] == true ) ) :

// FlexSlider CSS
wp_enqueue_style( 'dynamicnewslite-flexslider', get_template_directory_uri() . '/css/flexslider.css' );

// FlexSlider JS
wp_enqueue_script( 'dynamicnewslite-jquery-flexslider', get_template_directory_uri() .'/js/jquery.flexslider-min.js', array('jquery'), '2.6.0' );

// Register and enqueue slider.js
wp_enqueue_script( 'dynamicnewslite-jquery-frontpage_slider', get_template_directory_uri() .'/js/slider.js', array( 'dynamicnewslite-jquery-flexslider' ), '2.6.0' );

endif;

// Register and enqueue navigation.js
wp_enqueue_script( 'dynamicnewslite-jquery-navigation', get_template_directory_uri() .'/js/navigation.js', array('jquery') );

// Passing Parameters to Navigation.js Javascript
wp_localize_script( 'dynamicnewslite-jquery-navigation', 'dynamicnews_menu_title', esc_html__( 'Menu', 'dynamic-news-lite' ) );

// Register and enqueue sidebar.js
if ( true == $theme_options['sliding_sidebar'] ) {

wp_enqueue_script( 'dynamicnewslite-jquery-sidebar', get_template_directory_uri() .'/js/sidebar.js', array('jquery') );
wp_localize_script( 'dynamicnewslite-jquery-sidebar', 'dynamicnews_sidebar_title', esc_html__( 'Sidebar', 'dynamic-news-lite' ) );

}

// Register Comment Reply Script for Threaded Comments
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}

// Register and Enqueue Font
wp_enqueue_style('dynamicnewslite-default-fonts', dynamicnews_fonts_url(), array(), null );

}


// HTML5shiv for old IE
add_action('wp_head', 'dynamicnews_enqueue_html5shiv');

function dynamicnews_enqueue_html5shiv(){

/* Embeds HTML5shiv to support HTML5 elements in older IE versions plus CSS Backgrounds */ ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.min.js" type="text/javascript"></script>
<![endif]-->

<?php
}


/*
* Retrieve Font URL to register default Google Fonts
* Source: How to add Google fonts to WordPress themes – ThemeShaper
*/
function dynamicnews_fonts_url() {
$fonts_url = '';

// Get Theme Options from Database
$theme_options = dynamicnews_theme_options();

// Only embed Google Fonts if not deactivated
if ( ! ( isset($theme_options['deactivate_google_fonts']) and $theme_options['deactivate_google_fonts'] == true ) ) :

// Set Default Fonts
$font_families = array('Droid Sans:400,700', 'Francois One');

// Set Google Font Query Args
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ),
);

// Create Fonts URL
$fonts_url = add_query_arg( $query_args, '//fonts.googleapis.com/css' );

endif;

return apply_filters( 'dynamicnews_google_fonts_url', $fonts_url );
}


// Setup Function: Registers support for various WordPress features
add_action( 'after_setup_theme', 'dynamicnews_setup' );

function dynamicnews_setup() {

// Set Content Width
global $content_width;
if ( ! isset( $content_width ) )
$content_width = 860;

// init Localization
load_theme_textdomain('dynamic-news-lite', get_template_directory() . '/languages' );

// Add Theme Support
add_theme_support('post-thumbnails');
add_theme_support('automatic-feed-links');
add_theme_support('title-tag');
add_editor_style();

// Add Custom Background
add_theme_support('custom-background', array('default-color' => 'e5e5e5'));

// Set up the WordPress core custom logo feature
add_theme_support( 'custom-logo', apply_filters( 'dynamicnews_custom_logo_args', array(
'height' => 50,
'width' => 350,
'flex-height' => true,
'flex-width' => true,
) ) );

// Add Custom Header
add_theme_support('custom-header', array(
'header-text' => false,
'width' => 1340,
'height' => 200,
'flex-height' => true));

// Add Theme Support for wooCommerce
add_theme_support( 'woocommerce' );

// Register Navigation Menus
register_nav_menu( 'primary', esc_html__( 'Main Navigation', 'dynamic-news-lite' ) );
register_nav_menu( 'secondary', esc_html__( 'Top Navigation', 'dynamic-news-lite' ) );
register_nav_menu( 'footer', esc_html__( 'Footer Navigation', 'dynamic-news-lite' ) );

// Register Social Icons Menu
register_nav_menu( 'social', esc_html__( 'Social Icons', 'dynamic-news-lite' ) );

}


// Add custom Image Sizes
add_action( 'after_setup_theme', 'dynamicnews_add_image_sizes' );

function dynamicnews_add_image_sizes() {

// Add Custom Header Image Size
add_image_size( 'custom_header_image', 1340, 200, true);

// Add Featured Image Size
add_image_size( 'featured_image', 860, 280, true);

// Add Slider Image Size
add_image_size( 'slider_image', 880, 290, true);

// Add Frontpage Thumbnail Sizes
add_image_size( 'category_posts_wide_thumb', 420, 140, true);
add_image_size( 'category_posts_small_thumb', 90, 90, true);

// Add Widget Post Thumbnail Size
add_image_size( 'widget_post_thumb', 75, 75, true);

}


// Register Sidebars
add_action( 'widgets_init', 'dynamicnews_register_sidebars' );

function dynamicnews_register_sidebars() {

// Register Sidebar
register_sidebar( array(
'name' => esc_html__( 'Sidebar', 'dynamic-news-lite' ),
'id' => 'sidebar',
'description' => esc_html__( 'Appears on posts and pages except the full width template.', 'dynamic-news-lite' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s clearfix">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widgettitle"><span>',
'after_title' => '</span></h3>',
));

// Register Header Widgets
register_sidebar( array(
'name' => esc_html__( 'Header', 'dynamic-news-lite' ),
'id' => 'header',
'description' => esc_html__( 'Appears on header area. You can use a search or ad widget here.', 'dynamic-news-lite' ),
'before_widget' => '<aside id="%1$s" class="header-widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="header-widget-title">',
'after_title' => '</h4>',
));

// Register Magazine Homepage
register_sidebar( array(
'name' => esc_html__( 'Magazine Homepage', 'dynamic-news-lite' ),
'id' => 'frontpage-magazine',
'description' => esc_html__( 'Appears on Magazine Homepage template only. You can use the Category Posts widgets here.', 'dynamic-news-lite' ),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));

}


/*==================================== INCLUDE FILES ====================================*/

// include Theme Info page
require( get_template_directory() . '/inc/theme-info.php' );

// include Theme Customizer Options
require( get_template_directory() . '/inc/customizer/customizer.php' );
require( get_template_directory() . '/inc/customizer/default-options.php' );

// include Customization Files
require( get_template_directory() . '/inc/customizer/frontend/custom-slider.php' );

// Include Extra Functions
require get_template_directory() . '/inc/extras.php';

// include Template Functions
require( get_template_directory() . '/inc/template-tags.php' );

// Include support functions for Theme Addons
require get_template_directory() . '/inc/addons.php';

// include Widget Files
require( get_template_directory() . '/inc/widgets/widget-category-posts-boxed.php' );
require( get_template_directory() . '/inc/widgets/widget-category-posts-columns.php' );
require( get_template_directory() . '/inc/widgets/widget-category-posts-grid.php' );
require( get_template_directory() . '/inc/widgets/widget-category-posts-single.php' );

// Include Featured Content class
require( get_template_directory() . '/inc/featured-content.php' );
 
Estudiare muy bien esto, gracias amigo estoy aprendiendo.

Muy buen foroo un saludo muchachones :encouragement:
 
Sigo con esto y no consigo hacerlo...
 
Cuál es tu sitio?
 
Podrías, en vez de utilizar la función por defecto de wordpress instalar el plugin Advanced Custom Fields y utilizarlo para hacer la llamada a la imagen y de ahí configurarlo.
 
Cuál es tu sitio?

bateriailimitada.com En realidad la web no es mía, es de un amigo y le dije que yo me encargaba de ponerla a su gusto, pero no soy capaz...

Podrías, en vez de utilizar la función por defecto de wordpress instalar el plugin Advanced Custom Fields y utilizarlo para hacer la llamada a la imagen y de ahí configurarlo.

Gracias por el consejo. He probado el plugin que me has recomendado pero no consigo lo que quiero.
 
He estado probando miles de cosas y finalmente he conseguido lo que quería. Gracias a todos los que me habéis ofrecido ayuda; aunque no lo creáis me ha sido muy útil. Realmente lo hice cambiando algunas cosas en functions.php y en el archivo que llamaba al excerpt siguiendo las directrices del codex de Wordpress, especialmente lo referente a la función the_post_thumbnail. Gracias a todos! Doy el tema como solucionado.
 
Atrás
Arriba