I use NextGEN Player Template plugin, It is great plugin, but it shows portrait pictures in landscape mode. In other words, plugin takes the central part of the image and shows it as landscape orientation image.
And it is not the nextgen gallery issue, because this another plugin works with nextgen gallery too, but as we can see on third screenshot, it shows portrait images in portrait orientation. But this plugin has another problems, so I can't use it.
So, I need to see portrait orientation pictures in portrait orientation using NextGEN Player Template plugin. Cam anyone help?!
Answer for last comment with picture:
My advice is to upload or see an example of the plugin. Then look at the source code with either chrome's or fire foxes "Inspector", they allow you to see each element and what they do with the page. Then find the DIV that is containing the image or Style that is editing the image itself. And then edit it accordingly. Though since this is a plugin there is probably a piece code that applies this to each div so you will need to track that back also. Or find someone who is willing to look inside all of your code. but perhaps research a little first and look into your code.
Ok i looked through your code there.
Try changing this
$('div.gv_panel').live('click', function() {
$.fancybox({
autoScale: true,
to false.
Also these things apply to changing the image.
<div id="ngg_player_bg_changer" class="ngg-player-bg-changer" style="display: block;">
<div class="gv_panel" style="width: 564px; height: 400px; left: 0px;"><img style="visibility: visible; width: 601.504px; height: 400px; top: 0px; left: -19px; display: inline;" src="http://piotr-tokarczyk.pl/wp-content/gallery/player-1-2/g7.jpg"></img></div>
Holds all the different images i think
Hope this helps :)
As the plugin is being actively developed, I would certainly suggest posting in http://wordpress.org/support/plugin/nextgen-player-template as Piotr seems to respond fairly quickly.
Related
I am trying to change my products image on hover in woocommerce in wordpress !!!
I tried some plugins I saw like Woocommerce Product Image Flipper & Magni Image Flip for Wocommerce but they are not working for some reason and I tried the solutions you are suggested here in some similar questions .
So do you know another plugin free or not I dont care or do you know maybe an other solution with CSS maybe I dont know
I am using
Wordpress Version : 5.3.2
Wordpress Theme : Flatsome
Woocommerce Version : 3.9.2
Thank You for helping and sorry for my English :)
ok #st3ph3n92 it is working for me !!!
I just write custom css for the 10-20 products I have online every day so for now I am fine !!!
Now in the future I hope there is plugin to do this job ^^
Thank you again for your help #st3ph3n92
#N. Mar, Yes, the custom URL I used was only as an example. With background-image: url("img2"), that would select img2 if it is the same folder as your CSS file. However, if your images are kept in a separate folder, for example "images", the CSS might be background-image: url("images/img2").
There is a StackOverflow post on folder paths here that might be quite useful: What does "./" (dot slash) refer to in terms of an HTML file path location?
Because you're using WooCommerce, I imagine how you're images are stored is a little different. This article might shed some light on it: https://enviragallery.com/where-does-wordpress-store-uploaded-images/
If you want this to be automatic on Wordpress, you will need to use PHP. The issue is that you cannot use PHP in CSS. Instead, you would need to add the styles inline or in the head of the theme's html (as opposed to a separate stylesheet) and then use PHP to reference the image. This is a good bit trickier. There's another Stackoverflow post on that here: CSS background images in WordPress
if you have access to the CSS, you could try setting the image as the background of the div it is in. You could then use the :hover selector to set a new background image.
You can see this on the CodePen here: https://codepen.io/St3ph3n92/pen/BaopGQx
Or run this snippet:
.image-holder {
height: 300px;
width: 300px;
border: 3px solid black;
margin: 0 auto;
background-image: url("https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
background-size: contain;
}
.image-holder:hover {
background-image: url("https://images.unsplash.com/photo-1514218953589-2d7d37efd2dc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
}
<div class="image-holder"><div>
I hope this helps.
Thank you St3ph3n92 for your answer
So can I change this code with something like this ???
.product-image {
height: 770px;
width: 1155px;
border: none;
margin: 0 auto;
background-image: url("img1");
background-size: contain;
}
.product-image:hover {
background-image: url("img2")
}
<div class="product-image"><div>
I mean that I want something more automatic cause I have 700+ products so I cant insert custom URLS for each one !!! I need a code so on hover my main Products image change with the second image from Product Gallery
Thanks again for your answer !!!
I had the same issue on some of my websites with the same configuration as yours.
Until a few days ago, I had that flipping effect on my products. It was by default, I didn't install any plugin for this feature. Today I noticed that it's not working anymore.
I managed to solve this issue by disabling Autoptimize plugin. I don't know if you use the same plugin, but maybe my answer will help you.
I added video from media library to my page from content edit box.
no matter how i change the video size, it always on width:640px; cannot show lager in desktop display. it get smaller if view as mobile view.
I checked the CSS, not sure where to setup or change these in CSS.
My testing page now is on http://54.183.134.28/ you can check the video in about us section.
The code i checked in content edit box and CSS inspect, please help, for some reason i do not want to use Youtube, have to load the video to media library.
my question now is is there any restrict for video display size in wordpress?
[video width="1920" height="1080" mp4="http://54.183.134.28/wp-content/uploads/2017/07/City-8248.mp4"][/video]
element.style {
width: 640px;
}
wp-mediaelement….css?ver=4.8:1
.wp-video {
max-width: 100%;
height: auto;
Try to use this css code
.flowplayer{max-width:650px;}
Then let me know the result.
Thanks
Is it possible to make videos in WordPress 4.2.x responsive using the oEmbed shortcode? If not, are there better solutions than having to use some outdated plugin? I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
I have searched and searched but have found nothing so far ... probably just not using the right search terms. I can hardly imagine that WordPress 4.1 and higher cannot place responsive content out-of-the-box since it has become so mobile-friendly!
This may or may not answer your question, but I've just tried something that works by installing a plugin called Advanced Responsive Video Embedder and adding the following css:
.embed-youtube {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
}
.embed-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The Plug-in also has some really good options, like editing paramaters of the embed like so: wmode=transparent iv_load_policy=3 modestbranding=1 rel=0 autohide=1
P.S.: .embed-youtube is the class name of the container div engendered by the plug-in..
Hope that helps!
You can use the plugin called 'FitVids for WordPress' to make your youtube videos responsive.
You can use it like this:
<div id="youtubevid">
[youtube R-S9vXFVOnU]
</div>
Now you have to add this CSS selector to make it responsive using the plugin. Go to Appearance->FitVids and enter the id of the selector and save changes: jQuery("#youtubevid").fitVids();
I wrote a plugin called "Responsive Media". It makes embedded media by oEmbed responsive out of the box.
https://wordpress.org/plugins/responsive-media/
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
So I'm running a social network site, in which I've installed plugins and modules that allow users to edit their fan pages by having their own CSS editor ( a style box ) This is for Social engine.
I originally had a main menu that had images for links but were referenced via html src vs css
i.e <img src=""> vs .div { code } in order to allow users to alter the layout via CSS I created classes for each image so that they could be overwritten.
For this I stumbled across an article ( I don't have the link ) on stackoverflow bringing up how to change an image using CSS which lead me to the <img class=""/> and using
.customtag {
content:url("http://pathtoimage"); }
in order to modify it.
It shows up GREAT in chrome and IE, but in Firefox it is simply not registering and all I see is the text + the description for the alt="" tags.
I've been searching for a few hours but unable to find an exact match to this. So I'm posting this here to see if anyone could lead me in the correct direction. I've also tried declaring the !DOCTYPE as well as using <style> vs <style type="text/css">
While using the css validator shows other areas, nothing related to the current lines of code as to why its not rendering. In firebug it doesn't even show the CSS registering at all it seems.
Any help is greatly appreciated.
http://fmlstudios.com/testdesign/
I've removed the menu code from my site and put it into a separate html file in the link above as to single out my issue. Any help is greatly appreciate and or pointing me in the correct direction. Thank you for taking the time to read.
Since Firefox doesn't understand or comprehend the content: url(); fully as it expects an image from the <img class=""/> you'll need to utilize background: url(); instead as this is accepted in all browsers.
I.e.
.someimageclass { background: url(pathtoimage); }
`
This will cause firefox to load a an image but it will have a black border box around it due to the fact it's looking for the original image specificed in <img class=""/>"
To make a workaround create or google a "blank.gif" 1x by 1px and edit the img class to
<img class="someimageclass" alt="" src="blank.gif"/>
Now the box will dissapear and this will be your workaround.
Hope this helps anyone else out there that's been going nuts over this.