V_Shaft

HTML is generated by PHP in WordPress, but it’s not necessarily all in one place.

Thank you, Andrew, for a precise answer.

As a matter of fact, this “CSS Flip” effect actually did work by pasting it directly into the text editor. I didn’t try it because I assumed it wouldn’t work since it’s not the first code I’ve tried, and so far none worked as intended on the homepage (although, it did on posts/pages).

Thanks, but it’s not what I’m actually looking for. I need to add specific CSS & HTML (together) snippets. I know where to edit CSS, and whenever I go there’s instructions like “Put this CSS in your stylesheet and then this HTML in your index”.

But, I can’t edit the html because there is no html.

I want to implement this on a specific section of my homepage, on a specific set of images within that section: https://davidwalsh.name/css-flip

As you can see, along with the CSS I have to add divs. Now, if I choose “view page source” in my browser on my homepage, it displays the html clearly. And that html, I reckon, must be stored somewhere. I want to edit it to add the CSS flip snippet to my site.

But, I can’t seem to find it since WordPress doesn’t use index.html, and index.php has no html code that I can see.

Again, that code displayed when viewing page source must be stored somewhere, and I’d like to edit it directly. I want to know where that code is stored, physically, on which folder on the server. And if it’s not stored anywhere, I’d want to be told that.

I already did ask there for something very simple, and haven’t gotten a reply at all. Had to go to a third site to get the answer. Anyway, I’ll repost there since I don’t seem to have a choice.

I get that, but in order to make this straightforward CSS to work, I need to add HTML to point the CSS where to do its “magic”.

I’m trying to add this class to my homepage, in the section “THE TEAM”, I want the 3 images of the team members to flip on mouse hover and display the “back” (which will be a different image).

This is the section I see in my source code:

<section id="the-team" class="section  onetone-the-team "  style=" background-color:#e5e2dd;">
    	<div class="home-container page_container" >
		        	<h1>THE TEAM</h1>
                        <div class="one_third"><img class="aligncenter size-full wp-image-521" src="https://firstinkstudios.com/wp-content/uploads/2015/03/the_team_01.png" alt="the_team_01" width="270" height="354" /></div>
<div class="one_third"><img class="aligncenter size-full wp-image-522" src="https://firstinkstudios.com/wp-content/uploads/2015/03/the_team_02.png" alt="the_team_02" width="270" height="354" /></div>
<div class="one_third last"><img class="aligncenter size-full wp-image-523" src="https://firstinkstudios.com/wp-content/uploads/2015/03/the_team_03.png" alt="the_team_03" width="270" height="354" /></div>
        </div>
		<div class="clear"></div>
         </section>

Where do I find it, in actual code, to edit?

Hi, Jan.

Yes, I’m also aware of the benefits of using child themes. But that’s not the issue. My site (currently in development) is: First Ink Studios.

My problem is adding snippets of CSS or javascript to my page, which all require editing the HTML in your index. Since I can’t find any HTML in my index, I can’t do it. That’s the problem.

For example, I want to implement this CSS image flip effect: https://davidwalsh.name/css-flip

This requires me to add HTML along with the CSS.

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>
</div>

I see exactly the place where I need to put it when I choose the view page source option in my broswer, but I can’t seem to find out where exactly WP stores my HTML!

Solved. I got an answer thanks to the kind folks at Stack Overflow.

https://stackoverflow.com/questions/29015125/sticky-header-jumps-wordpress-theme

Hi,

It seemed to be the WP Super Cache plugin after all. I had only flushed it, no completely reset it. But, after uninstalling another plugin, and seeing its effects remained even after uninstallation, I suspected the WP Super Cache.

So I disabled it completely, cleared it, re-applied the MOD_REWRITE rules that it suggested, and re-activated it – and now it’s fine. Though, what exactly did the trick, I don’t know. I’ve not seen similar problems reported with other users, so mine may just be an isolated incident.

Anyway, thank you for the assistance.

Just wanted to drop by and say the plugin’s awesome! Just what I was looking for. Even though I changed my default WP username, and I’m using login lockout plugins, still I got rather annoying attempts at unauthorized logins.

And “Login Dongle” is a perfect solution agains that, simple and highly effective. I love how it does not change the default login form, and the addition of making your customized error message – including html code, which gives you many possibilities with how to treat people who try unauthorized logins: you can show them an images, redirect them wherever you want, etc.

Brilliant! And thank you for creating this thingy, Andrea!

Indeed, it must’ve been a caching issue or something, because after flushing my WP and browser caches, the GD Star Rating plugins does work, while the Colrobox behaves oddly – it works in some posts, while in other it doesn’t:

Working: https://coolawesomemovies.com/2012/05/largo-winch-ii-the-burma-conspiracy/

Not working: https://coolawesomemovies.com/2012/05/largo-winch-the-heir-apparent/

But it appears it is an issue with the Colorbox plugin itself, and not BPS. Anyway, thank you for the extremely fast response.

OK, but how would that change anything? Let’s say I put all dimensions to 1000×1000, and the max sized image I plan to upload is 640×480. So I upload such an image and it would initially show as 640×480 in my post, right? But I want it to display in 50% that size. To do that I’d still have to use markups, or – before uploading – resize the image in an image editing program.

I already set my sizes, not to much larger than my largest upload, but to 0: which uploads only the image in original size, which I then proceed to scale with the markup. I do not have a HD film gallery sites, my usual uploads sizes are around 500-700px width 200-400px height and to not affect loading times very much. So markups will do just fine.

Between having 3000 utterly useless image files for every 1000 I upload and resizing via markup, I’ll stick with the markup. It worked for me for 4 years on Blogger, it’s gonna work now, too.

Most users do not have a problem with it.

Well, then, I guess most users have unlimited web space. I for one, do not. I have a site with film reviews where I post several screenshots per post, and I don’t want additional 3 (!) redundant images for every image I upload.

That’s really bad practice. You should not resize images via markup.

Care to elaborate?

Actually, your first answer was correct in a way: you don’t leave the fields blank, but you can set them all to 0 in Dashboard –> Seetings –> Media. This will only upload the image in the original size, where you have to click on it again and resize it to, let’s say, 60%, or you can manually insert the width=”X” height=”Y” attributes inside the HTML code.

But, let’s put all that aside for a moment. My question is this: doesn’t anybody find this multiple uploading… downright stupid?

I mean, I’m no programmer at all, but even I see how dumb this is. I upload a picture in original size, let’s say it’s 640×480. But I want to display in 400×220 in my post so I’ll add the width=”420″ height=”220″ attributes.

The code would look like this:

<img class=”aligncenter size-medium wp-image-6529″ title=”man woman wall 05″ src=“https://coolawesomemovies.com/wp-content/uploads/2011/09/man-woman-wall-05.jpg&#8221; alt=”” width=”400″ height=”220″ />

This would mean “show the 640×320 original sized image in 400×220”.

But what WP does is create a copy of my picture in all sizes, and then inserts the following code into my post:

<img class=”aligncenter size-medium wp-image-6529″ title=”man woman wall 05″ src=“https://coolawesomemovies.com/wp-content/uploads/2011/09/man-woman-wall-05-400×220.jpg&#8221; alt=”” width=”400″ height=”220″ />

Instead of saying “show the 640×320 original sized image in 400×220”, this basically says “show the image already resized to 400×220, which is stored as a standalone copy of the original image on your server, in 400×220”.

I mean… WHAT?! This has to be one of the dumbest things I’ve ever seen, and not to say what it’ll do towards cluttering your server. The person who came up with this in the first place should be shot.