Cannot find a plugin for creating slideshow (for posts) in Wordpress. Already tried a couple of dozen.
The need to:
responsive, auto width (using max-width, i think)
if img is vertically NOT TO CUT IT! i. e. proportions must be maintained, height varies relative only to the width
it must be free (or freemium)
Wordpress Guru, if you know about these plugins, answer please.
Finally I found solution. If you need good slidedhow with dynamic height in posts use «oik-nivo-slider».
Related
I'm working on: https://holisticharmonyinhc.com/ via Wordpress
The homepage is currently set to display the Archives, and if you notice, the main section (not the sidebar) is being partially cut off on the right. The Single Post display do not seem to have this issue, only the Archives display. Wondering how this can be corrected.
Also wondering if it's possible / how to adjust the columns of the Archive display where the feature image is set to a 2:3 ratio (width:height) and the info of the post is centered vertically.
I'm not positive what coding is needed for me to provide, but happy to provide anything requested. Thanks in advance!
Add this CSS in your active theme style.css file
.ruby-section .ruby-content-wrap {
overflow: inherit;
}
Which is the best way to convert/change an existing drupal site to a responsive pattern? I have searched lot, but not getting any right direction or guideline. My current site is running with drupal 7 and zen theme. Do I need to change the theme to responsive one like bootstrap or there have any other better solution.
I think you got the answer in your question! I used the Bootstrap theme for Drupal to make my websites responsive. It works perfectly. You can find it here:
Bootstrap project for Drupal
The theme is shipped with sub-theme starter kit you can use to pimp your own theme safely.
You don't convert the Drupal site but the HTML output, to responsive.
How the HTMl is generated (the Drupal theme) is not relevant.
Regardless of what theme you are using, something that I found useful is just open your website in Chrome, and using Developer tools, I add media queries as required to a new CSS, fixing only what looks too cluttered or small in the simulated device.
Some steps include:
Add a new folder to workspace (Sources tab)
Add a local (initially empty) css link to the drupal header (to work with the actual site, or you'll have to take the task to generate an off-line version of your site, fixing all the links to point to your local computer, or to setup that theme in a local server, as MAMP)
replace all the WIDTHs from container that prevent the site to be reduced with the browser's viewport (as you reduce the window size) with MAX-WIDTHs (same value), and set a new WIDTH to 100%. Now your design will be flexible under the original width.
hide, float, or change the position of divs to flow nicer with the new viewport width.
A trick I use a lot with big marketing elements (not article content with lots of text) is to make them elastic, so they look always the same relatively to the viewport. To accomplish that: re-define font-sizes AND all dimensions in em. Then and add "font-size: 1vw;" to the first parent that can be proportional to the viewport's width or matches the full viewport, and when your viewport resizes, all the elements will scale as well.
setup a few classes as .mobile-hidden or .desktop-only to hide/show redundant elements in mobile view.
(Obvious) make texts bigger and add give enough padding to small elements to be easily touchable.
Then just upload your CSS to the theme and change the url in the link you created before in the header.
Voilá: responsive theme.
Note: Keep in mind many scripts these days modify the DOM and new elements might need to be styled later, once you run some cart, or functionality which generates/changes elements and their styles.
Good luck.
Preface: I am not a developer, but I was able to figure out enough about CSS to modify the twenty twelve theme for desktop browsers into this website: http://www.abcllc.org
Now that I have that looking the way I need it to, I've turned my attention to mobile. The theme has responsiveness built into it, but when I access the site from a mobile device, it scrunches it way up into the left side of the screen. Can I set a minimum width for mobile screens, or set it to auto-fill a mobile screen? The only thing I've figured out is the cutoff width between mobile and a regular browser (which I set to 640px).
I found varying threads throughout the interweb with people having the same issue, but with no answers. Any help would be greatly appreciated!
You can check out mine and see if that helps.
http://www.fossfolks.com/
My site is by no means the best example of css and design, but there's a lot less going on and it might be easier to see. There's a link to the stylesheet in the source. My current struggle is getting images to resize (width AND height) based on a percentage of screen width; I've not been able to sit down long enough to make it go.
I've been playing around with WordPress. As a programmer, the media library seems a little strange to me - but I'm keen to understand how I can achieve what I need with the framework. Cue WordPress enthusiasts...
I need to force my WordPress post images to be a certain size. I'm not talking about the thumbnail size, which I've found can be easily manipulated within the loop, but the images that actually get inserted into a post, amongst the writing and the other media. I have a fixed content width, and I would like the images to reflect that width (uncropped).
Obviously, I could run some sort of Regular Expression that could identify the image tags, and replace them with new sizes, but is there really no other way of forcing image sizes within the post while retaining there position amongst the formatted writing that comes with it?
So far, I'm guessing that there is a CSS property out there that is used by WordPress in all images. At a push, I'm willing to go with this - whatever it may be (answer needed). But I was hoping that their might be some more involved code (perhaps something I could plop into the functions.php file) which could actually force any inserted post images to be a certain width.
Any thoughts on this would be much appreciated.
If that's only about limiting the max width of an image and prevent an image from overflow, you could use the $content_width variable in your theme:
https://wordpress.stackexchange.com/questions/6499/how-to-create-a-conditional-content-width-for-a-wordpress-theme
The theme I am using has a "custom modified Nivo Slider for Featured posts." It was functioning perfectly until this afternoon when I noticed the effects are lingering on the photos with vertical lines running down them. I can't determine what set this off. I only added a few pages to the nav menu. I didn't install any plugins, touch the styling or functionality of the site at all.
Curious if anyone has seen this before and could lend a hand. I am happy to Paste Bin any of the code that you would need to see. Here is the link to the site: http://mefo1.ecin1prod1lnx1.com/
Best regards,
Alex
The width of the image must be able to be divided by the number of slices without leaving any fractions. ie a 672 pixel wide image can be divided into 14 slices (of exactly 48 pixels each), but not by 15 slices (of 44.8pixels each). Worked perfectly for me.
I found the solution here: https://github.com/gilbitron/Nivo-Slider/issues/114
Also be sure that your images conform to the pixel width of the slider images in the css. I downloaded a theme with css set to:
#slider {
width:672px;
height:374px !important;
but the images that came with the template were of varying widths eg 670px and 674px as well as varying heights. So I had to readjust them all to the 672x374px.
If you do both this and the slice calculation above, you should have no problems.