Instagram widget issue + a customization

Hi,

1-The instagram widget in my homescreen seems to be loading 1 image only and the rest fail to load, Check it out: https://gyazo.com/4a25d74ac2c233de8034c0e8f9997000

2-In this image: https://gyazo.com/d8a23450f03752d4466287a1e0a813e1
A- how to I translate fields like “Browse Category”
B- How to make the search bar wider like you did in this theme: https://woodmart.xtemos.com/demo-electronics/demo/electronics/

Thanks!

Hello,

Please provide your FTP access to settle the Instagram issue.

You can rewrite all theme and plugin texts via PO file in WordPress. Here is a video tutorial that should help you translate your website texts with a Loco Translate plugin https://www.youtube.com/watch?v=D3NsDdMzsls&list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&index=3

On our demo “Select category” has been activated http://prntscr.com/lvxqul and also change the row flex layout http://prntscr.com/lvxre1

Best Regards

Hi,

-I’ve included FTP account access in private.

– Sorry i forgot to mention that I’m using WPML, where can I find the same area to translate such feilds?

-Thanks, this worked!

Hello,

You have provided incorrect FTP https://gyazo.com/8150135165923d6bfa3e3093cb6e8375

Best Regards

I resent the details.

by the way please dont forget to answer my question about wpml.

Thanks.

Hello,

Your FTP access works, however, there is no WordPress installation.

If you translate with WPML navigate to WPML > Strings Translation

Best Regards

Oh sorry! my bad… I pointed the ftp path to an empty area.
please try now with the same credentials and it should work.

Thanks.

It may be some conflict with some of the installed plugins. Try to disable them one by one to see which of them causes this.

hello Artem, are you sure you replied to the correct post? 😀
because like I said, its working now, try with the same login details and it should work 🙂

Thanks.

I mean the Instagram problem. It may be due to some of the installed plugins.

I’m sorry this is an old article, I have found the plugin causing my instagram issue, its Jetpack. which i disabled, but today I realized its extremely important and I really needed. And I believe most wordpress websites have this plugin, how can we solve this issue?
If you needed FTP access, the current ones are in private content.

Thanks.

Hello,

To check the problem, we deactivate Jetpack, but after activation, it asks for a login, could you please activate it from your account?

Kind Regards
XTemos Studio

Hello Eric,

I have reactivated Jetpack and connected my account. please take a look at the instagram widget now.

Thanks.

Hello,

The problem is that Jetpack loads pictures on CDN and they stop working try to disable this option http://prntscr.com/m4tr8p

Kind Regards
XTemos Studio

Awesome! Thanks a lot Eric!

-Is there a way to reverse RTL effect on this widget only In Arabic version? Because it messes the order of my images.

Thanks.

Try to add the following PHP code snippet to the child theme functions.php file to do this

	function woodmart_shortcode_instagram( $atts, $content = '' ) {
		$output = $pics_classes = $picture_classes = $owl_atts = '';
		extract(shortcode_atts( array(
			'title' => '',
			'username' => 'flickr',
			'number' => 9,
			'size' => 'medium',
			'target' => '_self',
			'link' => '',
			'design' => 'grid',
			'spacing' => 0,
			'spacing_custom' => 6,
			'rounded' => 0,
			'per_row' => 3,
			'hide_mask' => 0,
			'hide_pagination_control' => '',
			'hide_prev_next_buttons' => '',
			'el_class' => '',
		), $atts ));

		$carousel_id = 'carousel-' . rand(100,999);

		ob_start();

		$class = 'instagram-widget';

		$class .= $el_class ? ' ' . $el_class : '';

		if( $design != '' ) {
			$class .= ' instagram-' . $design;
		}

		if( $rounded == 1 ) {
			$class .= ' instagram-rounded';
		}

		if ( ! $spacing ) {
			$spacing_custom = 0;
		}

		if ( $design == 'slider' ) {
			$custom_sizes = apply_filters( 'woodmart_instagram_shortcode_custom_sizes', false );

			$owl_atts = woodmart_get_owl_attributes( array(
				'carousel_id' => $carousel_id,
				'hide_pagination_control' => $hide_pagination_control,
				'hide_prev_next_buttons' => $hide_prev_next_buttons,
				'slides_per_view' => $per_row,
				'custom_sizes' => $custom_sizes,
			) );

			if ( woodmart_get_opt( 'disable_owl_mobile_devices' ) ) {
				$class .= ' disable-owl-mobile';
			}

			$pics_classes .= ' owl-carousel ' . woodmart_owl_items_per_slide( $per_row, array(), false, false, $custom_sizes );
			$class .= ' woodmart-carousel-container';
			$class .= ' woodmart-carousel-spacing-' . $spacing_custom;
		} else {
			$pics_classes .= ' row';
			$picture_classes .= woodmart_get_grid_el_class( 0, $per_row );
			$pics_classes .= ' woodmart-spacing-' . $spacing_custom;
		}

		echo '<div id="' . esc_attr( $carousel_id ) . '" class="instagram-pics ' . esc_attr( $class ) . '" ' . $owl_atts . '>';

		if(!empty($title)) { echo '<h3 class="title">' . $title . '</h3>'; };

		if ($username != '') {

			if ( ! empty( $content ) ): ?>
				<div class="instagram-content">
					<div class="instagram-content-inner">
						<?php echo do_shortcode( $content ); ?>
					</div>
				</div>
			<?php endif;

			$media_array = woodmart_scrape_instagram($username, $number);

			if ( is_rtl() ) {
				$media_array = array_reverse( $media_array );
			}

			if ( is_wp_error($media_array) ) {

			   echo esc_html( $media_array->get_error_message() );

			} else {
				?>
					<div class="<?php esc_attr_e( $pics_classes ); ?>">
					<?php
						foreach ($media_array as $item) {
							$image = (! empty( $item[$size] )) ? $item[$size] : $item['thumbnail'];
							$image_html = apply_filters('woodmart_image', '<img src="'. esc_url( $image ) .'" />' );
							$result = '<div class="instagram-picture' . esc_attr( $picture_classes ) . '">
								<div class="wrapp-picture">
									<a href="'. esc_url( $item['link'] ) .'" target="'. esc_attr( $target ) .'"></a>
									'. $image_html;
									if ( $hide_mask == 0 ) {
										$result .= '<div class="hover-mask">
										<span class="instagram-likes"><span>' . woodmart_pretty_number( $item['likes'] ) . '</span></span>
										<span class="instagram-comments"><span>' . woodmart_pretty_number( $item['comments'] ) . '</span></span></div>';
									}
							$result .= '
								</div>
							</div>';
							echo ( $result );
						}
					?>
					</div>
				<?php
			}
		}

		if ($link != '') {
			?><p class="clear"><a href="//instagram.com/<?php echo trim($username); ?>" rel="me" target="<?php echo esc_attr( $target ); ?>"><?php echo esc_html($link); ?></a></p><?php
		}

		echo '</div>';

		$output = ob_get_contents();
		ob_end_clean();

		return $output;

	}
	add_shortcode( 'woodmart_instagram', 'woodmart_shortcode_instagram' );

Kind Regards
XTemos Studio

Brilliant! worked perfectly!
Thanks a lot Eric 🙂

You are welcome!

[Author]

Posts