I'm working on a WordPress site and have an array of "icon blocks" that contains a selector for an svg, and a few other details I need for each icon block. In my template file I'm looping over these blocks and using wp_remote_get() to pull the contents of the selected svg file and insert it into my page's html.
Although I'm pulling back the contents of three unique files the first file is being displayed 3 times, here is a screenshot (This is in Chrome):
However, if I open the same page in Safari I get the same repeating icons, but with a different icon. Here is the Safari screenshot:
If you run a dif on the svg's on the page, they are indeed different svgs.
Any help would be appreciated. Here is a link to the staging site if you want to look at it there.
Make sure to use unique ids - the three SVG snippets repeat some. The lines
<clipPath id="clip-path">
and
<g style="clip-path:url(#clip-path)">
After importing they are all part of the same document, and references fail.
Related
What I've noticed about some sites that rely on heavy images (such as google maps)
is that they display a low-rez copy of an image and then when you focus on a certain section of that image they generate a high rez copy of the image. That seems easy enough. But what confuses is me is that they only render a specific section of that image and not the entire image. How do they go about doing this? (Rendering sections of an image at a time)
Each "section of an image" is actually an individual image that is loaded separately from other images.
If you view your network details when browsing google maps, you'll see things like this
being transmitted, which is a small piece of the whole map that is displayed on the screen.
My MODX site needs to grab the first image from all pages for Open Graph Meta tags, which will be plugged into the Head chunk for all templates.
The problem with this is that not all images are located in the content part of a page. Some are located inside Chunks and others inside TVs. (Finding an image tag from the content is not an issue.)
It might be possible to get all Chunks and TVs and loop through their values to check for images.
But is there a way to get the <body> contents of the resource?
Probably several ways, you can try writing a plugin to parse through the entire content of a page, looks like the OnWebPageComplete event may be the one to use (take a look at the different events to see if one is more appropriate}
You can try and grab the resource from the cache, keeping in mind that any chnks/snippets/TVs called in the page un-cached will not show up in the resource cache file.
You can get a list of TVs once you have loaded a resource & then use getTVValue to get the value.
If you have an image in a chunk, getChunk might work [might, I've never tried to use it that way] to get it's contents but I would image that the image in a chunk would come from a TV ~ so you should be able to retrieve it with getTVValue.
You could also just setup a TV for the OpenGraph image and explicitly set it on a page by page basis.
Probably writing a plugin & some regex is going to be the least painful way of going about it.
I have several high-resolution images that I am using on my website. I am using PHP to echo the images. I specify a width of "30" for each of the images, which correctly sizes them.
The problem is that for SOME of the images, there is some sort of automatic conversion to data URI - which seems to cause the images to not only be resized to 30x30, but also to have a resolution of 30x30.
This seems to happen when I refresh - almost like it is caching the php after the first execution, then on refresh, it thinks the image file size is actually 30x30.
See images below - the first image is the first time I visit the website and screen captured on my iphone. Then I refresh, and the second screenshot is the result. Notice that the apple image remains crisp on both, while the rest appear blurry. All of the original files have approximately the same resolution.
Additionally, if I view the apple image (after refresh) in it's own window, it shows this:
.../logos/30xNx50de0713c94d847...
Whereas if I view the "dicks sporting goods" image in it's own window, it shows this:
data:image/jpeg;base64...
I am not specifying any kind of data URI conversion - would it be something on the server that does this automatically? And why for some images but not others?
Thank you for your time.
I determined this was a result of PageSpeed being enabled on my host. PageSpeed is a Google product that optimizes the loading of pages - and in this case, transforms images based on the width that is specified in the img tag.
By adding
?ModPagespeed=off
to the end of any page, it disables PageSpeed and shows the images at full resolution. I took this approach rather than disabling PageSpeed entirely, because I want some of my pages to take advantage of the optimization.
I'm printing a page of my PHP application with the ( ctrl + P ) (default printing). How can i make sure that the CSS (tables, padding, cellspacing, background picture with opacity) are printed along on the sheet. I'm calling the CSS from another file.
Thanks for your help and time.
You must add this
html{-webkit-print-color-adjust:exact;}
To any css file of the project, ideally the print one, as the others won't load when printing. It will force chrome to use every background color and image exactly as coded.
Add this to your HTML page. Now you need to adjust your page manually, for fitting it to the print page. (use the preview function in Chrome)
<link rel="stylesheet" media="print" href="print.css">
The interesting part for the browser is media=print
You can find some more style commands for printing web pages here:
CSS How-to: Optimize Pages for Printing Using CSS
Printing a Book with CSS: Boom!
complete css guide - Printing
CSS Paged Media - #page Rule
You will need to include a print stylesheet, as detailed by Dan Lee. However that's only half the answer. The other half is that Chrome (and Safari) have poor printing options, and cannot print background-images, or background-colors. I had to figure this all out when trying creating a printable version of FullCalendar that used colors to differentiate between different types of calendar entries.
I include these directions for printing:
Firefox has the best print output, Internet Explorer is second.
You may want to turn on the Print Background option in your browser: In Firefox or Internet Explorer: Go to File -> Page Setup -> Check Print Background (colors and images)
Although Chrome and Safari will work, they do not have the print background options. It will be difficult to differentiate between the types of entries on the calendar.
If your page is simple enough, you can sub in actual <img>s instead, and use CSS to stretch and position them behind any text that might be in the div or td. That wasn't possible for the FullCalendar project I did, but it works fine on a simpler table. It's compatible with Chrome, Firefox, and IE, and doesn't require users to toggle a specific option to get the correct output.
This is as of Chrome 17.0.963.83 and Safari 5.1.4 on Windows.
I'm displaying pieces of an image in a large grid created from divs. I'm using the background-image and background-position to display portions of the image. The problem I'm running in to is that a user can simply open up firebug and see the entire image (which defeats the purpose of the game).
I've attempted to mask the path using a php script as the URL but if the user navigates to the php file, they can still see the image. It would appear that anything I do with the CSS is entirely client side so denying everything outside the localhost in my .htaccess won't work.
Any suggestions?
The over arching goal is to have an automated way to split and display pieces of the image into a grid.
If you deliver the whole image to the browser, the browser holds the image and has every right to show it to a user. I don't think you can prevent the browser from showing it. I'm afraid you will have to deliver the image in pieces, or perhaps write your whole game using <canvas> and play around with images as pixel data. :)