I need to update the header image on the front page of our website. I found the code in the Theme Editor for the header.php. The current image link is there but I can't find the template directory to add the new image to be able to swap them out. How would I go about finding the template directory to add in / update the image?
Old Photo: /images/woolpower-home-bg.jpg
New Photo: https://woolpowerus.com/wp-content/uploads/2021/09/Header-Kollag-2021.jpg
<?php if (is_front_page()): ?>
<header class="home-banner jarallax">
<img class="jarallax-img" src="<?php echo get_template_directory_uri(); ?>/images/woolpower-home-bg.jpg" alt="woolpower" title="woolpower">
<div class="control-content">
<div class="container">
<div class="box-content">
<h1>Why Woolpower?</h1>
<p> Because we manufacture underwear and reinforcement garments all the way from yarn to finished product in Östersund, Sweden. We are a company that takes responsibility for people, animals and nature. The clothes are sewn to last and adapted to extreme weather conditions. But at the same time, they should keep you warm in your everyday life. </p>
</div>
</div>
</div>
</header>
Could I use -
<img src="<?php echo get_template_directory_uri(); ?
>/uploads/2012/09/Header-Kollag-2021.jpg" />
It looks like get_template_directory_uri is returning https://woolpowerus.com/wp-content/themes/targetmarket so src="<?php echo get_template_directory_uri(); ?>/uploads/2012/09/Header-Kollag-2021.jpg" would point to the wrong location.
You could re-upload the image under the theme's folder or use src="https://woolpowerus.com/wp-content/uploads/2021/09/Header-Kollag-2021.jpg"
Related
I'm getting stuck in an ecommerce development project using Laravel and Vue. I can't make the images appear dynamically in the index view of the product. I'm able to upload and print the images in the show view and these are stored in storage / app / images.
The problem is that the image_url attribute of a product is nullable so it may or may not have an image and the idea is to show them when they have one.
Here is the code of the component ProductCardComponete.vue that is where I develop the code itself.
<template lang="html">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="card">
<header class="bg-dark padding">
</header>
<div class="justify-content-center">
<!-- <img v-for="product in products" v- if="product.extension" :src="'/productos/images/'+product.id+product.extension">
-->
<img :src="'/productos/images/34.jpeg'" class="card-img-top">
</div>
<div class="card-body padding">
<h2 class="card-title">
<a :href="'/productos/'+product.id">
{{product.title}}
</a>
</h2>
<h4 class="card-subtitle">{{product.humanPrice}}</h4>
<p class="card-text">{{product.description}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
product: {
type: Object
}
}
}
</script>
Of course, when I put the route in a static way, it works. But I don't know how I could arrive at the solution to show it dynamically and the way of showing the image if the product has one.
Finally here is a link to the github Repo of the project just in case.
Github Repo
Images should be saved in storage/app/public/ and you should make a symlink so that you can access storage folder in public folder. Otherwise you will stuck in accessing images. Read this official doc.
//index.html.php
<?php foreach ($view['assetic']->image(
array('#AppBundle/Resources/public/images/test.png')
) as $url): ?>
<div id="title">
<h1><a href="/home/#"><img alt="logo" src="<?php
echo $view->escape($url); ?>"> </a>
</h1>
</div>
<?php endforeach ?>
Above is my code in template after adding, I executed assetic:dump and it generated a images in web/images/ , still am not able to see images on my page. It is throwing 404 error for images.
Kindly let me know what going wrong here.
Note: Tried specifying image path in asset.yml and also LiipImagineBundle, nothing helped.
Assetics and assets are different.
do an bin/console assets:dump to put the resources of your bundle in the web directory then use your images like
<img src="<?php echo $view['assets']->getUrl('images/logo.png') ?>" />
I'm working on a school project where I can post images online using meteor.
I was able to post image and display the datas, but it's keep stacking to the other images. Is there any wasy to fix this? Here's the picture:
And here's my code that displays the datas:
<template name="posts">
{{#if currentUser}}
<div class="grid">
<div class="grid-sizer"></div>
{{#each postList}}
<div class="grid-item">
{{updateMasonry}}
<img src="{{this.url}}">
{{#each postData}}
{{this.username}}
<br>
{{this.message}}
<br>
{{this.createdAt}}
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
I think you'd want to bust it up into another template. You'd have your larger posts templates that would hold the images+comments and then you'd make a new template for each images.
So having a separate template for each of your image posts
<template name="images">
<div>
<img src="{{url}}"/>
{{#each postData}}
{username}}
<br/>
{{message}}
<br/>
{{createdAt}}
{{/each}}
</div>
</template>
You can pass data into your template and you can only pull postData that is already meant for that image, instead of having everything jumbled into 1 template.
It's probably best practice to split up your templates in the above fashion and properly pass data to each image post instead of grouping everything into 1 template.
https://www.discovermeteor.com/blog/a-guide-to-meteor-templates-data-contexts/
i have created a new page using CMS->Page->Add New Page, My page title is About Us and the url key is about-us, in content i have insert this
{{block type="core/template" template="content/about-us.phtml"}}
this my code from about-us.phtml
<div>
<img src="skin/frontend/default/blank/images/mypic.jpg"/>
</div>
my problem is image (mypic.jpg) doesnt show in about us page, please help me..
thx..
you should have to use getSkinUrl function to work with your current skin of front end and grep image from it.
<div>
<img src="<?php echo $this->getSkinUrl('images/mypic.jpg');?>"/>
</div>
hope this will sure help you.
Alternate Solution:
<img src="{{skin url='images/yopur-image.png'}}" alt="" />
Image File Location is:-
\magento\skin\frontend\default\default\images
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>