Layout issues

  • Hello Scott,

    First of all, thank you so much for such an amazing open source plugin. I love it!

    I’m doing some tests in just one page of my site before implementing your plugin everywhere throughout it. I am able to do CSS tweaks, but I am facing two issues that I need help with:

    1. I want to display 6 photos in the feed but there’s something wrong with the layout whenever I select 7 or less. If it’s 8 or more, it’s fine; all the horizontal space is evenly used. But if I choose 7 or less, it leaves blank space to the right. It seems that it divides the whole space by 8 and if a lower number is selected, the difference will be “blank spaces”. In other words, if I pick 6, there will be empty space proportional to 2 images. If I pick 5, there will be 3 blank spaces.
    I realized, if I’m not wrong, that my theme has some CSS selectors that are shared with the plugin (i.e .slick-slider). I don’t know if this or another thing in my CSS can be causing any interference.

    2. I want to remove the photo information of every image when hovering. I’ve read this thread and I think I’ve got that part clear… but don’t know exactly what to do with the file. I’m using a child theme.
    You advice to create parts/wp-instagram-widget.php in your theme. Does that mean creating a folder named “parts” in the theme root folder and add the edited file inside? … excuse my ignorance!

    Thank you very much in advance!!!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Scott (@scottsweb)

    (@scottsweb)

    Hi, it looks to be slick-slider that is causing most of the issues. It is setting a width on each list element. Even if you were to tweak things with CSS, slick-slider looks to be overwriting it with JavaScript.

    You advice to create parts/wp-instagram-widget.php in your theme. Does that mean creating a folder named “parts” in the theme root folder and add the edited file inside?

    That is correct.

    Thread Starter piterkaillada

    (@thebea58)

    Thanks for your response, Scott.

    Would it be possible to rename this particular selector in the plugin files to make it work?

    Is it something that could be done in a child theme or an independent code snippet so changes are not lost in future updates?

    Thank you again for your time!

    Plugin Author Scott (@scottsweb)

    (@scottsweb)

    You can filter many of the selectors in the plugin. You can see the full list here:

    https://github.com/scottsweb/wp-instagram-widget/blob/master/wp-instagram-widget.php#L95-L99

    So if you wanted to say filter the li items. You would use:

    add_filter( 'wpiw_item_class', 'my_instagram_class', 99 );

function my_instagram_class( $classes ) {
	$classes = "instagram-image-list-item"; // your custom class
	return $classes;
}

    Hope that does the trick. You may find that you need to adjust the priority (99) of your filter if your current theme is also filtering these, which it looks to be.

    Thread Starter piterkaillada

    (@thebea58)

    Thanks again!

    I don’t know if I’ll be able to do all that. Seems to big for me.
    I’ll try and let you know.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Layout issues’ is closed to new replies.