Forum Replies Created
-
AuthorPosts
-
I just tried it on a few apple machines with chrome, firefox, and safari an it all worked well. I then tried it on a different windows machine (xp with chrome browser) and it worked also. I then tried it on my personal machine, (win7 chrome) and I overlapped a stack of photos. I wonder what it could be that causes this to happen on my machine?
khalidmuharragi, thanks for the compliment of course but really it was just a hack. I just tried my best to duplicate what Kriesi did. So credit goes to him or course. But to your question. The code completed the way Kriesi does it, is more elegant, his logo is the hexagon and it is the same size regardless of browser window. He embellishes is with adding the text to the right when the browser window is large and then hides the text as the browser gets smaller. With the social icon code modified this way on a mobile browser screen size the social icons are left in the middle of the header. When Kriesi hides the logo text he is left with a clean header. Logo left social icons center and nav menu button right.
You however on running into the problem that I had. Your logo is horizontal. so it is taking up the space were the social icons end up. Before I tell you what I did know this. I am only learning css and html, and php is foreign to me so take this with a grain of salt please. Depending on the number of social media links you try and use you could altogether have another problem. There is only so much room at the top between the logo and menu button. So i found with even say 5 icons you were running out of room up there so bear that in mind.
So you have probably many solutions but the simple answer is you need to change/shrink your logo as the browser window gets smaller. You can probably accomplish this many ways, My first thought would be in the header php file. actually make 2 logos with unique ids. then with Media queries in your custom css file, show the large full logo in all browsers but the small mobile size and at that time hide the large one and show the small one. I however doen’t know how to right php so I didn’t do it this way. So if someone knows how please add this solution as it is probably the best. If there is a better one then please enlighten us.
What I did was a bit of a hack. I hid the logo image and add a background that was a icon version of my logo when the screen size got to a certain size. This works but it has one huge drawback. The clickable portion of the logo is still actually the original wider size and if someone tries to drag the icon to the desktop they actually get the logo not the visible icon. If this doesn’t bother you or you can tweek it to make it better, then make a smaller squareish version of your logo and then add this code.
/* Smaller than standard 960 (devices and browsers) (ipad Portrait)*/ @media only screen and (max-width: 989px) { /* adds the jack and addi icon as a background */ div .logo { background: url(https://yourownpath/logoicon.png) top left no-repeat; top: 11px; } /* makes the default logo transparent */ .logo img { opacity: 0; filter: alpha(opacity=0); /* For IE8 and earlier */ } }
I then had a problem with placement on a vertical iphone so i did this. yours will be different based on your logo size. I also enlarged the social icons for more ease of clicking on a phone
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ /* moves the icon logo on smaller screens */ .responsive .mobile_slide_out .logo { margin-top: 10px; margin-bottom: -10px; } /* change social icons */ #top .social_bookmarks li a { font-size: 19px; width: 40px; } }
Hope this helps
- This reply was modified 10 years, 10 months ago by allegrabillings.
Thanks for the info. I am hosting on standard go daddy account, so it is definitely shared. sometime in the near future I want to switch it somewhere else, it seems my emails sent from the go daddy account are often placed in the junk box of the recipient. They claim it isn’t them, but I don’t experience this with other accounts at all. I know there are many factors, but the breadcrumb trail leads back to go daddy from what I have looked at.
Anyway, that aside, So I guess I am totally fine with only 4 for the most part. And activating a handful others if needed should be ok also generally speaking. Thanks for a generalization on a normal amount of running plugins on any one wordpress website with normalish results.
I am sure everyone just recommends who they personally use, but if anyone has solid recommendations on hosts I would be interested. I want it to provide quality email hosting as well, at a rate normal for a private individual. Cheers
I will give this a try thanks
I will check out the plugin, thanks. I don’t have a retina display (other than iphone) to check it out on. And with the iphones small screen size everything (other than the logo) looks good. Is this a very common plugin to use? I am pretty new to wordpress so I don’t have a ton of experience with how many plugins is normal to be running.
Can I ask, in a completely general idea, what it is normal amount of plugins to be running before it gets too cumbersome or slow. I am running about 4 right now.
November 22, 2013 at 10:25 pm in reply to: mobile logo blurry – gets techy – and complicated #192081Ok after even further research I found a work around: feel free to inform me if this is the best way or not.
my conclusion is that this is definitely a retina screen issue. I found this source very helpful:
http://designmodo.com/design-retina-displays/for the main theme logo:
I found that the containers in place in the theme already constrain the width/height of this so the part about defining the width and height in css wasn’t needed (at least for me) I actually found if I did this the theme would actually shrink the logo more than the size I defined anyway, without some sort of important code. So I removed it and just let the theme naturally constrain the size. But what I did was upload a new logo that was twice the size of what I intended it to be. I previously had a logo that was uploaded at 205×64 pixels and it was being stretched to about 400 some pixels and looking like crap. So by simply uploading an image that was 410×128 pixels and letting the theme auto constrain it to I think max height 80px the logo looks perfect on normal screens and has the pixel dimensions to actually look good when it is enlarged on retina devices. super easy.Then for my custom background logo replacement trick:
I basically did the same thing, I uploaded an image that was 132×120, twice that of the intended display size of 66×60. Then in my css I just constrained the background image with the desired display size of width 66 and height 60 pixels so it looks right on normal screens and then has the right amount of pixels to look good on retina screens.As a side note I first used the media query method at the bottom of the source reference to only send the enlarged file actually to retina devices, but I figured for the main logo of my site I would just use it all the time as it is a single file and the file byte size is about the same, and I think that is maybe more future proof. But if I was doing this all over the site with many images I would probably look more at the media query way of targeting only retina devices.
seams to be working now just fine. If you would do anything differently let me know please.
Thanks for the info Peter.
To wrap this up, after more testing if I use the priority of 10 and true to load at the bottom of the page and the names of the different scripts are identical it does in fact load. With the names the same and the values of 100 and false it doesn’t not load. But with the 100 and false and if I change the name of the new child scripts it will once again load.So In conclusion I reverted the names to the same (like you started) and used you 10 and true values as my choice to the variables.
Thanks for staying with this to get more clarity.
Hey Peter thanks for looking again,
As I mentioned I don’t have any bases to think anything specific, I was just blindly trying things. The previous code with priority 100 and “2.0”, false); worked as long as the register and enqueue name as different than the dequeue.That being said I have no doubt that the new code will work. but before I implement it, what is more ideal from your end as you know what the script is doing? to have 100 or 10 for the priority and to have false or true after the “2.0”? I saw you changed the latter also.
add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); wp_register_script( 'avia-js-child-theme', $child_theme_url.'/js/googlelink.js', array('jquery'), 1, false ); wp_enqueue_script( 'avia-js-child-theme' ); wp_dequeue_script('avia-prettyPhoto'); wp_register_script( 'avia-newlightbox', $child_theme_url.'/js/jquery.prettyPhoto.js', array('jquery'), "2.0", false); wp_enqueue_script( 'avia-newlightbox' ); }
or
add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 10); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); wp_register_script( 'avia-js-child-theme', $child_theme_url.'/js/googlelink.js', array('jquery'), 1, false ); wp_enqueue_script( 'avia-js-child-theme' ); wp_dequeue_script('avia-prettyPhoto'); wp_register_script( 'avia-newlightbox', $child_theme_url.'/js/jquery.prettyPhoto.js', array('jquery'), "2.0", true); wp_enqueue_script( 'avia-newlightbox' ); }
Okay Peter,
I tried that without the 1 and it still didn’t work. Forgive what I am about to say as I know for a fact I am talking out of my shorts, as I don’t really understand php code at all. But figured you are obviously on the right track and tweaking stuff to get it to work. So I looked on the WP codex at the register_scripts, enqueue, dequeue etc to try and learn more about them for my own sake, definitely still way over my head, but on the dequeue script documentation it was talking about adding deregister along with dequeue, but I don’t know in what context as I didn’t understand it. So thought maybe that is the trouble, but what I gathered was the dequeue was turning off the script I think and then the following register and enqueue scripts are turning it back on but in the child theme location. I was just trying to figure out what the lines of code actually do.Again without knowing anything I thought it was interesting that the dequeue, register and enqueue scripts all had the same name ‘avia-prettyPhoto’ I thought maybe the new child location script name should be different. This is based off the fact that most of the mod functions and filters you and devin have given me in the past seam to have arbitrarily made up names when including them into the child theme. So I simply changed the wp_register_script and enqueue_script name to ‘prettyPhoto’ instead of the ‘avia-prettyPhoto’ that we used in the dequeue-script before it in your code. And it then worked so then I used avia-Photo and it still worked.
So knowing that, will you look at it again and see if I can infact just use some made up new name for those two lines and call it good or is it more sophisticated than that, and that may give you a lightbulb moment to improve the code. Thanks Please advise.
Hey Peter,
thanks for combining these for me. Will you please look it over and make sure there isn’t a slight error somewhere. I went ahead and replaced the default prettyphoto js file back into the parent theme, and then placed the modified prettyPhoto file in the existing js folder in my child theme and then placed the new modified code in my child functions file. And now the effect I was previously getting is gone. So it is still reading the parent prettyphoto code.thanks for looking into this further.
Thanks Peter,
That leads me to one potential conflict, but I don’t know for sure so I will post it and let you tell me if there will be one or not. I just can’t yet wrap my head around php code.previously I wanted to add a js file for google link tracking. you gave me almost the same code to add a js folder in my child theme and then place the google file in that child js folder. It looks like this…
if(!is_admin()) add_action('wp_enqueue_scripts', 'avia_register_child_frontend_scripts', 100, 1); function avia_register_child_frontend_scripts() { $child_theme_url = get_stylesheet_directory_uri(); //register js wp_register_script( 'avia-js-child-theme', $child_theme_url.'/js/googlelink.js', array('jquery'), 1, false ); wp_enqueue_script( 'avia-js-child-theme' ); }
your new code in the above post for prettyPhoto is very much the same. So if I paste your new code after this code in my functions file, i dont know if that will make a potential conflict some how. can I use both as is, or do I need to combine them some how?
thanks Yigit, I will certainly take a look at this.
But my concern is why is this happening in the first place? Is it some custom CSS I added that is messing with it, or is a theme issue that was overlooked? If I am wrong in the following assumption then disregard, but I am assuming the width 24% only works for the 4 column layout? if I change it to 3 column or 5 column what will happen to those? And this is a global css change so If I have galleries of different column counts on different pages?Again I may be wrong, but these seem more like lipstick changes, not corrections. And I don’t mean that in a rude way, just want it to work appropriately.
thanks
I can accept that, but why is it rendering so messed up. It is hard to see with my site background coolers. But look at this gallery it is supposed to be 4 columns wide. But shows at 3 with a weird extended background container. (the solid tan color) you can see the outline were there is no lines in the background. This shouldn’t be there. try it for yourself, if you change the columns to 5 you actually get 4, if you change to 3 you get two, all with this weird background. What is causing this?
http://i.imgur.com/we6esqo.png
[IMG]http://i.imgur.com/we6esqo.png[/IMG]
Perfect answer thanks. I never thought of that. I will probably add it back in for continuity sake but thanks for the info
This reply has been marked as private.great I will give that a try. But before I do, can you explain the benefit or reasoning for this native behavior. It is visible all the time otherwise, and this affects phones that are in landscape mode, which is of course why I want to change it.
But before I do I am curious about why it is intentionally turned off between that pixel size. Seems strange without know why.
Thanks for the compliment on the site. http://www.jackandaddi.com It has been a lot of work customizing it to fit my branding but fun also. But the theme does most of the work of course ;)
The issue isn’t with the mobile menu but the (jquery, I think) link to the top of the page that appears when you scroll down the page till a certain distance past the fold. You can even test it on this forum so it isn’t an issue with my site but the theme in general. if you scroll down far enough to the link in the bottom left corner appearing, then drag your window to a width anywhere between 480 – 768 the link will disappear, and then re-appear outsize that window size.
This now works perfectly, thanks Peter.
Hey Peter thanks for the code. It didn’t appear to work though. If you visit the link in my previous post that will take you to a masonry gallery page to test. The code you gave is still in place in my child theme for testing.
just for clarity, I noticed you had me change masonry_entries.php instead of masonry_gallery.php, now I admittedly have no idea what to change but as there is only two masonry scripts and two masonry elements (entires and galleries) I figured we would be changing the gallery php as that is were I want the media item title to show in the lightbox.
If we do in fact need to change the entires then disregard below. But if that was an oversight than please advise further. There was likely more you changed in the code you provided for the entires but the only thing I noticed on first glance was this…
if(!empty($attachment)) { $alt = get_post_meta($thumb_ID, '_wp_attachment_image_alt', true); $alt = !empty($alt) ? esc_attr($alt) : ''; $title = esc_attr(get_the_title($thumb_ID)); if(isset($attachment[0])) {
you added the 3 lines in the middle. I thought maybe I could copy this work in the masonry_gallery php but didn’t find a similar location, and there was likely more you changed that I wasn’t seeing anyway.
1. So please advise how to make the change visible in a masonry gallery element, so the title of the image shows in the lightbox.
2. Also if the change to the masonry_entries was by mistake, what will that change do? If it does in fact show the title of anything pulled by a masonry entry that is opened in the lightbox I can just leave it, as I would like that functionality. I just don’t have any masonry entries on my site to test. But I could make one of course.
Thank you in advance for looking into this further.
CheersNo worries. Devin, I know I could have used the plugin But I wanted the max size smaller to try and speed up the galleries. So I had to reupload them anyway. Thanks.
I re-uploaded the images at the largest size of 1210 wide vs my previous 1500px wide which of course generated new thumbnails) and the masonry gallery is now loading about a 705 px wide image in the thumbnail and then the 1210 px one in the lightbox.
So is the 705px thumbnail a new size that is now being generated in the functions file for the masonry galleries? Is that why is wasn’t and is now displaying that way? It was calling for a thumbnail that didn’t exist?
Sorry Devin for being unclear. My images are generating thumbs by wordpress upon upload. What is happening is entirely based on the masonry gallery not loading them.
My concern is really the second half of my previous post. I am not saying the script loaded on the enfold theme sample site is different than the one packaged in the theme download but they aren’t behaving the same way for me. thumbnails are available to the theme to use. But the masonry gallery is only loading full size images in both the lightbox and the thumbnail tiles. It isn’t doing that on your theme page sample, you guys are getting thumbs in the tiles and full res in lightbox. http://kriesi.at/themes/enfold/shortcodes/masonry-gallery/ That is a big difference in performance.
http://jackandaddi.com/portfolio/fine-art/
this is my implementation of a smaller masonry gallery, the images are somewhat optimized and I plan on doing more in the future, that aside. If you inspect the page and look at a thumbnail tile it is a 1500px with image (full size) ideally it should be using a thumbnail right?The images are optimized for web but with say 100 images at 500kb it is still 50mb total per say on the page at once. It is curious how if the same images load super fast on page as static images all at once, they are so much slower in the masonry script.
Oh well I will play with the images and see if I can get it faster. The trouble for everyone wanting to display large images, if you want to open 1500 pixel images in light box you have to upload them that large so its available. I just wish the masonry script only loaded smaller thumbnail images like your gallery script does, and then feeds the full size image upon request from the lightbox. that would presumably fix the issue, maybe. But that is only an uneducated observation/assumption.
————————————-
On another note. when I inspect my page with the masonry gallery an look under resources I see 1 of each image that is in the gallery. The full size image. And if I drag and drop on any of the thumbnails visible in the gallery the image that is copied to the desktop is the full size image. you can also open the lightbox and drag and drop that image to and it is the full size image.
The behavior on your demo is different. If you go to kriesi-shortcodes-masonry gallery and inspect that page and look at the resources there are 2 of each image loaded one full size at 1030 px for example and then a thumbnail at 705px for example. and if you simply inspect the code of the gallery you see that the smaller thumbnail is being loaded in the gallery by default. If you drag and drop this image off you get the smaller thumbnail as expected. But the big difference on your sample is that if you open the lightbox you get the full res image, great. It however is not drag and dropable.
So big questions.
1. Why is your lightbox image not drag/drop compatible and the one in the them is?
2. Your sample is the optimal behavior and why it is likely faster. presenting thumbnails and only full res upon request from the lightbox. How do we get this same behavior in our themes. your masonry script must be different than the one loaded in the theme pack for 2.4.1Can this be addressed please. thankyou
for reference I suppose the site would help
http://jackandaddi.com/portfolio/fine-art/
I don’t currently have a masonry gallery set up with a ton of photos say (50 or more) like I want to but if you go to the page above there is a smaller one and even it lags heavily on the iphone with a fast wifi connection.http://jackandaddi.com/gallery/rykowski-family/
shows a normal large gallery with 450×450 thumnails and it is pretty decend load time but quickly responsive after load at least, including orientation changeshttp://jackandaddi.com/terah-tim-wedding-photography/
shows a very image intensive blog post, 1200px images close to a hundred and it loads even quicker yet and is very responsive after loading.So what is so special about the galleries that make them slower especially the masonry one. I love it and it works great everywere but the iphone makes it almost unusable.
Found one mistake Peter. Just a typo. It wasn’t loading and after analyzing the parent functions file and comparing with the code you wrote I figured it was just a typo. so after changing it, the script loads. Now I will have to wait a day and see if the links are being tracked.
wp_register_script( 'avia-js-child-theme', $child_theme_url.'/js/googlelink.js', array('jquery'), 1, false ); wp_enqueue_script( 'avia-js-child' );
needs to be
wp_enqueue_script( 'avia-js-child-theme' );
but after making that change it loads. Thank you
Thanks Peter I will give this a try and see if the tracking script then loads. I really want to be able to track pdf downloads and outbound links on the site.
Thanks Ismael I will try to load it that way. Quick question though. How to you modify this for a child theme change.
the /* Register frontend javascripts:*/ function is pretty large. What do you put and where in a child theme directory?Do I place this in my child functions.php and then place the new .js file in a js folder in the child directory?
add_filter('avia_load_js', 'avia_include_js_template', 15, 1); function avia_include_js_template($paths) { $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/js/'); return $paths; }
I am assuming that is wrong though. as the
wp_register_script( ‘googlelink’, $template_url.’/js/googlelink.js’, ‘jquery’, “1”, true);
and
wp_enqueue_script( ‘googlelink’ );
were never loaded.Will you please map out the change for a child setup please? thanks.
thank you
October 22, 2013 at 12:13 am in reply to: Display Media item Title instead of Media item Description in Lightbox #178730Peter,
Thank you so much. That worked perfectly.October 18, 2013 at 10:34 pm in reply to: Display Media item Title instead of Media item Description in Lightbox #177588ok Devin I tried adding the default wordpress media gallery into a text field which allows you to still use the advanced editor, and also just using the default view and placing that way. In both cases you are right the default galleries automatically include the image title into the bottom of the lightbox. Exactly what I want.
But there is a glaring problem with this. Of course they get no styling like the enfold galleries. I want the sexyness of the enfold gallery but the funtionality of the default gallery. For you folks with skills this shouldn’t be too hard to implement into a child theme.
As of right now you already are… sort of. When you view a featured image for a blog post in the light box it appends the title name above the image in the lightbox. It doesn’t place it at the bottom IN the normal location but either way it is satisfactory. So you are already tapping into this with enfold.
So please try to help if you can on how to implement adding the image title name in to the lightbox when you view the thumbnails in a gallery built with the enfold layout builder. But on a child theme setup.
Thank you. This is super important for me to get this implemented as soon as possible. I need clients to be able to view and reference that unique name when looking at their images.
-
AuthorPosts