I am a photographer and currently attempting to upgrade my site from a Portfolio of my images to a fully functional E-Commerce site.
I have gotten my head around most of the WooCommerce type things I need to do, and I have an idea of what I want. I feel like I can achieve pretty much what I want.
The big problem I'm having is dynamically picture framing my images for sale.
Some examples of what I want:
https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
https://kenduncan.com/product/docklands-melbourne-vic-vx2101/
Just the ability for me to make a .PNG frame, and have it dynamically added to the background of my images as the variations are selected.
I'm reasonably sure it's a simple coding thing, but I have 0 experience coding.
Any help would be awesome! I couldn't see a simple plugin to do what I want, and I couldn't really see any existing plugin or theme that would add this functionality.
Dan
You don't need to edit the images directly, and I don't recommend it because it requires a lot more work. CSS does the trick!
Since you said you are using woocommerce, I have targeted below the default woocommerce image in the gallery on the single product page.
This is a very basic picture frame - and you can make it a lot cooler if you want it to be (such as a matte)!
.woocommerce-product-gallery__image img {
border: 15px solid #666;
padding: 10px;
}
Add this code to your theme's custom CSS field.
For something like this https://mattlauder.com.au/main-photo-gallery/landscape-gallery/lavender-bay-black-white/#prettyPhoto
You will need some javascript.
Upload the frame png and all frame variations to your WordPress site.
Give your image class padding of variable size.
In the JavaScript code, replace the background image of your image element. Make sure your background is set to no-repeat.
Some CSS tweaking might be needed to get it to look exactly how you want.
Related
Edit added this image to show what i'd like it like: Good evening. I'm working at setting up a shop in woocommerce. It's an LED Lighting Store, and I built a custom plugin for finding automotive bulbs for specific vehicles. You can check it out here. when you select a vehicle, the results display the woocommerce widgets for all the lights that fit that vehicle. However, It's cramping them up like it's putting them in three columns. When i use the dev tools inspector to inspect the actual widget, I notice that it has a class of .products .columns-3 and I can't figure out where it is coming from. And if I call that class in CSS and try to change the number of columns, it doesn't work. Even if I use the !important tag. I've got it slightly better by commanding all the results into two columns, and reverting the box-sizing and it doesn't look too bad on desktop, but on mobile, it is really bad. So I was wondering if you could take a look at it and possibly advise me on a solution?
The biggest issue I see is that whatever is generating those results it's not separating the results into sections. It is literally just a list of p. See below:
As it is now, The best way to show it would be to add this to your CSS which should put everything into 1 column and make it mobile friendly.
#abf_results {
display: flex;
}
I am setting up a blog with a new flat theme. I haven't used these before so please excuse me if I don't explain myself well.
This theme, Cordillera, comes with a full screen banner which has text layered over it. The look is great but I'd really like to be able to either a) be able to set the banner size myself or b) have it automatically adjust the container height to the image uploaded. Both being smaller than full screen, which would pull up the content below it.
Not having used this type of theme before I'm not sure what to look at to adjust this. You can check out the demo linked above or on my blog. I'm not even sure what portion of code to pull out to have you start with. If you go to my blog, the section in question is the one with the angel art.
Thanks so much for looking! I appreciate any and all help!
try to add this CSS into your site :
.top-banner {
width: 100%!important;
height: 300px!important;
background-size: contain!important;
}
go to "Appearance > Customize > additionnal CSS"
I've been playing around with WordPress. As a programmer, the media library seems a little strange to me - but I'm keen to understand how I can achieve what I need with the framework. Cue WordPress enthusiasts...
I need to force my WordPress post images to be a certain size. I'm not talking about the thumbnail size, which I've found can be easily manipulated within the loop, but the images that actually get inserted into a post, amongst the writing and the other media. I have a fixed content width, and I would like the images to reflect that width (uncropped).
Obviously, I could run some sort of Regular Expression that could identify the image tags, and replace them with new sizes, but is there really no other way of forcing image sizes within the post while retaining there position amongst the formatted writing that comes with it?
So far, I'm guessing that there is a CSS property out there that is used by WordPress in all images. At a push, I'm willing to go with this - whatever it may be (answer needed). But I was hoping that their might be some more involved code (perhaps something I could plop into the functions.php file) which could actually force any inserted post images to be a certain width.
Any thoughts on this would be much appreciated.
If that's only about limiting the max width of an image and prevent an image from overflow, you could use the $content_width variable in your theme:
https://wordpress.stackexchange.com/questions/6499/how-to-create-a-conditional-content-width-for-a-wordpress-theme
I've just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn't know it was an issue until someone told me about it)
After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.
Now I have a CSS file that's extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:
I am familiar with javascript (not much JQuery though)
I have all of the dimensions and offsets for the images from the packer.
The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture
I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)
You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.
<a class="buttonA Image5"></a>
.buttonA {
width:100px;
height:30px;
display:block;
}
.image5 {
background-image:url(...);
background-position:....
}
If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.
What would be the most effectient way to hide a background image if the url has node in it it?
I have set a background image that runs through the site however I dont want the background image to show if the url has node in it. For example,
http://example.com/node
http://example.com/node/add.
The site uses drupal and my css is entry level to be polite!
Thanks
I know in pure CSS there isn't a way to do what you are trying. However, I am pretty sure that Drupal would find a way to prove me wrong. :-)
The best way to do this would be to create a new stylesheet or style for the pages that have node in the URL and override the default background. You can do that by using the following code:
background-image: none;
But remember that this should be called after the common stylesheet that is on all the pages otherwise you will see the background image on the node pages as well.