If you visit my website so far, http://trulydesigns.com/ you will notice that everything looks in order.
If you visit the web page via mobile such as an iPhone 5s the slider looks out of place. http://quirktools.com/screenfly/#u=http%3A//trulydesigns.com&w=320&h=568&a=37&s=1
function createSlider(){
global $cl_redata;
if(isset($cl_redata['codeless_slider_height']) && $cl_redata['codeless_slider_height'] != '100%')
$height = $cl_redata['codeless_slider_height'];
elseif(! isset($cl_redata['codeless_slider_height']))
$height = '450';
else
$height = 'fullscreen';
$this->height = $height;
$extra_class = '';
if($cl_redata['slider_parallax'])
$extra_class .= ' parallax_slider';
$output = '<div class="codeless_slider_swiper '.esc_attr($extra_class).'" style="'.(($height == 'fullscreen')?'':'height:'.$height.'px').'">';
$output .= '<div class="loading"><i class="moon-spinner icon-spin"></i></div>';
$output .= '<div class="codeless_slider_wrapper" data-start="transform: translateY(0px);" data-'.(($height == 'fullscreen')?'1440':$height).'="transform: translateY(-500px);">';
$output .= '<div class="codeless-slider-container swiper-parent swiper_slider codeless_slider" data-slidenumber="1" data-height="'.esc_attr($height).'">';
$output .= '<div class="pagination-parent nav-thumbflip nav-slider">
<a class="prev" href="">
<span class="icon-wrap"><i class="icon-angle-left"></i></span>
<div class="text">'.__('PREV','codeless').'</div>
</a>
<a class="next" href="">
<span class="icon-wrap"><i class="icon-angle-right"></i></span>
<div class="text">'.__('NEXT','codeless').'</div>
</a>
</div>';
$output .= '<div class="swiper-wrapper">';
$this->output[] = $output;
}
This is a snippet of the "codeless_slider.php", somewhere in my files it's pulling "min-height: 236.97522816166884px;height: 236.97522816166884px;" and I can't figure where from, so any help is greatly appreciated.
It can be tricky because you use a plugin to not have to build it yourself, but sometimes plugins inject code and you have to learn how it is built in order to make it work the way you want anyway.
While learning Wordpress development, I learned to be best friends with the DOM inspector in Chrome and to use the !important declaration to overwrite style rules. It looks like you could do that here with success.
Good luck!
This code is from a Premium WordPress theme, so in any case you can ask their support forum on
https://codeless.co/support/
Related
I wrote a code for a loop but it disrupts everything for me, I have a file
file.php that is inside my template (let's say it's called test)
Now I call the file from the function (function file by include_once ('file.php'); )
Now it works, but my elementor display is broken and I can't update anything, and it also ruins my main pages, but the post pages look great
<?php
function video() {
echo '<link rel="stylesheet" href="/style.css">';
$x = 1;
$number = get_field_object('number');
echo '<div class="col-lg-2-1">
<div class="carousel">
<div class="video"><iframe src="" allowfullscreen frameborder="0" name="slider1"></iframe></div>
<span class="kfir">';
while($x <= $number['value']) {
$prak = 'video '.$x;
$num = 'chapter_'.$x;
$chapter1 = get_field_object($num);
echo '<div class="text">'.$prak.'</div>';
$x++;
}
echo '
</span>
</div>
</div>';
}
add_shortcode('video_live', 'video');
?>
Does anyone know where my mistake is?
And can someone guide me how to make it work only within the posts pages?
How can I go about convering a public instagram URL into JSON using PHP? Ex: https://www.instagram.com/explore/tags/brindle/
I can't use the API as I need public hashtag content and my use case won't qualify for their app review process :-(.
Here is what I have so far but it does not pull all images. Also, I'd like to be able to load the "load more" images as well. Any help would be much appreciated!
$instagram_source = file_get_contents("https://www.instagram.com/explore/tags/brindle/");
$instagram_data = explode("window._sharedData = ", $instagram_source);
$instagram_json = explode(';</script>', $instagram_data[1]);
$instagram_array = json_decode($instagram_json[0], TRUE);
$instagram_media = $instagram_array['entry_data']['TagPage'][0]['tag']['media']['nodes'];
if(!empty($instagram_media)) {
echo '<ul>';
foreach($instagram_media as $im) {
echo '<li>';
echo '<a href="https://www.instagram.com/p/'.$im['code'].'/" target="_blank">';
echo '<img src="'.$im["display_src"].'" alt="" width="'.$im["dimensions"]["width"].'" height="'.$im["dimensions"]["height"].'" />';
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
Take a look at this solution here: https://github.com/Bolandish/Instagram-Grabber
Thats the best one i know until now.
Basically, trying to modify a theme to suit. I've got a PHP function that I can't seem to modify appropriately to stop it from creating a hand cursor when hovering as well as stopping it from opening the image as a lightbox style gallery when clicked. I am trying to basically make it do absolutely nothing, but have the viewer scroll through the images.
<?php
$project1Images = explode( ',', $project1Images );
$project1ImagesLinks = explode( ',', $project1ImagesLinks );
for ($i=0; $i < count($project1Images); $i++) {
$thumb_id = CoSy_getImageId($project1Images[$i]);
$thumb_obj = wp_get_attachment_image_src($thumb_id, 'full');
$thumb_width = $thumb_obj[1];
$thumb_height = $thumb_obj[2];
echo '<a href="'. esc_url($project1ImagesLinks[$i]) .'" rel="gallery">';
echo '<img class="lazy" data-original="'. esc_url($project1Images[$i]) .'" alt="" data-width="'. esc_attr($thumb_width) .'" data-height="'. esc_attr($thumb_height) .'" >';
echo '</a>';
}
?>
Thanks in advance!!
P.s. - I have a good understanding of reading code, but am not a coder by any means.
Thanks.
To remove hand cursor when hovering and stopping it from opening the image as a lightbox you need to remove
echo '<a href="'. esc_url($project1ImagesLinks[$i]) .'" rel="gallery">';
and
echo '</a>';
Is there a way that I can streamline my process when I'm working with theme options on Wordpress?
Currently I use a setup like this when I'm creating a social links menu for example (With the option value being the link URL);
$twitter = of_get_option('twitter');
$facebook = of_get_option('facebook');
$google-plus = of_get_option('google-plus');
if ($twitter){
echo '<li class="twitter"><i class="fa fa-twitter"></i></li>';
}
if ($facebook){
echo '<li class="facebook"><i class="fa fa-facebook"></i></li>';
}
if ($google-plus){
echo '<li class="google-plus"><i class="fa fa-google-plus"></i></li>';
}
I'm sure there must be an easier, more streamlined, way to go about doing this?
Any help would be greatly appreciated.
I'd wrapp it in a function.
function getOption($op) {
$link = of_get_option($op);
if($link)
echo '<li class="'.$op.'"><i class="fa fa-'.$op.'"></i></li>';
}
getOption('twitter');
getOption('facebook');
getOption('google-plus');
I need an image slider for Wordpress in which the images com from PHP. Something behaving like:
[slider]
<?php
get_slider_images();
?>
[/slider]
with get_slider_images() echoing lines like:
<img src="xxxxx.jpg" title="dummy title">
Does any one know any suitable plugin (or any other solution)?
Note: I have done my search, but couldn't find anything.
Thanks!!
flexslider option:
$parts = enter in your image urls;
$description .= '<div class="flexslider"><ul class="slides">';
foreach ($parts as $part) {
$description .= '<li><img height="200" width="342" src=' . $part . "> </li>";
}
$description .= "</ul></div>";
jsfiles
http://www.woothemes.com/flexslider/