Support » Plugin: Just Responsive Images » Responsive Example

  • Resolved Anonymous User 14978628

    (@anonymized-14978628)


    Hi Alex, so i’ve tried to follow the github documentation but it’s not that easy for a beginner! I was hoping you could lend a hand? 🙂

    I tried this sample code just to test it out so it would resize images for tablet devices, but when i used the code below it crashed my site and gave a 500 error:

    note: this was just a test for tablet sizes:

    add_filter('rwd_image_sizes', 'TABLET-510');
    function my_rwd_image_sizes( $image_sizes ) {
    	$my_image_sizes = array( visual );
    	return $my_image_sizes;
    }
    
    return array(
    	'visual' => array(
    		array(
    			array( 1920, 500, true ),
    			// responsive options:
    			...
    		),
    		'TABLET-510' => array(
    			array( 510, 9999 ),
    'picture' => '<source srcset="{src}" media="(min-width: 600px)">',
    		),
    		'mobile' => array(
    			array( 414, 200, true ),
    			// responsive options:
    			...
    		),
    	),
    );

    Can you tell me what i have done wrong?

    I have created the following sizes in my functions.php

    add_image_size( 'TABLET-350', 350, 9999 );
    add_image_size( 'TABLET-510', 510, 9999 );
    add_image_size( 'TABLET-933', 933, 9999 );

    I would like to display a regular full sized image for (min-width: 1024px), to display TABLET-933 for (min-width: 600px), and to display TABLET-350 for (min-width: 320px).

    How can i achieve this using your plugin to output a picture element? With the correct functions filter for these sizes?

    I had been using another plugin to do this previously, but discovered it prevents images from lazy loading.

    Do you know if there is an issue when using the picture element and lazy loading?

    Thanks

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi @martychc23,

    I don’t want to offend you, but I recommend to read about WP Hooks and Filters first. Your server will really return error 500 (or in reality, it’s a fatal error) with the code provided.

    To fix your code:

    * Remove it 🙂
    * Make a separate file in your theme called “rwd-image-sizes.php” (for example).
    * Place your config array there (the part starting with return array(...).
    * In your functions.php create a function like:

    function my_rwd_image_sizes( $image_sizes ) {
    	return include get_stylesheet_directory() . '/rwd-image-sizes.php';
    }

    (this function will load array from a separate file and return it to a caller)
    * Register a filter hook, which init the plugin with your new function:
    add_filter('rwd_image_sizes', 'my_rwd_image_sizes');

    And you don’t need to register any sizes with add_image_size()!

    Thank you for the answer.

    The description you give shows that your plugin is not easy to use.

    The use in the code of such constructions as many points

    array (1920, 500, true)
    // responsive options:

    ),

    leads an ordinary user to errors.

    Doesn’t it make it difficult for you to give a step-by-step description of the sequence of actions on any real example with a code working without errors?

    Full working config array can be found on github docs https://github.com/justcoded/just-responsive-images/#pre-defined-rwd-set.

    This plugin is for professionals, who want to get the highest performance and score in google page speed.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    @korfiati_a

    I agree, this plugin isn’t for beginners which really limits its userbase.

    I have found another plugin with a simple method for adding responsive images. You just need to select the image sizes in the plugin, or set your own media queries in the plugin options.

    Is working well for me!

    https://wordpress.org/plugins/responsify-wp/

    @Martychc23

    Thanks you.
    I watched this plugin.

    • This reply was modified 2 years, 10 months ago by korfiati_a.

    @aprokopenko

    Maybe I’m not right.
    Excuse me.
    But professionals do not need your plugin.
    Users need the plugin, but they are not interested in helping them.

    @korfiati_a

    We do a lot of WP websites based on custom designs. And responsiveness itself is a complex topic as for me. Especially responsive images, especially when you need to display different images in the same container based on a screen resolution.

    Such settings should not be a part of CMS settings, because usual user can break something inside by mistake. Furthermore, if you have several environments you need to transfer these changes somehow and the best way is to keep these settings as a configuration file and move changes through a git repository.

    That’s why we don’t have a user interface in the admin area and you need to know PHP and WP to use it.

    Furtermore, our plugin works faster because of resize-on-demand and keep uploads size much smaller, than registering all sizes with WP add_image_size()

    But anyway thanks for your feedback. I will think can we do it easier to use.

    If you write what was complex for you – this will help me to think about it.

    Thank you for the answer!

    And thanks for the work you do.
    It is good that you are ready to help users.

    I think it will be enough to describe the step-by-step steps for setting up from the plugin (deciphering the steps). What you described on github is a great start. It is necessary to make clarifications and additions for a complete understanding.

    If you are ready, I can help you with this.

    Any contributions are welcome 🙂

    I can write that I do not understand in your description. And perhaps this is what will improve your help for users.
    Maybe not to clog this thread of answers, I write to you in the mail?

    Please write to aprokopenko@justcoded.com

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Responsive Example’ is closed to new replies.