Cómo abrir enlace imagen en nueva pestaña al pulsar

  • Autor Autor Denarius
  • Fecha de inicio Fecha de inicio
Denarius

Denarius

Gamma
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Pues como dice el título, a ver si alguien puede echarme una manita (y no al cuello:welcoming🙂 con mi plantilla…Mediante un shortcode, al enlazar una imagen con una URL, y pulsar sobre la primera, se va al enlace especificado. El asunto es que, al hacerlo, se abre en la misma ventana (independientemente de que el link sea interno o externo).

Esto sólo ocurre cuando lo enlazado es una imagen porque, por ejemplo, si pongo un ‘botón’, puedo aplicarle el atributo target=”blank” (o “self”, según me interese) y decidir cómo quiero que se abra, cosa que NO sucede con el shortcode para las imágenes.
Indagando, he visto que el .php de los botones, sí tiene el atributo “target” pero, sin embargo, en el de las imágenes, sólo veo el “rel”…Vaya por delante, que mis nociones de .php son “más-bien-limitaditas-tirando-a-no-me-entero-de-casi-ná” pero, no le tengo miedo a casi nada, y estoy dispuesta a intentarlo (aunque me cargue el blog entero...qué peligro:welcoming🙂. ¿Habría alguna forma de modificar el .php del shortcode de las imágenes para poder usar el atributo “target”? El código es el siguiente:

PHP:
add_shortcode('sized_image', 'shortcode_sized_image');

function shortcode_sized_image( $atts, $content = null) {

	extract(shortcode_atts(
        array(
			'size' => '60-60', 
			'image' => '',
			'left' => '0',
			'right' => '0',
			'alt' => '',
			'link' => '#',
			'lightbox' => 'yes',
			'rel' => ''
    ), $atts));	

	//Size
	if($size == '60-60') { 
		
		$width = 52; $height = 52;

	}elseif($size == '90-70') {
	
		$width = 82; $height = 64;

	}elseif($size == '105-75') {
	
		$width = 97; $height = 69;

	}elseif($size == '185-100') {
	
		$width = 173; $height = 90;

	}elseif($size == '225-130') {
	
		$width = 213; $height = 120;

	}elseif($size == '295-150') {
	
		$width = 283; $height = 140;

	}elseif($size == '310-160') {
	
		$width = 298; $height = 150;

	}elseif($size == '480-220') {
	
		$width = 468; $height = 210;

	}elseif($size == '620-200') {
	
		$width = 608; $height = 190;

	}

	//Lightbox
	if($lightbox == 'yes') {
	
		if($rel != '') {
		
			$rel_value = 'tag['.$rel.']';
			$link_url = $image;
		
		}else{
		
			$rel_value = 'tag';
			$link_url = $image;
		
		}
		
	
	}else{
	
		$rel_value = 'bookmark';
		$link_url = $link;
	
	}

	if($lightbox =='yes') {
		$class_fade = 'type-image';
	}else{
		$class_fade = 'type-more';
	}

	$output = '<div class="thumb-preloader thumb-fade thumb-move sized-image-wrap sized-image-'.$size.'" style="margin-left: '.$left.'px; margin-right: '.$right.'px;">';
	$output .= '<figure class="'.$class_fade.'">';
	$output .= '<a href="'.$link_url.'" class="preloader" rel="'.$rel_value.'" alt="'.$alt.'" title="'.$alt.'">';
	$output .= '<img src="'.FrameWork_Url.'/plugins/timthumb.php?src='.$image.'&amp;h='.$height.'&amp;w='.$width.'&amp;zc=1" alt="'.$alt.'" title="'.$alt.'" />';
	$output .= '<div class="overlay"></div><div class="fade-hover hide"></div>';
	$output .= '</a>';
	$output .= '</figure>';
	$output .= '</div>';

	return $output;

}


?>

O quizás hay algún plugin (uso WP) que solucione esto y yo aquí, “enredando”:welcoming:, pero lo que he encontrado es sólo para links externos y, los 2 que he probado, tampoco funcionan…

Gracias por anticipado:drunk:
 
A ver si estoy bien... Solo tienes que añadir en las propiedades del link el target para que quede de la siguiente manera:

Link interno
<a href="'.$link_url.'" class="preloader" rel="'.$rel_value.'" alt="'.$alt.'" title="'.$alt.'" target="_self">

Link externo
<a href="'.$link_url.'" class="preloader" rel="'.$rel_value.'" alt="'.$alt.'" title="'.$alt.' target="_blank">

No se si a eso te referias cuando decias link interno (que se abra dentro de la misma pagina) y link externo (que se abra en una ventana aparte)
 
Gracias por responder ChronoMX,

Me explico fatal (me va quedando claro🙄): cuando digo "link interno" me refiero a enlaces a otras páginas o entradas de mi blog. Por ejemplo: tengo una página de "Asignaturas de primer curso" y pongo un link a la entrada llamada "Matemáticas I", otro a la entrada de "Estadísticas", etc. Es decir: links a otras secciones del blog. Por externos, me refiero a enlaces hacia páginas de terceros (el link de tu blog, por ejemplo, o el link de una universidad).

Sé que se puede hacer que el blog "actúe" de una u otra forma según los enlaces sean internos (míos) o externos (de terceros), bien abriendo esos enlaces en la misma ventana que estás visitando ("self") o bien abriéndolos en una nueva ventana/pestaña("blank"). Lo que intento es que los abra todos en una nueva ventana/pestaña.

EDITO: Acabo de encontrar una forma (que no encontré esta tarde buscando...Lo cual significa que no busqué del todo bien, jeje). Para que todos los links se abran en una pestaña nueva, hay que colocar el siguiente código en el header.php

EDITO (II): El código anterior, tenía un fallo (un GRAN fallo para mi gusto) y es que, "externalizaba" cualquier link, incluso los de paginación dentro del blog. He encontrado este otro, que permite indicar nuestro dominio, para que 'discrimine' los enlaces: los internos los abre en la misma ventana (no queremos que los visitantes de vayan¿no?🙂) y los externos, los abre en una nueva. Probado y funcionando (se coloca en el header.php y listo).

PHP:
<script language="JavaScript">
var dominio = "TUDOMINIO.com";
function LinksExternos() {
var Externo;
if (document.getElementsByTagName('a')) {
for (var i = 0; (Externo = document.getElementsByTagName('a')[i]); i++) {
if (Externo.href.indexOf(dominio) == -1) {
Externo.setAttribute('target', '_blank');
}
}
}
}
window.onload = function() {
LinksExternos();
}</script>

A mí me ha fucionado perfecto, por si a alguien más le sirve😉
 
Última edición:
Atrás
Arriba