Smart List 7 Image Behavior Inconsistent

Hey Guys!

We’re using smart list 7 quite a bit and it working really well for improving the number of pageviews on the site.

We are seeing some inconsistencies in how images appear based on the method that the image is added to the post.

When an image is placed via URL, we get the desired format to appear- H3, IMAGE, TEXT.

However, when we place an image via upload they image drops to the bottom of the format and the format changes to: H3, TEXT, IMAGE.

Screenshots:

EXAMPLE 1 – Image placed via URL
https://www.diigo.com/item/image/5goq2/2tp9

EXAMPLE 2 – Image uploaded to site
https://www.diigo.com/item/image/5goq2/sunb

Additionally, in EXAMPLE 2, when the image is uploaded, the smart list formatting makes it a linked image with modal window. This does not happen when the image is added via URL.

I’m not sure if the above scenarios are what was intended for the formatting. I just wanted to point it out to you and get some direction in how to make it consistent.

We’d prefer for uploaded images to be formatted the same as EXAMPLE 1 so they appear after H3 and above the text (H3, IMAGE, TEXT). And our preference is that they are not treated as links unless we specifically choose that option when the image is placed in the post.

Keep up the great work, the theme is amazing!

Okay, that makes more sense now. I’d like to modify Smart List 7 to have the image above the text when I use the Add Media button. Can you point out which files control that behavior?

Thanks Bogdan.

I took a look at that file, and yes, way beyond my skills.

I realize that I’m pushing the smart list outside of it’s intended scope but I did find a workaround for those that might want to do the same. It seems that the smart list functionality uses the CSS class wp-image-xxxx (replace xxxx with the image ID) to identify and reposition the images in the smart list layout. That class is added when you insert an image with the Add Media button in the editor.

To override the core smart list functionality you simply need to remove that class. One option is to manually remove it by going through the code in Text mode.

Another option is to apply a filter to always remove/change that class when using the Add Media button. To do that, add the following to your functions.php file:

/* Strip out wp-image css class when using Add Media button */
function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $html = str_replace('wp-image-', 'id-image-', $html);
  return $html;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor', 10, 8);

Instead of removing the class completely, we chose to change the it from wp-image-xxxx to id-image-xxxx just in case we need to use for another purpose in the future.

• This reply was modified 10 years by five40.

Thanks Bogdan- That will come in useful!