Support ForumCan I turn portfolio cubes from background-image to IMG element – Support Forum

Can I turn portfolio cubes from background-image to IMG element

milosholaya — Wed, 18 Mar 2015 17:40:22 +0000

Hello IshYo,

You maybe remember me, I’m using portfolio cubes as thumbnails for my posts (on https://pigtelligent.com), so I would like to turn them from background-image to IMG element, so it could be more optimized for search engines and I would also like to add alt tag to these thumbnails.

Please note that I am not using any of the hover effects on portfolio cubes, but the Portfolio element layout is perfect for me because of its responsiveness.

My question would be: is there an easy way to turn portfolio cubes to IMG element?

Thanks,
Milosh

Reply To: Can I turn portfolio cubes from background-image to IMG element

IshYoBoy — Thu, 19 Mar 2015 06:46:08 +0000

Hi Milosh,

Sure we do remember you :) Still loving your artworks.

You need to edit the portfolio PHP template and output the image manually. These are the steps you need to apply to “portfolio.php” file:

Override shortcode template in a child theme

Find this code:

$return .= '<div class="ish-p-item">';
if ( is_array( $img_details ) ){
	$return .= '<div class="ish-p-img" style="background-image: url(\'' . $img_details[0] . '\');"></div>';
}
else{
	$return .= '<div class="ish-p-img"></div>';
}

$return .= '

if ( is_array( $img_details ) ){

$return .= '

. $img_details[0] . '\');">

}

else{

$return .= '

}

And output the image inside the div with “ish-p-img” class.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Can I turn portfolio cubes from background-image to IMG element

milosholaya — Thu, 19 Mar 2015 10:20:42 +0000

Thanks for your kind words. :) And thanks for the advice!

I did it, now I just need to add the ALT tag to the thumbnail images. What is the shortcode I should use to get the Post Title as ALT tag?

Reply To: Can I turn portfolio cubes from background-image to IMG element

IshYoBoy — Fri, 20 Mar 2015 07:08:35 +0000

Hey,

Could you please paste the code you are using to display the image?

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Can I turn portfolio cubes from background-image to IMG element

milosholaya — Fri, 20 Mar 2015 07:47:53 +0000

Here it is:

$return .= '<div class="ish-p-img"> </div>';

1 2	$return .= ' . $img_details[0] . '" alt="' . #I don't know. Have to ask IshYoBoy.# . '"/> ';

Reply To: Can I turn portfolio cubes from background-image to IMG element

IshYoBoy — Fri, 20 Mar 2015 12:31:34 +0000

Hi Milosh,

Thanks. To get the title of the current portfolio item just use the standard wordpress function get_the_title()

So something like this:

// get_the_title() function used in the example below:
$return .= '<div class="ish-p-img"> </div>';

1 2	// get_the_title() function used in the example below: $return .= ' . $img_details[0] . '" alt="' . get_the_title() . '"/> ';

If you need the alt that is set in the settings of the featured image or anything else, don’t be afraid to check google ;)

E.g.: https://wordpress.org/support/topic/how-to-display-alt-text-of-featured-image

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Can I turn portfolio cubes from background-image to IMG element

milosholaya — Fri, 20 Mar 2015 23:37:31 +0000

Thank you a lot! It did the trick.

Reply To: Can I turn portfolio cubes from background-image to IMG element

IshYoBoy — Mon, 23 Mar 2015 06:36:13 +0000

Glad to hear that ;)

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market