After updating the WordPress and Site URLs (Settings - General), the images inside carousels went blurred (and reduced in size).
To rule out migration-related issues, I have tried
1) migrating with All-in-One Migration Plugin, and
2) migrating with cPanel-WordPress Tools-Backup.
In both attempts, using Search and Replace plugin, I verified all image-links are updated and links in database are revised.
To rule out SSL-related issues, I have tried
3) Updating WordPress Address and Site URL (without SSL - http)
4) Updating WordPress Address and site URL (with SSL - https)
Both break the carousel
To rule out image-related issues, I have tried
5) regenerating thumbnails, and
6) uploading fresh images.
7) Verify permissions (755) on /uploads folder
Finally, I have also tried
8) using a different plugin (Meta Slider) for carousels. This broke the site's home page and I had to restore a backup.
All the above - without the desired result, and the problem persists.
The Shortcodes Ultimate plugin (carousel provider) documentation suggests that broken-carousels could be related to a Javascript issue. I am not a programmer and would really appreciate suggestions to fix this. Can someone please help?
The page I need help with: Backpacking North East India
Kind regards
I did not know I could answer my question here! Thank you Samvel Aleqsanyan. Disclaimer: I am not a techie, but will try to explain nonetheless. Should someone face a similar problem, here's what I did to resolve it.
Isolate the problem: As you'd notice in the description above, I tried 7-8 things to fix it, ruling out issues with migration software/s, SSL, and images. To test the images, I published the images (that broke inside a carousel) on to a test page. The images published just fine without the carousel. That was a signal to probe the plugin I am using for carousels. I tried a different plugin (Meta Slider) but it broke the featured content on my home page.
Shortcodes Ultimate Plugin: This plugin is a very good option for someone like me (not a programmer). It seems lightweight and offers design options in an easy to understand format. After migration, it behaved as promised for all other components except carousels. So, changing the plugin at an advanced stage was not the best option.
Change Plugin Configuration: The plugin sets a carousel's default width to 200 and default height to 20. If you toggled the "responsive" to yes (my preferred setting in the dev env), it ignored the width and height parameters. But, when I updated the WordPress Address and Site URLs, something went wrong and the carousels broke. So, after carrying out the steps mentioned in the question and isolating the problem, I came back to Shortcodes Ultimate and tinkered with the default settings: toggled responsive to "No" and manually set the width and height. That gave me the different result - for the first time.
Bigger Image Size: While changing the default configuration worked, the carousel-images, when published, got smaller in size. So, I recreated all the carousel-linked images to a higher resolution (from 200x200 to 768x768).
I wonder why I did not think # it sooner! Here's the page: Backpacking North East India Hope this answer helps someone else.
Cheers
Related
I am currently building a site. When I refresh the page (as seen below), the two boxes with the brown outline start out at what seems to be 100% width, but then they re-size after about 1-2 seconds, and there is a small gap on the right hand side.
I'm pretty sure this isn't happening via the CSS, as there is a delay and I've looked through it all myself and can't find anything.
I am using Google Chrome's Developer Tools - is there any way that I can view any related JavaScript being ran on refresh that may be affecting these elements?
You can use a chrome extension to quickly turn off javascript. If the problem dissappears, you know that javascript is causing the problem. If the problem is still there, then it is a CSS issue (which I think is the case, but we can't solve that for you as you didn't provide the code).
here is a link to the javascript switcher extension:
https://chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
I am trying to use a bootstrap theme (Worthy) as the base for a website. The theme works very well, however I am having problems adding this scrolling timeline feature to it.
Here's what I know:
I can get the demo of the timeline working
I can get the template working
I can get the timeline implemented in the template w/ the .css working
I CANNOT get the animations of the timeline working in the template
I have traced the issue to one of the timeline's required files, namely a customized version of modernizr. (The template uses the standard version of modernizr). When I remove the the reference to the custom modernizr, the site generally works, but the timeline animations do not. When I add the reference to the custom modernizr back in, all of the site's content disappears.
Does anybody have any suggestions of how I can go about diagnosing and debugging the problem? I know that I have not posted any code, as I'm not sure what is and is not relevant. If somebody can please point me in the right direction, then I can follow up with more targeted questions.
UPDATE: I have also tried removing the template's version of modernizr and only using the one from the timeline, but that also results in all of the site's content disappearing.
Thanks a lot!
Modernizr has an build tool that you can customize to be exactly what you need it to be. What you would want to do is get a list of all of the detects that you need, then build a new custom one that contains everything.
Issue: I have problems with this page: http://kivusandcamera.com/blog/ The page loads with a proper layout, but then the two blog entries "jump" to the left behind the navigation bar. I have spent a good bit of time trying work through the various CSS, inspecting it with developer tools, etc..., but I have reached a point where I feel like I need some help. Any advice would be appreciated.
Background: This is just a basic Wordpress theme that I am trying to customize for a website, so I am not 100% sure how
Additional Information: Though I am passingly familiar with CSS, I have done hardly any work involving responsive design, media queries, etc... Basically, I am saying (1) I would not be surprised if it is something really simple that I am missing, and (2) if something could be done a better way, please feel free to let me know.
UPDATE - It looks like this issue might be Javascript or JQuery related. Basically, a style attribute is getting injected into one of the div tags. The style attribute used an absolute position, with a certain width, and I have no idea how to modify it.
UPDATE #2 - It appears the issue happens with any pages I set in the theme to "Full Width" (see also the http://kivusandcamera.com/about page.) I think those pages must get processed differently by JS layout framework that is used. Again, I still haven't figured out how that is all happening.
Turns out there were two separate issues:
(1) The JQuery auto-layout framework was resizing the various page columns with the assumption that the navigation bar was the same size as the individual columns of blog entries. That caused an issue that had to be solved.
(2) The full page CSS had to be updated to reflect the lack of a resizing navigation bar.
Ultimately, these issues were very specific to the this particular Wordpress theme, so I doubt full description of the solution would provide much of a benefit to the community. Thank you to everyone who helped lead me to the solution.
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).