width and height attributes img tag

Hey Mohammad Mostafa,

Thank you for using Enfold.

The width and height of the masonry items are defined using css. Why do you need to add those attributes? They are not required. If you really need to add the attributes, then you need to edit the config-templatebuilder > aviashortcode > av-helper-masonry.php file. The required modification may differ depending on the current size settings, but you should see the masonry item markup starting from line 359 of the said file.

Best regards,
Ismael

Hi,

Thank you for the update.

Can we take a look at the page with the masonry element? What is the current Size Settings? Please post the page URL in the private field.

You can get the image dimension using the “wp_get_attachment_image_src” function.

// https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

Look for this code around line 381 of the av-helper-masonry.php file:

if(isset($attachment[0]))
					{
						if($size == 'flex')  
						{
							$img_html  = '<img src="'.$attachment[0].'" title="'.$title.'" alt="'.$alt.'" />';
							$outer_title = '';
						}

						if($size == 'fixed') $img_style = 'style="background-image: url('.$attachment[0].');"';
						$class_string .= " av-masonry-item-with-image";
					}
					else 
					{
						$outer_title = '';
					}

You can probably apply the modification inside that block.

Best regards,
Ismael

Hi,

Thank you for the update.

The size settings is set to “flex”, so you have to edit the av-helper-masonry.php file, and look for this code around line 383:

if($size == 'flex')  
						{
							$img_html  = '<img src="'.$attachment[0].'" title="'.$title.'" alt="'.$alt.'" />';
							$outer_title = '';
						}

Replace it with:

if($size == 'flex')  
						{
							$image_attributes = wp_get_attachment_image_src( $thumb_ID );
							$img_html  = '<img src="'.$attachment[0].'" title="'.$title.'" alt="'.$alt.'" width="'.$image_attributes[1].'" height="'.$image_attributes[2].'" />';
							$outer_title = '';
						}

The modification will add the width and height attribute to the img tag.

Best regards,
Ismael

Hi,

Thank you for the update.

For the image element, you need to modify the image > image.php file in the same directory. Look for this code around line 515:

if($link)
						{
							$output.= "<a href='{$link}' class='avia_image'  {$blank}>{$overlay}<img class='avia_image ' src='{$src}' alt='{$alt}' title='{$title}' $markup_url /></a>";
						}
						else
						{
							$hw = "";
							if(!empty($img_h)) $hw .= 'height="'.$img_h.'"';
							if(!empty($img_w)) $hw .= ' width="'.$img_w.'"';

							$output.= "{$overlay}<img class='avia_image' src='{$src}' alt='{$alt}' title='{$title}' {$hw} $markup_url />";
						}

Replace it with:

if($link)
						{
							$output.= "<a href='{$link}' class='avia_image'  {$blank}>{$overlay}<img class='avia_image ' src='{$src}' alt='{$alt}' title='{$title}' $markup_url width='{$image_attributes[1]}' height='{$image_attributes[2]}' /></a>";
						}
						else
						{
							$hw = "";
							if(!empty($img_h)) $hw .= 'height="'.$img_h.'"';
							if(!empty($img_w)) $hw .= ' width="'.$img_w.'"';

							$output.= "{$overlay}<img class='avia_image' src='{$src}' alt='{$alt}' title='{$title}' {$hw} $markup_url width='{$image_attributes[1]}' height='{$image_attributes[2]}' />";
						}

Best regards,
Ismael

Hi,

Thank you for the update.

Where can we see the issue? Please provide the link to the page with the gallery.

I want to change it for GTMetrix result show images not define width and height in masonry gallery and image element.

The image attributes are not really necessary. You can just ignore the notifications from the Gmetrix results because not defining the width and height attribute doesn’t really affect the page performance.

Best regards,
Ismael