I'm trying to insert an inline SVG of a US map in a Wordpress post. A test page where it's been inserted into the post as an HTML block with some light CSS is here: http://thepostrider.com/test-post/
When I edit it in the Gutenberg editor I can see the SVG and all, but on preview/publish nothing. It's clearly there in the code if you inspect the element on that published page but cannot for the life of me get it to manifest in the post. Historically I've gotten around this by building out custom pages and inserting SVGs into php files, but I do need to start building out this kind of thing in individual posts now too; so I would love some advice.
Take a closer look at the HTML source:
<g id="g5">
<path id="HI" data-info="<div>State: Hawaii</div><div>Capital: Honolulu</div>”
fill=”#D3D3D3″ d=”M407.1,619.3l1.9-3.6l2.3-0.3l0.3,0.8l-2.1,3.1H407.1z M417.3,615.6l6.1,2.6l2.1-0.3l1.6-3.9
l-0.6-3.4l-4.2-0.5l-4,1.8L417.3,615.6z M448,625.6l3.7,5.5l2.4-0.3l1.1-0.5l1.5,1.3l3.7-0.2l1-1.5l-2.9-1.8l-1.9-3.7l-2.1-3.6
l-5.8,2.9L448,625.6z M468.2,634.5l1.3-1.9l4.7,1l0.6-0.5l6.1,0.6l-0.3,1.3l-2.6,1.5l-4.4-0.3L468.2,634.5z M473.5,639.7l1.9,3.9
l3.1-1.1l0.3-1.6l-1.6-2.1l-3.7-0.3V639.7z M480.5,638.5l2.3-2.9l4.7,2.4l4.4,1.1l4.4,2.7v1.9l-3.6,1.8l-4.8,1l-2.4-1.5 L480.5,638.5z
M497.1,654.1l1.6-1.3l3.4,1.6l7.6,3.6l3.4,2.1l1.6,2.4l1.9,4.4l4,2.6l-0.3,1.3l-3.9,3.2l-4.2,1.5l-1.5-0.6l-3.1,1.8
l-2.4,3.2l-2.3,2.9l-1.8-0.2l-3.6-2.6l-0.3-4.5l0.6-2.4l-1.6-5.7l-2.1-1.8l-0.2-2.6l2.3-1l2.1-3.1l0.5-1l-1.6-1.8L497.1,654.1z”/>
... etc ...
It looks to me like Wordpress has converted all your quotation marks into smart quotes (” and ″). That's not going to help.
You would be better off uploading the SVG file as an image and inserting it that way. (You may need to install additional plugins to do this, as Wordpress won't allow SVG uploads in its default state.)
By the way, the next time you ask a question about code or markup, please create a minimal reproducible example and insert it directly into your question. Links to code on other sites are liable to break, making your question useless for others. Thanks.
Related
could anyone tell me if it's possible to make all these(in picture) wp-default links with class .wp-embed .post same height so that it won't look horrible like in picture.enter image description here I know that it is programmed so that the height addapts to text size inside it.
How do i do that, i can't find they way how to overwrite that with CSS. Is it only achievable by PHP / if so how - i can barely read PHP for now...
There are two separate questions here:
How do I change the css on a wordpress site?
The answer is that it will depend on the setup of your site.
-- You may have access to edit the css for the theme by going to Dashboard -> Appearance -> Editor and then finding the style.css
-- You may also have access to edit the css file through manually editting the file on the server.
-- if those first two options don't work, and you are able to add plugins, you can add a plugin to let you add css to the page. Simple Custom Css is one such plugin.
How do I fix this particular css problem?
To answer this question I would need to see more of the css and html for this page
Sorry for the length, my problem is very simple, but specific.
I'm building a wordpress site that automatically imports image galleries from a Tumblr account, then styles and displays them. The backend is finished, and all that I need now is have all images in posts be displayed as thumbnail sized links. They are not behaving well with the importer (I've tried 6), so I have to edit the HTML display (rather than the images as they are uploaded).
I have decided to do this by applying class="attachment-thumbnail size-thumbnail" on all images on the site (in HTML). I have tested this and they will open the proper gallery in a lightbox as necessary so long as they belong to those two classes.
I have a two part problem.
I do not know PHP past basic syntax, and while I can intuit most of what is happening I don't trust myself to edit Wordpress source code without understanding exactly what I am breaking.
From other answers I've learned that I should most likely edit the wp_insert_attachment() function in post.php under wp_includes/. I have found the function, but don't really know where to go from there, as it does not appear to be specific to image attachments. I don't want to throw any errors by assinging image classes to non-image attachments. How do I add those two classes (attachment-thumbnail and size-thumbnail) to all post images (and only images)?
There is a single exception to this rule. I want a large image on the homepage, and have it not be a link.
It seems like the way to handle this would be to allow page attachments to be handled normally, while attachments that are both images and attached to posts should trigger this:
if [attachment is an image AND is on a post, not a page]:
<img src="https://whatever">
becomes
<img src="https://whatever" class="attachment-thumbnail size-thumbnail">
tl; dnr: ^^ that's all I need to happen, in PHP, in the right file, in Wordpress ^^
Thanks!
So likely you will want to do it via php but instead you could do it with javascript ie jQuery:
<script>
$(function() {
$("body img").addClass("attachment-thumbnail size-thumbnail");
});
</script>
Put that on any page or site header and it will add the class to all images. You can modify the search filter to suit.
You might need to re-call your lightbox initialization code too, or put this before it gets called initially.
I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated.
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).
On the catalog/category page I would like images change when hover. Like clubmonaco.com I know how to do it on html/css but no idea on magento. Any help?
You could modify files in this directory:
app/design/frontend/base/default/template/catalog/product
for example (list/ and list.phtml)
or your template for example:
app/design/frontend/default/yourtemplate/template/directory with product files
CSS files you can find in:
skin/frontend/
You should also think, where the second image is stored. You can use "CSS-Sprites" for this case - a single image file, that contains both photos. The disadvantage is, that you have to customize every page, where magento shows product images.
Alternatively you have to define exact orders. First image is the front view, second image is always the back view.
The programming part is not really difficult. Look at
app/design/frontend/base/default/template/catalog/product/list.phtml
for the Catalog view. Path can vary, if you have a custom template. In the Magento backend there is a feature to show up the real path (system->configuration->development tools).
You can write your Javascript directly into the list.phtml. Magento also writes JS-code directly in the .phtml files. Of course it's not very pretty, but Magento is so complex; if other people work with the shop system, it will be easier to find.
Keep in mind, that the list.phtml contains two layouts: Grid and List View. Just if you do a change and wonder, why you can't see a change in the frontend ;-)
I am developing a wordpress theme based on Roots starter theme . However, I am facing a problem here. When I insert an image on the first line it does not appear, not even in the html mark-up (I checked page source to ensure that). However, when I insert the image from second line onward it shows up properly (also reflected in html mark-up as checked from page source).
I was wondering if that could be an issue with my theme or wordpress itself. I am using version 3.5.1 in the development environment.
Would highly appreciate any discussion on this.
Well you can try to insert the image manually from the begining in HTML code.Find the path of the image that you want to insert and put it on
<img src="" />
Most probably this issue lies with your theme. Try checking your functions.php file and see if there a filter which is related to JavaScript or the_content.