Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1320466

    for background images set to cover the entire screen result in very blurred backgrounds on small screens.
    The reason for this seems to be the use of srcset for these images, which uses the screen width to place the alternative image.

    for those images that are meant to react responsive ( image albs or contain backgrounds ) that is ok – but for covering images not.

    Is there a way to exclude background-images with cover setting from srcset ?

    ________________
    Edit My mistake – it is the sliders where images are set to stretch to the full-width of the screen – but set to a min-height due to a lot of content.
    F.e. set to a min-height to 430px – then even on small screens ( iphone 6 portrait mode ) the image from srcset should be taken that fullfill the height option – and not the width.
    – i do not want to have complicated calculations here – but for me it would be enough if i could decide to exclude this alb from srcset.

    #1320615

    Hey Guenter,

    Thank you for the inquiry.

    Looks like you are using the Fullwidth Slider, which does not set the slide image as background. Are you referring to the Fullscreen Slider element? The theme is using the post_thumbnail_html filter to modify the html of the attachment or image and apply the wp-image-id class name. You can find the function in the enfold/framework/php/class-responsive-images.php -> add_attachment_id_to_img.

    Best regards,
    Ismael

    #1320683

    My mistake – Yes you are right in this case of the above link. This is a full-width slider element. It would be nice if I could use f.e. a class (similar to using lightbox or not ) to prevent the srcset from being used. In general, it makes sense to use the Responsive Images feature, but causes images that are stretched to the screen width to become blurry at small screen widths.

    Or present from srcset the image that fits the min-height option – see here what happens if the min-height determines the presented image:

    #1320690

    A strange thing is that firefox will show me that the 1030×433 image has been taken – but see yourself – that couldn’t be right:

    #1320835

    Hi,

    We could modify the class-responsive-images.php > prepare_single_image function a bit and add a condition which prevents the theme from adding the scrset attribute when an array contains the current attachment or image ID. We could also add a filter so that we could modify the array in the future.

    Look for this code inside the function..

    if( is_numeric( $attachment_id ) || 0 != $attachment_id )
    				{
    					$new_img = $this->add_attachment_id_to_img( $new_img, $attachment_id );
    				}
    

    .., and replace it with:

    	if( (is_numeric( $attachment_id ) || 0 != $attachment_id) && !in_array($attachment_id, apply_filters("avf_srcset_exclude_images", array())) )
    				{
    					$new_img = $this->add_attachment_id_to_img( $new_img, $attachment_id );
    				}
    

    The filter can be used as follows.

    add_filter("avf_srcset_exclude_images", function($exclude) {
    	$exclude = array(123, 111, 141);
    	return $exclude;
    });
    

    Best regards,
    Ismael

    #1321049

    wow – many thanks – and it will be part of one of the next updates?
    ________
    But is that a good functionality? If i will use the image in an image alb ( and lightbox ) – i would like to have the srcset option. In this case it will react responsive so a srcset makes sense.
    Or do i misunderstand that function? on my example page in private content – the image get the same : wp-image-3026 . The 3026 is that ID i have to use in the snippet?
    I don’t want to exculde the whole image from srcset but f.e. the image in a fullwidth slideshow where the slideshow has a min-height option
    on those sliders the image will be very blurry when we have a very small screen ( f.e. iphone5 : 320px)

    #1321208

    Hi,

    This is not going to be included in the next patch. We are just trying to provide a possible solution. You could also remove the make_image_responsive function from the enfold/config-templatebuilder/avia-shortcodes/av-helper-slideshow.php line 787.

    $img_tag = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' title='{$linktitle}' alt='{$linkalt}' {$markup_url} {$img_style} />";
    						$img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $slide->ID, $this->config['lazy_loading'] );
    

    Maybe add a new element option or toggle in the enfold/config-templatebuilder/avia-template-builder/php/class-popup-templates.php where you can disable/enable srcset attribute or responsive images for the slider. Something like:

    /**
    		 * Responsive Images Option
    		 * 
    		 * @since 4.8.6.2
    		 * @param array $element
    		 * @return array
    		 */
    		protected function responsive_image_toggle( array $element )
    		{
    			$desc  = __( 'Enable responsive images or add srcset attribute to slider images.', 'avia_framework' ) . ' '; 
    
    			$id = isset( $element['id'] ) && ! empty( $element['id'] ) ? $element['id'] : 'responsive_srcset';
    			$std = isset( $element['std'] ) && in_array( $element['std'] , array( 'disabled', 'enabled' ) ) ? $element['std'] : 'enabled';
    			$required = isset( $element['required'] ) && is_array( $element['required'] ) ? $element['required'] : array();
    			$lockable = isset( $element['lockable'] ) ? $element['lockable'] : false;
    
    			$c = array(
    							array(
    								'name'		=> __( 'Responsive Images', 'avia_framework' ),
    								'desc'		=> $desc,
    								'id'		=> $id,
    								'type'		=> 'select',
    								'std'		=> $std,
    								'lockable'	=> $lockable,
    								'required'	=> $required,
    								'subtype'	=> array(
    													__( 'Add srcset attribute', 'avia_framework' )	=> 'enabled',
    													__( 'Remove srcset attribute', 'avia_framework' )		=> 'disabled'
    												)
    							)
    				);
    
    			if( isset( $element['no_toggle'] ) && true === $element['no_toggle'] )
    			{
    				$template = $c;
    			}
    			else
    			{
    				$template = array(
    								array(	
    									'type'			=> 'template',
    									'template_id'	=> 'toggle',
    									'title'			=> __( 'Performance', 'avia_framework' ),
    									'content'		=> $c 
    								),
    					);
    			}
    
    			return $template;
    		}
    
    

    You can then add a condition like so:

    $img_tag = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' title='{$linktitle}' alt='{$linkalt}' {$markup_url} {$img_style} />";
    if($responsive_srcset == "enabled") {
        $img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $slide->ID, $this->config['lazy_loading'] );
    }
    

    Best regards,
    Ismael

    #1321285

    why isn’t it possible to have an exclude class like on : $.fn.avia_activate_lightbox = function(variables)
    we have there a possibility to exclude from lightbox function by adding a class to a parent-element.
    This seems to be a very simple way to do that. If we like to exclude it from srcset we can give a class to the alb element itself – or – just a checkbox under the f.e. “select slide content”.

    #1321341

    Hi,

    That could also work. We have to modify the config-templatebuilder\avia-shortcodes\slideshow_fullsize\slideshow_fullsize.php file, around line 1073, add this code below to pass the class names to the avia_slideshow object.

    $slider->set_extra_class( $meta["el_class"] );
    

    In the config-templatebuilder\avia-shortcodes\av-helper-slideshow.php, around line 789, we could check if the class name “nosrcset” exists or not.

    	if(false == strpos($this->config['class'], "nosrcset")) {
    							$img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $slide->ID, $this->config['lazy_loading'] );
    						}
    

    The srcset attribute should not be added whenever the “nosrcset” is used as a custom css class name for a Fullwidth Slider element.

    Best regards,
    Ismael

    #1321358

    it works this way:

    if( $this->config['bg_slider'] != 'true' && empty( $video ) )
    {
    	$img_style = '';
    	if( ! empty( $this->config['min_height'] ) && $this->config['min_height'] != '0px' )
    	{
    		$percent = 100 / ( 100 / $img[2] * (int) $this->config['min_height'] );
    		$this->config['min_width'] = ceil( ( $img[1] / $percent ) ) . 'px';
    		
    		$img_style .= AviaHelper::style_string( $this->config, 'min_height', 'min-height' );
    		$img_style .= AviaHelper::style_string( $this->config, 'min_width', 'min-width' );
    		$img_style  = AviaHelper::style_string( $img_style );
    	}
    // here is the new check
    	if(false == strpos($this->config['class'], "nosrcset")) {
    		$img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $slide->ID, $this->config['lazy_loading'] );
    	}
    	
    	$img_tag = "<img src='{$img[0]}' width='{$img[1]}' height='{$img[2]}' title='{$linktitle}' alt='{$linkalt}' {$markup_url} {$img_style} />";
    
    	$html .= $img_tag;
    }

    Thanks – that’s a feasible solution.
    Can be closed ( maybe this will be a nice to have on general )
    i did it for fullscreenslider too!
    But i guess there are other albs that could benefit from it too.
    So a slightly different way would have to be found.

    #1321491

    hm ?
    rejoiced too soon!
    if I place two sliders the one with the class: nosrcset
    the other without – both times the srcset is suppressed.

    #1321712

    Hi,

    It works fine on our end. Please check the screenshot below. Only the slider with the nosrcset class name removes the srcset attribute.

    Screenshot: https://imgur.com/abMifmz

    Have you tried selecting the original size of the image in the Styling > Slideshow Settings > Slideshow Image and Video Size settings?

    Best regards,
    Ismael

    #1321858

    is the replacement code i posted above correct?
    and the place i inserted the extra_class – just before the other extra_class

    $slider = new avia_slideshow( $atts );
    $slider->set_extra_class( $meta["el_class"] );
    $slider->set_extra_class( $stretch );

    and please try in your constellation to use the same image in both sliders.

    #1321860

    Hi!

    Both sliders are actually using the same set of images. We just displayed the 4th image in the first slider and the first one in the other because they are the closest, and so that we can show the difference. Did you modify line 789 of the av-helper-slideshow.php file?

    if(false == strpos($this->config['class'], "nosrcset")) {
    							$img_tag = Av_Responsive_Images()->make_image_responsive( $img_tag, $slide->ID, $this->config['lazy_loading'] );
    						}
    

    Regards,
    Ismael

    #1321867

    there are two instances of $img_tag = Av_Responsive_Images()->make_image_responsive( …
    arround line 412 and arround line 789 first i tried only the 789

    #1321952

    Can be closed – guess Guenter found a better solution (for the slider)

    • This reply was modified 4 days, 9 hours ago by  Guenni007.
    #1321975

    Hey!

    Alright. Glad to know there is a better solution. Please feel free to open a new thread if you need anything else.

    Have a nice day.

    Regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘exclude images from srcset responsive react.’ is closed to new replies.