Different scrset's for images
-
I would like to have one scrset for centered images (full-width) and one scrset for right-aligned images.
The full-width images are inserted as large-image size (class=”size-large”) and the aligned images are medium images (class=”size-medium”).
Is it possible to define two <img> scrset’s in the template file?
-
Do you want to have different classes depending on which image size that is selected?
size-large
whenlarge
is being used andsize-medium
whenmedium
is selected?
In that case, I’m afraid I don’t know any good solution. Responsive images simply doesn’t have that possibility yet.
The only solution I can think of right now is some kind of Javascript that changes classes on images based on viewport size.Btw, these are two great resources if you wanna read more about responsive images ??
https://developers.google.com/web/fundamentals/media/images/images-in-markup
https://blog.cloudfour.comI think it was a bit misunderstanding.
I use the rwp_settings for size attributes in the theme template like here: https://github.com/stefanledin/responsify-wp#sizes-attribute
Now I would like to use one rwp_settings for sizes and breakpoints when I insert a large image and a second rwp_settings for sizes and breakpoints for medium images.
Is that possible?
I think I understand now. You don’t wanna have the same settings on medium that you have on large? If medium, use these sizes/srcset…if large, use these sizes/srcset…?
No, this is not possible I’m afraid. But I do think however that it could be done if I added more filters. Let’s say that I would create a filter that is applied right before the original<img>
is converted to a responsive image. In that case, you could change the settings based on the original<img>
.I’ll think about this and play around with it. I hope that you’ll find some working solution until then!
Hi again mawosch!
You can download and try the RWP 1.8 beta if you want. I’ve added a filter calledrwp_edit_attributes
which I believe will solve your problem!This is an example of how you can change the
sizes
attribute if the image has thesize-medium
class:add_filter( 'rwp_edit_attributes', 'edit_attributes' ); function edit_attributes( $attributes ) { if ( strpos($attributes['class'], 'size-medium') ) { $attributes['sizes'] = '(min-width: 150px) 300px, 150px'; } return $attributes; }
This is exactly what it is missing. Define different sets of images based on different image classes.
The class attribute of the image looks like the best selector. I saw you already check that for the
rwp-not-responsive
function.That would be important for handling different images and making the images in the sidebar retina ready.
So where do I have to add that filter in my example?
<?php $posts = get_posts(array( 'rwp_settings' => array( 'sizes' => array('gaf-vollbild-klein', 'gaf-vollbild-mittel', 'gaf-vollbild-klein-ret', 'gaf-vollbild-mittel-ret'), 'retina' => true, 'attributes' => array( 'sizes' => '(max-width: 494px) 478px, (max-width: 646px) 630px, (max-width: 767px) 740px,(max-width: 1018px) 478px, (max-width: 1199px) 630px, 740px' ) ) )); ?>
My logic looks like:
IF class=size-medium THEN scrset A
(scrset A contains images with name size-a, size-b and has breakpoints 1, 2 and 3)
IF class=size-large THEN scrset B
(scrset B contains images with name size-v, size-w and has breakpoints 5, 6 and 7)You understand?
I think so! You should place it in your
functions.php
file.<?php add_filter( 'rwp_edit_attributes', 'edit_attributes' ); function edit_attributes( $attributes ) { $sizes_attribute_when_class_is_size_medium = 'insert_breakpoints_here'; if ( strpos($attributes['class'], 'size-medium') ) { $attributes['sizes'] = $sizes_attribute_when_class_is_size_medium; } return $attributes; } ?>
OK, I will put it into the functions.php. With that level of coding I’m not familiar. Sorry for the questions.
What do you mean with
$sizes_attribute_when_class_is_size_medium
? Is that the name of a variable? So I can define the name on my own?And how do I have to write the
insert_breakpoints_here
? Same way as in my example in post #6?Aha okey, I tried to be clear with that variable name ??
This code will override thesizes
attribute on the<img>
when it has the classsize-medium
.<?php add_filter( 'rwp_edit_attributes', 'edit_attributes' ); function edit_attributes( $attributes ) { if ( strpos($attributes['class'], 'size-medium') ) { $attributes['sizes'] = '(min-width: 150px) 300px, 150px'; } return $attributes; } ?>
Now I tried it. But without success ??
I inserted the code from #9 into the
functions.php
and adjusted the breakpoints.
In the sourcecode there are still the same breakpoints as I defined in the template file.But there should be the same set of images and a new set of breakpoints? Right?
Yes. The
srcset
attribute won’t change, but thesizes
attribute should be overwritten if the original image has thesize-medium
class.
Are you using the RWP 1.8 beta?f***k!!
OK but now I deactivated the old one, deleted it and installed the 1.8 beta. Setup page the same as previous.Here is the start of my
functions.php
<?php /* tagDiv - 2014 - Our portofolio: https://themeforest.net/user/tagDiv/portfolio Thanks for using our theme ! */ add_filter( 'rwp_edit_attributes', 'edit_attributes' ); function edit_attributes( $attributes ) { if ( strpos($attributes['class'], 'size-medium') ) { $attributes['sizes'] = '(max-width: 1199px) 250px, 350px'; } return $attributes; } /* -
Result: Same breakpoints as in template.
Still not working? Oh man, I wish I just could sit down next to you and have a look at your site. I think we would solve everything in no time then ??
What if you add a quickdie(var_dump))
and see if anything happens at all?<?php add_filter( 'rwp_edit_attributes', 'edit_attributes' ); function edit_attributes( $attributes ) { die(var_dump($attributes)); if ( strpos($attributes['class'], 'size-medium') ) { $attributes['sizes'] = '(max-width: 1199px) 250px, 350px'; } return $attributes; }
Warning! Don’t do this on your live site if it has visitors!
Yes, such a meeting would be cool. But my last visit at Nysocken Stugan is some years ago. And next visit is not scheduled.
The die function gave that message:
array(5) { ["sizes"]=> string(136) "(max-width: 494px) 478px, (max-width: 646px) 630px, (max-width: 767px) 740px,(max-width: 1018px) 478px, (max-width: 1199px) 630px, 740px" ["class"]=> string(23) "size-large wp-image-219" ["alt"]=> string(36) "Zentriert eingefügt. Groesse: Gro?" ["width"]=> string(3) "740" ["height"]=> string(3) "440" }
Now I found the problem. :-))
Again something with special characters. I changed the description and alt tags. Removed the German Umlauts “?”, “ü” and the “:” Now it is working.
Thank you very much!!!
The problems are not the Umlauts. Removing the “:” is enough.
- The topic ‘Different scrset's for images’ is closed to new replies.