The "No Dev Question is Stupid" Thread - Basic HTML / CSS / Etc.

JasonSc

BuSo Pro
Joined
Mar 30, 2016
Messages
86
Likes
126
Degree
0
Assuming Apache since it's Wordpress related.

Beware this is untested and may need slight modification to work.


Code:
.htaccess

RewriteEngine on
RewriteRule ^/(.*)\.shtml$ /$1 [NC]
RewriteRule ^/blog/(\d+)/(\d+)/(.*)\.shtml$ /blog/$1/$2/$3 [NC, L]
Thanks for the help. The above code didn't work, but it got me pointed in the right direction.

I got it fixed sort of... The code below works, but its does create a double hope 301. Which isn't ideal, but will work for the time being.

Code:
RedirectMatch 301 (.*).shtml$ https://www.domain.com$1/
RedirectMatch 301 ^/blog/([0-9]{4})/([0-9]{2})/(?!page/)(.+)$ /blog/$3
 
Last edited:

JasonSc

BuSo Pro
Joined
Mar 30, 2016
Messages
86
Likes
126
Degree
0
If you want to backend manage your 301s you could use a plugin like: https://wordpress.org/plugins/redirection/ there are many others, simple to use and at quick glance easier to manage. (For me anyway)
I thought about going that direction, but I just don’t like plugins. Having had several sites hacked in the past I try to keep plugins to the bare minimum.
 
Joined
Dec 31, 2016
Messages
476
Likes
288
Degree
1
Suggestions for WP plugins to go from feed (xml) to an "amazon style" product slider?

Automatically or semi-automatic.

WP All Import to do the feed processing?

Custom Posts plugin to store products?

Which plugin to present it as a carousel?

^ I want to do an automatic "deals" import from a feed and present it on landing pages and probably some faceted search stand alone page.

Woocommerce?

Custom posts?
 
Last edited:

RomesFall

so po qwo ro
BuSo Pro
Joined
Oct 7, 2014
Messages
467
Likes
679
Degree
2
I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.

I thought ok that's cool I'll just change the color property so it's visible in black instead of white when it's outside of the boundaries of the background image on smaller devices but for whatever reason - don't ask me why - any new media query I add isn't actually working (it's applying to desktop as well).

Done media queries many times, it's just freaking odd.

Could this be because of a caching plugin or anything like that? Usually, CSS updates are visible without clearing the cache on this site.

I'm thinking it's just some kind of bug with my theme or something like that, god knows the number of updates that have gone by since I last added CSS to the site.

Any ideas?
 
Joined
Apr 7, 2016
Messages
274
Likes
172
Degree
1
I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.

I thought ok that's cool I'll just change the color property so it's visible in black instead of white when it's outside of the boundaries of the background image on smaller devices but for whatever reason - don't ask me why - any new media query I add isn't actually working (it's applying to desktop as well).

Done media queries many times, it's just freaking odd.

Could this be because of a caching plugin or anything like that? Usually, CSS updates are visible without clearing the cache on this site.

I'm thinking it's just some kind of bug with my theme or something like that, god knows the number of updates that have gone by since I last added CSS to the site.

Any ideas?
It's possible you jumbled up where your rules lie within the cascade. In the example below, the h2 color is defined for all styles then after it is defined in the media query. If you were to switch the order and put the media query rule above the overall rule, the general rule would override it in the "cascade".

Code:
h2{
  background-image: url("https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg);
  background-size: 100%;
  height:200px;
  color:#000;
  }
  @media (max-width: 768px) {
  h2{color:#fff;}

}
You can resize the window to see the media query in action:
Code:
http://jsfiddle.net/tya6cokn/1/
 
Joined
Oct 14, 2014
Messages
72
Likes
53
Degree
0
I have a pretty dumb question--hopefully this is the thread for it.

The WP editor is made to encapsulate new lines in paragraphs (<p>).

So when you press enter for a new line, it won't show you the <p>, even in the HTML tab, but it'll output it. You can get around this by holding Shift+Enter, in which case it'll produce a <br> instead.

OK, so far so good.

In my listicles, I've setup my formatting in a way that entire "sections" are one big list item (<li>), to get the perfect list setup and get those list snippets in the serps. Like WikiHow et al. (https://www.wikihow.com/Jump)

My problem is, working with paragraphs in this environment is a PITA because WP doesn't appear to be setup for this.

So in a list item, when pressing Enter, it creates a new list item (<li>item1</li><li>item2</li>) and that makes perfect sense, but there doesn't seem to be anything to make my life easier, or at least I can't find it. Maybe I'm not asking the right question.

Is there any trick to being able to easliy make new paragraphs by pressing enter inside the editor? Maybe some js of some sort so that I can hold down a key while pressing enter, or something?

Right now I'm manually adding <p> and </p> to each line.

Man, this sure is lame... sry gais
 
Joined
Dec 5, 2014
Messages
72
Likes
67
Degree
0
I have a pretty dumb question--hopefully this is the thread for it.

The WP editor is made to encapsulate new lines in paragraphs (<p>).

So when you press enter for a new line, it won't show you the <p>, even in the HTML tab, but it'll output it. You can get around this by holding Shift+Enter, in which case it'll produce a <br> instead.

OK, so far so good.

In my listicles, I've setup my formatting in a way that entire "sections" are one big list item (<li>), to get the perfect list setup and get those list snippets in the serps. Like WikiHow et al. (https://www.wikihow.com/Jump)

My problem is, working with paragraphs in this environment is a PITA because WP doesn't appear to be setup for this.

So in a list item, when pressing Enter, it creates a new list item (<li>item1</li><li>item2</li>) and that makes perfect sense, but there doesn't seem to be anything to make my life easier, or at least I can't find it. Maybe I'm not asking the right question.

Is there any trick to being able to easliy make new paragraphs by pressing enter inside the editor? Maybe some js of some sort so that I can hold down a key while pressing enter, or something?

Right now I'm manually adding <p> and </p> to each line.

Man, this sure is lame... sry gais
There is a filter called wp_autop you can use to shut off the feature entirely - I haven't seen the list behavior you described before but I would bet it's caused by the wp_autop filter.

I've got an issue with background-image on mobile as backdrop for some h2 headings.

At first the image wasn't scaling properly so I did a background-size: 100% which solved the issue.

The second issue which I've still not solved is I can't get the image to add any amount of height which has caused the h2 to overlap the image or go outside of the boundaries of the background image.
Not a direct solution but check out background-size: cover; - it will scale the width AND height to ensure the background covers the whole element, albeit with some of the image cut off.

I agree the second issue points to a stylesheet issue - https://jigsaw.w3.org/css-validator/ can help with large stylesheets
 
Joined
Dec 21, 2018
Messages
21
Likes
17
Degree
0
For some reason one of my sites has my VPS IP show up in google webmaster and shows up on google search results if I search the right phrases. Anyone have a suggestion on how I can fix this?

I'm thinking 301 redirect may work but not sure how to set that up exactly.
 

CCarter

If they cease to believe in u, do u even exist?
Staff member
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
2,216
Likes
5,148
Degree
6
For some reason one of my sites has my VPS IP show up in google webmaster and shows up on google search results if I search the right phrases. Anyone have a suggestion on how I can fix this?
Your site is setup as the the "default" in the Apache (or NGINX) directory or website. In the apache case, it's most likely that in your "/apache2/sites-enabled/default" file that's where your site is setup, and therefore the IP address (cause it uses a wildcard "*" instead of the your domain.com) resolves to that instead of a blank page or nothing at all (similar situation in nginx).

What you have to do is copy the "default" file over to "mydomain.com.conf" (within "sites-available" folder). Then make modifications so only your domain shows up in the :80 and :443 server portions of the configuration and not "*:80" and "*:443". Doing those "*" (stars) means a wildcard and that's the situation that's causing your IP address to resolve as your domain name. You want your http server (apache/nginx) to not resolve anything if the domain is not explicit.

Actually another method that might be easier is to simply redirect all "*" wildcard enteries to your mydomain.com (www and non-www versions within SSL (443 port) and non-SSL (80 or 8080 port). But you have to create separate entries for the "mydomain.com" somewhere - don't suggest "default" file - but you can. I prefer creating separate "mydomain.com.conf" files for each site and going from there.

Then enable the mydomain.com.conf within apache ("a2ensite" command - a2dissite disables a site). Enabling the site creates a link from the "sites-available" folder to the "sites-enabled" folder that makes it live.

Afterwards disable the "default" using "a2dissite" command. This will remove the "default" reference from the "sites-enabled" folder and only leave it within the "sites-available" folder. Then reload/restart apache.

It's a similar process for NGINX.

Apache2 enable/disable: https://www.linode.com/community/questions/311/how-do-i-enabledisable-a-website-hosted-with-apache

Nginx enable: https://stackoverflow.com/questions/4891344/how-do-i-add-new-site-server-name-in-nginx

--

Basically your website is being resolved when you go to your VPS's IP address - either block that ability OR redirect it within your Apache/Nginx file and that will fix it. A 301 redirect is "okay", but I recommend to do it within the server level for this particular situation.
 
Joined
Dec 21, 2018
Messages
21
Likes
17
Degree
0
Thank you @CCarter I got it working with modifying the apache file. Now one other question, do I have to do anything to get the IP out of google? Or will that happen naturally after it sees the redirect?
 
Joined
Dec 31, 2016
Messages
476
Likes
288
Degree
1
Are you for or against using shadows for text boxes and images in your articles? Text boxes like "Facts about widgets".
 
Joined
Nov 15, 2018
Messages
17
Likes
13
Degree
0
Hi guys,

Does any of you know how I can add something like this to an image on a WordPress site:



Basically the whole "View on Amazon" thing. I can see it's not part of the image, it's actually a layer on the top of it and then you can click on it and it takes you to the product on Amazon. If you know a plugin or a way to do it, I'd really appreciate an answer.
 

CCarter

If they cease to believe in u, do u even exist?
Staff member
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
2,216
Likes
5,148
Degree
6
Does any of you know how I can add something like this to an image on a WordPress site:
Yes.

Amazon Like Overlay - Easy CSS + HTML Version:

CSS Code:
Code:
.overlay_background {
  position: relative;
  z-index: 1;
  background-color: #ebebeb;
  padding: 4px 4px 2px 4px;
  display: inline-block;
}

.overlay_background img {
  margin: 4px; /* for light-gray background */
}

.overlay_text {
   position: absolute;
   bottom: 11px;
   right: 8px;
   padding: 6px 20px;
   color: #ffffff;
   display: inline;
   background-color: #666666;
   background-color: rgba(102, 102, 102, 0.9);
   z-index: 2;
}
HTML Code:
Code:
<div class="overlay_background">
  <a href="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44003">
    <img src="https://i.imgur.com/K0LMo3Z.gif">
    <span class="overlay_text">View At BuSo</span>
  </a>
</div>
Result:


--

Check out a live version on JSFiddle: Amazon-like Overlay

--------

Implement the CSS code within your stylesheet, then use the HTML code wherever you need the image with overlay added.
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,466
Likes
6,369
Degree
7
@komet, Another option would be to use a CSS pseudo-element like :after. You could potentially get this entire thing done without having to edit the HTML, but by simply adding a CSS class to the image. So you could go in and add the CSS class .at-amazon to the image you want and this would get automatically done for you. The nice thing is with Gutenberg you don't even need to view the HTML to add the class. With the classic editor it's just as quick but you have to pop into the "view source" mode for a second.

The CSS would look a lot like CCarter's but you'd do it all on the :after something like this:

Code:
.at-amazon:after {
    content: "View at Amazon";
    /* Plus most of CCarter's CSS all on this one pseudo-element */
}
I can't be bothered to get the exact CSS together for you at the moment, but that should put you on the path if you want to do it this way. The key is the content: "View at Amazon"; line, which will automatically add that text after any image you add the .at-amazon class to. The rest is just positioning it and styling it as CCarter has shown.
 

CCarter

If they cease to believe in u, do u even exist?
Staff member
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
2,216
Likes
5,148
Degree
6

Another option would be to use a CSS pseudo-element like :after.
That's not possible, the "content" field only takes text as content and cannot produce HTML. You need to product HTML before and after the image to get it to work correctly.

However here is a jQuery version that will run within Wordpress.

The difference here is it is a single image, with no div layers or anything in the code, all the user has to do is add the class .at-amazon, along with the additional data attributes (data-amazon-link and data-amazon-text) needed for the new html to be created. The code will scroll through all .at-amazon images on the page, and if all the right elements are present then it will replace the image with the overlay HTML + new image needed to produce the same results:

Same CSS
Code:
.overlay_background {
  position: relative;
  z-index: 1;
  background-color: #ebebeb;
  padding: 4px 4px 2px 4px;
  display: inline-block;
}

.overlay_background img {
  margin: 4px; /* for light-gray background */
}

.overlay_text {
   position: absolute;
   bottom: 11px;
   right: 8px;
   padding: 6px 20px;
   color: #ffffff;
   display: inline;
   background-color: #666666;
   background-color: rgba(102, 102, 102, 0.9);
   z-index: 2;
}
New HTML:
Code:
<img src="https://i.imgur.com/OkJRQ6M.gif" class="at-amazon" data-amazon-link="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/page-7#post-44006" data-amazon-text="Ryuzaki Is Wrong">
jQuery Code: (Assumes you loaded jQuery)
Code:
jQuery(document).ready(function(){

  jQuery('.at-amazon').each(function(i, obj) {

    let the_image_url = $(this).attr("src");
    let the_amazon_url = $(this).attr("data-amazon-link");
    let the_amazon_text = $(this).attr("data-amazon-text");

      //Do nothing if fields are blank
      if ((the_image_url === undefined) || (the_image_url === null)) { return; }
      if ((the_amazon_url === undefined) || (the_amazon_url === null)) { return; }
      if ((the_amazon_text === undefined) || (the_amazon_text === null)) { return; }

        //All good to go then
    jQuery(this).replaceWith('<div class="overlay_background"><a href="' + the_amazon_url + '"><img src="' + the_image_url + '"><span class="overlay_text">"' + the_amazon_text + '"</span></a></div>');

  });

});
Result:


Link to JSFiddle version: Amazon Overlay with JQuery

--

The user needs to put that jQuery code somewhere inside the blog HTML, or in a .JS file, or somewhere to make sure the jQuery executes. Afterwards go to the images where they want to put the overlay, and then implement the class at-amazon, and data attributes - data-amazon-link and data-amazon-text in the image.

 
Joined
Nov 15, 2018
Messages
17
Likes
13
Degree
0
Thank you both @CCarter and @Ryuzaki for your input. For now, I've used your initial option with CSS CCarter as it was easier for me to implement. However I will play around with the 2nd one you created.

Cheers lads
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,466
Likes
6,369
Degree
7
"Oh snap, here comes Ryuzaki!"

THAT'S THE SOUND OF THE POLICE


THAT'S THE SOUND OF THE BEAST
That's not possible, the "content" field only takes text as content and cannot produce HTML. You need to product HTML before and after the image to get it to work correctly.


You don't need to produce HTML within the content attribute. You can style it as if it is within it's own HTML container.

The goal here is to save as much time as possible when adding this "View at Amazon" box to an image. You it's time consuming to have to paste a bunch of HTML around each image every single time you want to do this. My initial goal was to set it up for you so you only need to add a CSS class to it and boom it's done.

Goal achieved.
Earlier I said to add the :after to the image. This works in all cases except where you want to add text. Since you'll wrap the image in an anchor tag to have a link, and since Wordpress wraps all images in <p> tags, you can simply add the CSS class to the parent paragraph tag like this:

Code:
<p class="at-amazon">
  <a href="https://www.buildersociety.com/threads/the-no-dev-question-is-stupid-thread-basic-html-css-etc.2844/post-44009">
    <img src="https://i.imgur.com/AWPAgs5.jpg" />
  </a>
</p>
This means that any time you want "View at Amazon" on any image, all you need to do is add "at-amazon" to the parent paragraph tag for the image.

Then, add this CSS to your child theme:

Code:
.at-amazon a {
  display: inline-block;
  position: relative;
}

.at-amazon a::after {
  content: "View at Amazon";
  position: absolute;
  bottom: 0;
  right: 0;
  color: #FFF;
  background-color: gray;
  padding: 8px 12px;
}

.at-amazon img {
  display: block;
}
What's happening is the text is added to the anchor tag itself, meaning that it's also included in the link as well.

No z-index nonsense, no adding overlay wrappers, no adding an additional overlay_text sibling, no data attributes. Just add the "at-amazon" and you're done.

It'll look like this, which is what I look like right now:


Link to JSFiddle: https://jsfiddle.net/RyuzakiEruIshii/ku7t9j6y/
As a consolation prize, I will say that you could definitely use CCarter's jQuery method to add the HTML into your posts (if you want to bloat out your HTML some more :cool: ).
 

CCarter

If they cease to believe in u, do u even exist?
Staff member
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
2,216
Likes
5,148
Degree
6
As a consolation prize,
LMFAO


Dude changed his whole story about being simply a "class add-on" to the image, to now having to wrap the whole image in a p tag. :D His new code looks a lot like my first code... ONE difference in where you add the text.

Don't fret, you went up against the best and you lost. Be proud Ryuzaki, be proud!
 

Ryuzaki

女性以上のお金
Staff member
BuSo Pro
Digital Strategist
Joined
Sep 3, 2014
Messages
3,466
Likes
6,369
Degree
7
to now having to wrap the whole image in a p tag.
Wordpress wraps all images in p tags, bruhski. All you gotta do is drop in the class. Elegance.

 
Joined
Mar 28, 2019
Messages
14
Likes
10
Degree
0
I've got a question about linking posts to other custom posts (in Wordpress). I have a custom post type that is basically a database/directory of products. Now if I write a normal post (a guide, a news update), is there some way to link that to a specific product?

The only solution I found so far is to create a tag with the name of each product, and then use that to show 'latest news/guides' on the product page. Is there a more elegant solution?
 
Joined
Dec 31, 2016
Messages
476
Likes
288
Degree
1
Best option to build a simple REST API?
Django Rest API or Flask API?
Something else?
 

SmokeTree

Developer/Linux Consultant
BuSo Pro
Digital Strategist
Joined
Sep 23, 2014
Messages
223
Likes
403
Degree
1
Best option to build a simple REST API?
If you know Python then Django or Flask would be fine. Some folks use Node.js. For me, I have been using Phoenix Framework (https://phoenixframework.org/) for both REST/Open Graph APIs and Web Apps and it has been nothing but smooth sailing. The bottom line is to use whatever language/framework you're comfortable with and enjoy using, unless you want to use this opportunity to add something new to your arsenal, which in that case a REST API would be a great starter project.
 

Steve

BuSo Pro
Joined
Dec 29, 2016
Messages
83
Likes
75
Degree
0
Best option to build a simple REST API?
Django Rest API or Flask API?
Something else?
Like @SmokeTree says, go with what you know.

If this is for the Google sheets thing, then performance and / or library support aren't particularly relevent, since it's not much more than a proxy.

If Pythons your thing, but you don't have a lot of experience with either mentioned framework then flask is probably easier for this type of project.

If I was doing this, I would probably chose nodejs with koa, because it's very simple, has good library support, and performs well for this type of workload.

For larger more complex things, I would probably go with php Laravel, even though it's way heavier, because I know it inside out, it comes with spare batteries and a backup generator, composer has a well tested library for just about everything else, and if it saves me a couple of days of dev time, I can afford to run it on a dedicated server for 6 months and still come out on top.

If performance and scale was absolutely critical, I would probably write it in go, since it's bloody fast, and single binary deployment is really nice. It's a simple language, but not particularly enjoyable to write, with a fair amount of boilerplate.
I would probably get to like it more if I used it more frequently, but I just don't need that type of performance in the software I write.