Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1143093

    Hi,

    I’m using image element and masonry gallery. But they don’t add width and height attributes to img tag. how can add width and height in image and masonry gallery elements?

    Thank you.

    #1143580

    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

    #1144107

    Hi Ismael,

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

    in this file you said i can not find any width and height how define it?

    Which file and how for image element?

    Thank you.

    • This reply was modified 4 years, 6 months ago by Yoursefzade.
    #1144841

    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

    #1145219

    Hi Ismael,

    If you see private section i explain url and masonry gallery section.

    Thank you.

    #1145593

    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

    #1147740

    Hi Ismael,

    Thank you for your help about masonry gallery. But you don’t said any things about IMAGE ELEMENT how can do for it?

    #1148096

    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

    #1148113

    Hi,

    I have a problem width masonry gallery when i use your code. Every masonry gallery that use in some pages/post scale to width 100 height 100 where is problem?

    Thank you

    #1148446

    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

    #1148458

    Hi,
    If you said doesn’t really affect the page performance then thank you for your time.

    Best regards,
    Yousefzade

    #1148530

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.