Tagged: height, img, Masonry Gallery, width
-
AuthorPosts
-
September 29, 2019 at 3:19 pm #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.
October 1, 2019 at 7:44 am #1143580Hey 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,
IsmaelOctober 2, 2019 at 9:37 am #1144107Hi 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 5 years ago by Yoursefzade.
October 4, 2019 at 4:31 am #1144841Hi,
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,
IsmaelOctober 5, 2019 at 6:23 am #1145219Hi Ismael,
If you see private section i explain url and masonry gallery section.
Thank you.
October 7, 2019 at 2:50 am #1145593Hi,
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,
IsmaelOctober 14, 2019 at 7:58 am #1147740Hi Ismael,
Thank you for your help about masonry gallery. But you don’t said any things about IMAGE ELEMENT how can do for it?
October 15, 2019 at 2:40 pm #1148096Hi,
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,
IsmaelOctober 15, 2019 at 3:26 pm #1148113Hi,
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
October 16, 2019 at 1:01 pm #1148446Hi,
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,
IsmaelOctober 16, 2019 at 1:35 pm #1148458Hi,
If you said doesn’t really affect the page performance then thank you for your time.Best regards,
YousefzadeOctober 16, 2019 at 5:41 pm #1148530Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.